Javascript : 기초, 변수, 자료형, 다양한 연산자

소현·2025년 1월 20일

자바스크립트 연결하기

> 외부 자바스크립트 연결
defer : 자바스크립트를 가장 마지막에 읽어오는 속성. 헤드 안에 넣을 때 주로 사용.

<script src="./js/jabascript.js"></script>

> 내부에 작성
<body>
 <script>
  document.write("hello");

  1 + 1; //연산식은 식이다
  ("안녕"); //문자열도 식이다
  5; //숫자도 식이다
 </script>
</body>

브라우저 렌더링 과정

도메인 주소를 브라우저에 요청할 때 해당 html과 css, js를 불러오는 과정.

1. html 파일을 파싱
  웹 브라우저에서 html 파일을 읽어오고 구조를 해석하는 과정.
  브러우저가 html 문서를 파싱하면 dom(document object model)트리를 만든다.
  dom은 웹페이지의 구조를 표현하는 트리 구조로 각 요소는 노드로 표현된다.

2. css 파일을 파싱
  css 파일을 파싱해 cssom(css object model)트리를 만든다.
  cssom은 스타일 규칙을 표현하며 각 스타일 규칠을 노드로 표현한다.

3. dom과 cssom을 결합
  render tree를 생성
  render tree는 화면에 표시되는 요소들만 구성된 트리 구조로
  화면에 어떻게 배치될지 결정하는 정보를 갖고있다.

4. 레이아웃
  render tree를 기반으로 각 요소 크기와 위치 계산해 레이아웃을 수행한다.
  각 요소의 크기 위치 여백 색상 등 계산됨. 레이아웃은 화면에 보여지는 모습을 그려주는 과정.

5. 페인팅
  레이아웃 완성되면 브라우저가 화면에 표시.

자바스크립트 입력 시 주의

1. 대소문자 구분해 작성
  document.write() 맞음
  Document.Write() 틀림

2. 코드 한줄 다음에는 세미콜론으로 마무리

3. 문자형 데이터는 따옴표로 문자를 감싼다. 따옴표 겹침 오류 주의.
  document.write('hello "new" word'); 맞음
  document.write('hello \'new'\ word'); 맞음
  document.write("hello "new" word"); 틀림

자바스크립트 주석 기호

1. // 한줄 주석. 두줄부터는 오류남.
2. /**/ 여러줄 주석.

자바스크립트의 식과 문

식은 연산이나 숫자값, 함수 실행 등 값을 만들어냄.
문은 명령. 세미콜론 붙여 구분.

브라우저 콘솔창 활용하기

개발자도구 안의 콘솔이라는 메뉴가 있다. 자바스크립트가 동작을 잘 수행하고 있는지 실험.
명령을 내리려면 console.log(실험값) 입력

바디 영역에 출력해서 보고 싶을 때 사용

  document.write()

변수

변하는 값 저장. 데이터를 담는 그릇. 변수에는 하나의 데이터만 저장.
새로운 데이터가 들어오면 기존 데이터는 사라짐.

변수 선언

var, let, const 키워드를 변수 앞에 붙인다.
변수명에는 영문 숫자 _ $ 만 포함 가능.
의미에 맞게 지으며 단어 단어 조합이라면 두번째 단어 첫글자는 대문자로 쓴다.
ex)
var 변수명 = 값;
변수에 초기값 넣어 초기화한 상태
var 변수명;
변수를 만들어둔 상태

<script>
  var num = 3;
  num = 10;
  num = "3";

  console.log(num); //변수 num의 값을 콘솔창에 출력한다
</script>

변수에 저장할 수 있는 자료형

문자형 숫자형 논리형 빈데이터

문자형 데이터
문자나 숫자를 따옴표로 감싼 것
html태그를 문자형 데이터에 넣으면 태그로 인식한다.

[기본형]
var 변수 = '사용할 숫자 문자 태그';

숫자형 데이터
숫자에 따옴표로 감싸져 있다면 문자이다.
Number("100")을 이용하면 문자형을 숫자형으로 바꾼다.

[기본형]
var 변수명 = 숫자;
var 변수명 = Number('문자형 숫자'); 문자를 숫자로 취급

논리형 데이터(Boolean)
참, 거짓으로 값을 출력하는 데이터. 주로 2개를 비교할 때 사용.
"100보다 10이 크다"는 거짓이므로 false 출력.
Boolean()메서드에 데이터 입력하면 무조건 논리형 데이터인 true or false 출력.
()안에 0과 null, undefined, ""빈문자, false를 제외한 모든 데이터에 대해 true 출력.
Boolean("김땡땡") 입력하면 true 출력

[기본형]
var 변수 = true or false;
var 변수 = Boolean(데이터);

null & undefined 데이터

undefined 변수에 값 할당되기 전의 기본값
var num;처럼 변수명만 선언된 상태에서는 undefined 저장되어있음.

