본문 바로가기
수업(국비지원)/JavaScript

[JavaScript] 기본 자료형(alert, document,console), 변수 선언

by byeolsub 2023. 4. 18.
  • 자바스크립트(Javascript)

              : 웹 브라우저에서 사용하는 프로그래밍 언어

표현식 : 자바스크립트에서 값을 만들어 내는 간단한 코드

문장 : 하나 이상의 표현식이 모여 문장을 구성.
      문장 끝에는 마침표를 찍듯이 세미콜론(;) 또는 줄바꿈을 넣어 문장의 종결 표시.

프로그램 : 줄바꿈으로 문장을 구분해 코드를 작성

식별자 : 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어.
        주로 변수명이나 함수명 등으로 사용
     
    - 키워드 사용 안됨
    - 숫자로 시작 불가
    - 특수 문자는 _와 $만 허용
    - 공백 문자를 포함할 수 없음

- 식별자를 만드는 일반적인 관례 
          : 클래스의 이름은 항상 대문자로 시작
            변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작
            여려 단어로 이루어진 식별자는 각 단어의 첫글자를 대문자

- 식별자의 종류 : 식별자 뒤에 괄호 없음 - 단독 사용시 변수, 다른 식별자와 사용시 속성
                 식별자 뒤에 괄호 있음 - 단독 사용시 함수, 다른 식별자와 사용시 메소드

  • 기본 자료형(alert, document,console)
자료(data) : 프로그래밍에서 프로그램이 처리 할 수 있는 모든 것
자료형(data type) : 자료 형태에 따라 나눠 놓은 것
   * number(숫자), String(문자열), boolean

alert() : 대화창(확인창)으로 내용 출력
console.log : 개발자 모드의 콘솔에 내용 출력
              문자열 표시 - " ", ' ' 모두 가능
              문자열을 배열처럼 첨자로 선택 가능
document : 내장객체. html 문서가 실행 되면 자동생성객체
           문서객체
document.write : 화면에 내용 출력

 

📌

<!DOCTYPE html>
<!-- src/main/webapp/20220921/javascript1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   alert("Hello world");  //대화창(확인창)으로 내용 출력
   console.log("hello world") //개발자모드의 콘솔에 내용 출력
   //문자열 표시 : "",'' 모두 가능
   //문자열을 배열처럼 첨자로 선택 가능
   document.write("안녕하세요"[0]+"\\n<br>") //화면에 내용 출력
   document.write('안녕하세요'[1]+"\\n")
   document.write("안녕하세요"[2]+"\\n")
</script>
</head>
<body>

</body>
</html>

  • 변수 선언
변수 : 변하는 값을 저장하는 식별자.
let : 변수 선언을 위한 예약어(키워드)

 

📌

<!DOCTYPE html>
<!-- src/main/webapp/20220921/javascript2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>변수 선언</title>
<script type="text/javascript">
  let list = ''
  
  list += '<ul>'
  list += '<li>Hello</li>'
  list += '<li>JavaScript</li>'
  list += '</ul>'
  console.log(list)	  
  document.write(list)
  
  let num = 10;
  num++
  alert(num)

  num+=1
  alert(num)

  
</script>
</head>
<body>

</body>
</html>