Javascript 기본

자바 스크립트 기본 [async / defer] 적용 방식

01. JAVA Script 기본

- 자바스크립트 위치 (어디든 가능)
1. 내부: <script> . . . </script>
2. 외부: <script> 태그 사용
ex) <script src=“경로”></script>

- 주석 -
// : 한줄 주석
/**/ : 범위 주석

- js는 기본적으로 파일을 로드하고 실행해야 다음 코드를 실행한다.
로드를 실패하는 파일, 시간을 잡아먹는 js 구문이 있다면 다음 코드가 아예 동작하지 않고 멈춤 = 로드 지연 or 런타임 오류
대안으로 async 와 defer 가 있음

- async -
<script async src=“경로”></script>

장점 : 스크립트를 다운받는 시간이 별도로 없기때문에 상대적으로 기본 js 보다 로드가 빠름
단점: script가 다 받아지면 DOM 을 멈추고 스크립트 구문들을 실행하기 때문에 어차피 오래걸리는 스크립트가 있을 시 기본 로드와 비슷함

- defer -
<script defer src=“경로”></script>

외부파일이 여러개면 DOM 그려지는 동안 다 불러와져서 코드 순서대로 실행되기 때문에 빠르고, 코드 흐름을 쉽게 파악할 수 있다.
{ head 안에 명시하러면 defer 쓰는게 좋음 }
{ defer 안쓸거면 body 끝나기 직전에 넣으면 좋음 }

02. 출력

- 화면에 값을 나타내주는 것
* 1. alert() : 팝업처럼 경고창 띄움
2. Document.write() : body 영역에 띄움
** 3. Console.log() : 개발자도구(F12) 의 console 탭에 띄움

- 줄바꿈 -
<br> : document 에서만 동작 (body 영역에 그려지기 때문에 태그로 인식 가능)
\n : 프로그래밍 영역에서의 줄바꿈

03. 자료형

- 컴퓨터가 받아들일 수 있는 자료의 형태
1. 문자형 - String
쌍따옴표나 따옴표로 감싸져있는 자료
2. 숫자형 - Number
쌍따옴표나 따옴표로 감싸져있지 않으면서 숫자형태의 자료
3. Boolean형 - 참(true) / 거짓(false)
필요하면 알아서 true=1 , false=0 으로 변환되기도 함
——————————————————————————————————————
4. undefined : 정의되지 않았다는 뜻
5. Null : 존재하지 않는다는 뜻
6. Nan : Not a number ( 결과가 숫자가 아니라는 뜻 )

== 문자형 ==

Console.log(“<br>”) ;
Console.log(“가나다”) ;
Console.log(“100+100”) ;
Console.log(“100”+”100”) ;

- +의 의미 (2가지)
1. 사칙연산의 더하기
앞 뒤가 숫자형 또는 숫자형으로 변환 가능한 경우 ‘더하기’ 의 의미로 사용됨
2. ~ 다음에
앞이나 뒤가 숫자형으로 변환 불가능한 자료일 때 사용됨

== 숫자형 ==

console.log(100+100);

== boolean형 ==

console.log(true + 1); // 결과 2 {true가 1로 변환되기 때문)

- bool형 비교 (** 연산자로 비교 할땐 1:1 비교를 원칙으로 함)
비교연산 : <, >, <=, >=, ==
논리연산
&&(and) : 앞 뒤 다 true 일때만 결과 true
||(or) : 앞이나 뒤 하나라도 true면 결과 true

04. 자료형 변환

- 자료형의 우선순위
     문자 > 숫자 > boolean

01. 서로 다른 자료형 끼리의 결합
02. 내장함수
     - Number(자료) : 괄호 안에 있는 자료를 숫자형으로 바꿈 ( 쌍따옴표 벗겨내는 기능 )
                                  쌍따옴표를 벗겼을 때 숫자형태인 자료를 넣어줘야함
     - String(자료) : 괄호 안에 있는 자료를 문자형으로 바꿈( 쌍따옴표 넣어주는 기능 )

03. 2번을 간편하게 하는방법
     - “” 넣기 : 해당 라인 어디든 “” 추가하면 해당 라인의 결과는 무조건 문자형
     - +마크 : 해당 정보를 숫자형으로 변경

*** typeof *** : 자료형 확인해주는 명령어

04. 자료형 예제

console.log(typeof(“100”)); // 문자형(쌍따옴표로 감싸져있기 때문)
console.log(typeof(100)); // 숫자형
console.log(typeof(true)); // boolean형 (true,false)
console.log(typeof(a)); // undefined형 (숫자형도 아니고 문자형도 아닌 . . .)

=== 예제들 ===

console.log(100+100+”100”); // 200100
console.log(“100”+100+100); // 100200

=== 문장으로 표시할 때 ===
console.log(“홍길동님의 점수는 “+(80+80+90)+“ 점 이고 평균은 ”,((80+80+90)/3),” 점 입니다.“);
// 문장은 +로 연결해도 되고 ,로 연결해도 된다.

=== 문자형 숫자형으로 바꿀 때 ===
// + 를 ”“ 앞에 붙이면 문자형 전체가 숫자형으로 바뀜.

 

05. 변수

- 쌍따옴표로 감싸져있지 않으면서 숫자형태도 아닌것
   (선언) 가상의 공간에 박스를 만들어서 이름표를 붙인다.
   (로드) 이름을 써서 해당 박스에 있는 값을 불러온다.

- 기본적으로 변수는 자료형이 없다. (undefined 상태)
   안에 들어이는 자료의 형태를 따라간다.

01 . 변수 종류
- 지역변수 : 하나의 스코프(중괄호)로 감싸져있는 범위 내에서만 사용 가능
- 전역변수 : 변수가 선언된 이후 모든 영역에서 사용 가능