null은 변수에 저장된 데이터를 비울 때 사용

[기본형]
var 변수명; //undefined
var 변수명 = null;

typeof

지정한 데이터 또는 변수에 저장된 자료형을 알아낼 때 사용.

[기본형]
typeof 변수명 또는 데이터;

변수 선언 시 주의사항 (코딩 컨벤션)

변수명의 첫 글자 _, $, 영문자만 가능
변수명 첫 글자 다음은 영문 숫자 _ $ 가능
예약어(자바스크립트에서 코드로 사용중인 이름) 사용불가 (number, document...)
의미에 맞게 지음
대소문자 구분함

 <script>

  //문자형 데이터
  var str1 = "javascript"; //변수 str1을 javascritp로 초기화
  var num1 = 100; //변수 num에 문자형 숫자 100으로 초기화
  var tag = "<h1>제목태그</h1>";

  document.write(str1, "<br/>"); //변수 str1 값 화면에 출력
  document.write(num1, "<br/>"); //변수 num1 값 화면에 출력
  document.write(tag);

  //숫자형 데이터
  var num2 = 100;
  var str2 = Number("100"); //문자형 100을 숫자로 바꿈

  document.write(num2 + 100, "<br/>");
  document.write(str2 + 100, "<br/>");

  //논리형 데이터
  var a = true; // true
  var b = false; //false
  var c = 10 > 5; //숫자끼리 비교 true
  var d = Boolean(null); //false

  document.write(a, "<br/>");
  document.write(b, "<br/>");
  document.write(c, "<br/>");
  document.write(d, "<br/>");

  //undefined & null 데이터
  var data1; //초기값 없으므로 undefined 할당
  var data2 = 100; //초기값 100

  data2 = null; //기존 데이터를 비움
  document.write(data1, "<br />"); //undefined
  document.write(data2, "<br />"); //null

  //typeof
  var num3 = 100;
  var num4 = "100";
  var bool = true;

  document.write(typeof num3, "<br />");
  document.write(typeof num4, "<br />");
</script>

연산자

무언가 연산해 값을 내는 계산식. 사칙연산과 같음.
연산자 종류로는 산술, 대입, 복합대입, 문자결합, 증감, 비교, 논리, 삼항조건이 있다.

산술연산자

더하기+ 빼기- 곱하기* 나누기/ 나머지%
연산할 데이터가 두개 이상 있어야 함
자바스크립트 연산은 숫자끼리 하지 않고 변수끼리 한다.

[기본형]
변수a + 변수b
변수a % 변수b a와 b 나눴을 때 나머지 값

 <script>
  var num1 = 15;
  var num2 = 2;
  var result; // 연산 결과를 담을 변수

  result = num1 + num2; //17
  document.write(result, "<br/>");

  result = num1 - num2; //13
  document.write(result, "<br/>");

  result = num1 * num2; //30
  document.write(result, "<br/>");

  result = num1 / num2; //7.5
  document.write(result, "<br/>");

  result = num1 % num2; //1
  document.write(result, "<br/>");
</script>

문자결합연산자

문자데이터와 문자데이터 결합한 것. 즉 피연산자가 문자형 데이터.
피연산자 중 문자형이 하나라도 있으면 모든 피연산자 데이터는 하나의 문자형으로 변환되어 반환된다.

[기본형]
1. 문자형 + 문자형
var 변수1 = '문자1';
var 변수2 = '문자2';
변수1 + 변수2 = "문자1문자2";

문자형 + 숫자형
var 변수1 = '문자1';
var 변수2 = 숫자;
변수1 + 변수2 = "문자1숫자"; 하나의 문자형 데이터로 변환

<script>
  var str1 = "학교종이 ";
  var str2 = "땡땡땡 ";
  var str3 = 1234;
  var str4 = " 어서 모이자";
  var result;

  result = str1 + str2 + str3 + str4; //학교종이 땡땡땡 1234 어서 모이자
  console.log(result);

  result = str3 + str3 + str1 + str2; //2468학교종이 땡땡땡
  //     (1234 + 1234) + 학교종이 + 땡땡땡
  console.log(result);

  result = str1 + str2 + str3 + str3; //학교종이 땡땡땡 12341234
  console.log(result);
</script>

복합대입연산자

대입연산자 - 연산된 데이터를 변수에 저장할 때 사용
복합대입연산자 - 산술연산자와 대입연산자가 복합 적용

<script>
  var num1 = 10;
  var num2 = 3;

  num1 += num2; // num1 = num1 + num2 로 num1의 값이 13으로 바뀌게 된다
  document.write(num1, "<br/>");

  num1 -= num2; // 13으로 바뀐 num1에서 num2를 빼므로 num1 값은 10이 된다
  document.write(num1, "<br/>");

  num1 *= num2; // 10 * 3 = 30
  document.write(num1, "<br/>");

  num1 %= num2; // 30 나누기 3의 나머지는 0
  document.write(num1, "<br/>");

  document.write("<br/>");