02. 변수 생성 규칙
- 키워드 변수명; ( 빈 박스 만들어놓기 )
- 키워드 변수명 = 초기값; ( 박스 만들면서 값까지 초기화 )
- 같은 이름으로 재 생성 금지

03. 키워드 - 가상의 공간(메모리)에 박스를 만듬
- var : 스코프와 상관없이 전역변수 처럼만 사용 가능 / 재사용 가능 / 같은 이름으로 재생성 가능하지만 하지 말것.
- let : 생성된 스코프가 끝날때 해당 변수 메모리에서 삭제 / 재사용 가능 / 같은 이름으로 재생성 안됨, 다른 스코프에서는 가능
- const : 상수 (기본 스코프 개념은 let과 동일) / 덮어쓰기 금지 (최초 생성 지정값이 죽을때까지 감)

+ ) 변수명의 첫번째 글자는 영문, $, _ 로만 가능
+ ) 변수명은 한번만 생성 (같은 변수명으로 새로 생성 금지)
+ ) 예약어 사용 금지 ex. Let this;
+ ) 공백 불가
      ex) let bit study (X)
            Let bit_study (O) <- 스네이크 케이스
            Let bitStudy (O) <- 카멜 케이스

+ ) 대소문자 구분
      ex) let tmp;
            Let Tmp;
            Let tMp;
            Let tmP;

06. 연산자

01. 사칙연산 : +, -, *, /, %
      % : 나머지, 반복되는 수 뽑아야 할때 주로 사용

console.log(0 % 3); // 0
console.log(1 % 3); // 1
console.log(2 % 3); // 2
console.log(3 % 3); // 0
console.log(4 % 3); // 1
console.log(5 % 3); // 2

02. 비교연산 : <, >, <=, >=
                   ==, ===, !=, !==
                   1:1 비교만 가능하다.
                   A == B : A와 B가 같다. (모양만 비교)
                   A === B : A와 B가 같다. (모양과 자료형 전부 비교)
                   (! 는 반대 결과)
                   A != B : A와 B는 같지않다.
                   A !== B : A와 B는 같지 않다 (모양과 자료형 전부)

console.log(10 == 10); // true
console.log(10 == “10”); // true
console.log(10 === “10”); // false

console.log(10 != 10); // false
console.log(10 != “10”); // false - 자료형까지 비교하지 않기때문에 false
console.log(10 !== “10”); // true

03. 논리연산: && (and)  : 앞 뒤 다 true 일때만 결과가 true
                       || (or) : 앞 뒤 둘중에 하나라도 true면 결과가 true
                       1:1 비교 해야한다.

- And 일때
  T && T > T
  T && F > F
  F && T > F
  F && F > F

- OR 일때
  T || T > T
  T || F > T
  F || T > T
  F || F > F

*** 함정 질문 ***
Console.log(30 > 20 > 10); 은 false 일까 true 일까? ——— 정답은 false

30 > 20 이 선 연산되어 true로 변환. 숫자형=1 이 되기 때문에 다음 연산은 1 > 10 이므로
결과는 false 가 된다.
true가 되게하려면 (30 > 20 && 20 > 10) 으로 연산을 나눠줘야 한다.

04. 복합대입연산자 : +=, -=, *=, -=, (%=)
       A = B : B를 A에 넣는다(대입한다.)
       A += B : A+B 를 먼저하고, A=결과 를 다음에 한다.

let num = 10;
num += 20; // num = num + 20 이랑 동일
console.log(num); // 30이 되겠죠? 10 + 20 = 30 이니?

num -= 20; // num = num - 20 이랑 동일
console.log(num); // -10이 될겁니다.

이해 잘 할수있도록..

05. 증감연산자 : ++ (더하기 1) , - - (빼기1)

     변수++ : 할 것 다 하고 마지막에 더하기 1
     ++변수 : 더하기 1 먼저 하고 할것 다 하기
     변수- - : 할 것 다 하고 마지막에 빼기 1
     - -변수 : 빼기 1 먼저 하고 할것 다 하기

let num = 10;
console.log(num++); // 11 이 됩니다. num + 1 과 같은거죠.
console.log(++num); // 똑같이 11입니다. 1 + num 이 되겠죠.

 

06. 입력받기

- 사용자에게서 값을 받는것 ( 사이트 사용자 or 방문자 )
    받는 값은 무조건 문자형으로 받아옴. ( 받는 자료형을 계산하려면 숫자형으로 변경할 필요가 있음. )
          prompt()
          prompt(“제목“)
          prompt(“제목”, “필드 내용”) - 필드내용은 input으로 쳤을때 value 처럼 물리적인 px를 가진다.

let name = prompt(“이름“, ”이름을 입력하시오“);
let kor = prompt(“국어”, “점수를 입력하시오”);
let math = prompt(“수학“, ”점수를 입력하시오“);

console.log(name+”님의 총점은 ”(+(kor) + +(math)) +”점 입니다.“)

// `` 를 사용하면 좀 더 편하게 문장형성 가능 - 자바스트립트에서만 가능
console.log(`${name} 님의 총점은 ${+kor + +math} 점 입니다.`)

07. escape_word

- 탈출문자 ( \ )
: \ 의 바로 다음 문자는 일반 텍스트로 출력한다.
\“ , \‘ - 일반 ” or ‘ 로 나옴.

\t , \r , \n - body 영역에서는 빈칸 한칸으로 표기 / 콘솔탭 같은 프로그래밍 영역에서는 별도의 뜻이 있음.
\t = tab 과 같은 빈칸
\r , \n = <br> 과 같음