</script>

증감연산자

숫자형 데이터를 1씩 증가시키는 증가연산자 ++
1씩 감소시키는 감소연산자 --
연산자와 달리 피연산자 1개만 필요하다.
변수의 어느 위치에 기호가 붙는지에 따라 연산방식 달라짐

[기본형]
1. 전위 연산
--변수
++변수
변수값 1씩 증감

2.후위 연산
변수--;
변수++;
변수값 1씩 증감

[연산 방식]
전위연산
var B = 3;
var A = ++B;
: 변수 B 값을 1 증가시킨 값에 A를 대입

후위연산
var B = 3;
var A = B++;
: 변수 B 값을 A에 대입시킨 후 B 값을 1 증가

 <script>
  var num1 = 10;
  var num2 = 20;
  var result;

  num1--;
  document.write(num1, "<br/>"); // 10 - 1 = 9

  num1++;
  document.write(num1, "<br/>"); // 9 + 1 = 10

  result = num2++; // result에는 num2값인 20 대입되고 num2는 1증가해 21이 됨
  document.write(result, "<br/>"); // result = 20        num2 = 21

  result = ++num2; // 21인 num2가 1 증가해 22가 되고 그 값이 result에 저장되어 둘 다 22가 됨
  document.write(result, "<br/>"); // result = num2 = 22
</script>

비교연산자

두 데이터를 크다 작다 같다와 같이 비교.
결과값은 true or false로 논리형 데이터 반환.

<script>
  var a = 10,
    b = "10",
    result1;

  //약한비교
  result1 = a == b; // 10 == "10"   true
  document.write(result1, "</br>");

  result1 = a != b; // 10 == "10"   false
  document.write(result1, "</br>");

  //강한비교
  result1 = a === b; // 10 === "10"   false
  document.write(result1, "</br>");

  result1 = a !== b; // 10 === "10"   true
  document.write(result1, "</br>");

  // 비교 연산자 실습
  var c = 10;
  var d = 20;
  var e = 10;
  var f = "20";
  var result2;

  result2 = c > d; //false
  document.write(result2, "</br>");

  result2 = c < d; //true
  document.write(result2, "</br>");

  result2 = c <= d; //true
  document.write(result2, "</br>");

  result2 = d == f; // 20 == "20"   true
  document.write(result2, "</br>");

  result2 = d !== f; // 20 == "20"   true
  document.write(result2, "</br>");
</script>

논리 연산자

||(or), &&(and), !(not)연산자가 있다.
true or false로 반환함

|| : or연산자. 피연산자 중 하나만 트루여도 트루 반환
&& : and 연산자. 피연산자 모두 트루여야 트루 도출
! : not 연산자. 논리부정연산자로 true면 false 반환 false면 true 반환. 결과값 뒤집을 때 사용.

연산자 우선순위 ★
여러 연산자가 식에 있을 때 먼저 계산되는 순서.
1. ()
2. 단항연산자(++, --, !)
3. 산술연산자(+ - / %)
4. 비교연산자(<, >, >=, <=, ==, !=, ===, !==)
5. 논리연산자(|| &&)
6. 대입연산자 (=, +=, -=, =, /=, %=)

 <script>
  var a = 10;
  var b = 20;
  var c = 30;
  var d = 40;
  var result;

  result = a > b || b > c || c > d;
  //       false    false    false
  document.write(result, "</br>"); // false

  result = a > b || b >= c || c <= d;
  //       false    false     true
  document.write(result, "</br>"); // true

  result = a <= b && b >= c && c <= d;
  //       true      false     true
  document.write(result, "</br>"); // false

  result = a <= b && b <= c && c <= d;
  //       true      true      true
  document.write(result, "</br>"); // true

  result = !(a > b);
  document.write(result, "</br>"); // a > b false 이므로 결과값 true 도출
</script>

삼항조건연산자

조건식(true or false로 나오는) 결과에 따라 실행 결과가 달라지며 피연산자 3개 필요.

[기본형]
조건식 ? 자바스크립트코드1 : 자바스크립트코드2;
: 조건식이 true면 코드1 실행 false면 코드2 실행

적정 체중 구하기 실습

<script>
  //사용자로부터 키와 몸무게를 응답받는 유연한 코드
  var userName = prompt("당신의 이름은?");
  userHeight = prompt("당신의 키는?");
  userWeight = prompt("당신의 체중은?");

  document.write(userName + "님의 체중 : ", userWeight, "</br>");

  //평균체중
  var normal_weight = (userHeight - 100) * 0.9;
  result =
    userWeight > normal_weight
      ? userName + "님은 적정체중을 초과했습니다."
      : userName + "님은 적정체중입니다.";

  document.write(userName + "님의 적정 체중 : ", normal_weight, "</br>");
  document.write(result);
</script>