Day1 JavaScript 변수 + 상수+ 데이터 타입 + 대화 상자
2023. 4. 5. 02:00ㆍJavascript
🟡자바스크립트 특징
1. 객체기반의 스크립트 언어
2. 대소문자를 구별
3. 문장끝에 세미콜론을 사용(생략 가능)
🟡자바스크립트 출력
- Web API Console을 통해 브라우저 Console창에 출력 (F12에 Console 창)
[사용법]
1. <script> ~ </script>
2. 외부 자바스크립트 사용 script src='파일명'></script>
🟡자바스크립트 실행 순서
- 인터프리터 방식이므로 위에서 아래로 실행
🟡Javascript 파일 및 문장을 <head> ~ </head> 사이에 잇을 경우
순서 :html 문서의 시작 -> <head>에 있는 <script>를 다운로드 / 실행 -> <body>에 있는 HTML을 실행 후 끝
결과: 외부 script 파일을 사용할 경우 script 파일 다운로드가 늦을때 HTML이 실행되지 않는 상태에서 빈 화면이 보일 수 있음
🟡Javascript 파일 및 문장을 <body> 끝에 넣을 경우
html 문서의 시작 -> <body> html 태그 실행 -> <script> 다운로드 실행 -> 끝
결과: 완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 보일수 있다.
🟡<script async>를 사용할 경우
html 문서의 시작 -> script 파일을 동시에 다운로드/실행 -? <body>에 있는 HTML 태그를 실행 -> 끝
-script 파일이 여러개 있을 경우 먼저 다운로드된 script 파일을 먼저 실행하게 된다.
-script 파일이 서로 연관성이 있을 경우 하나의 스크립트만 실행 후 문제가 발생 할 수 있다.
🟡<script defer>를 사용하는 경우
🔴script 파일이 되게 많아질 시 지향🔴
html 문서의 시작 -> script 파일을 동시에 다운로드/실행 -? <body>에 있는 HTML 태그를 실행 -> 끝
-HTML시작되고 script 파일을 동시에 다운로드/실행을 진행함
-script실행은 페이지 구성이 모두 끝날때 까지 지연
-script순서에 따라 실행
✔ CSS,JavaScript가 반영되지 않을 경우(캐시가 남아 있을 경우)
1.f12키를 누르고 새로고침 버튼을 누르고 있는 상태에서 강력새로고침을 선택
2. Ctrl+Shift+R
🟡 주석
//: 한줄 주석
/* ~~ */: 여러줄 주석
🟢변수
- 데이터를 저장할 수 있는 메모리 공간
- 값이 변경 될 수 있음
- 자바스크립트의 변수는 타입이 없음
- let 키워드를 사용하여 변수를 선언🔴
크게 2가지로 선언
1. var
- 유연한 변수 선언 방식
- 지역변수, 전역변수와의 구별이 없음
- 같은 이름의 변수를 선언할 수 있음
[예시] console.log(num); var num = 10; { console.log(num); // 전역변수 num = 10 var num = 20; // 지역변수 num = 20 } console.log(num) // 전역변수가 20으로 바껴있음
2. let
- 지역변수, 전역변수의 구별이 확실
- 같은 이름의 변수를 선언X
[예시]
let 변수명 = 값;
또는
let 변수명;
변수명 = 값;
🟢상수(constant)
- 한번 선언된 상수는 다시 재정의 할 수 없음
- 값을 재할당 할 수 없음
[사용법]
const 상수명 = 값;
🔴const 상수명; <---- 사용불가
상수명 = 값;
✔ 자바스크립트에서 상수를 권장하는 이유
- 해킹을 방지하기 위해
- 개발자 실수를 방지하기 위해
🟢 데이터타입(Data Type)
- 프로그램에서 다룰 수 있는 값의 종류
- 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음
- 자바스크립트의 타입 유연성을 해결하기위해 타입스크리트가 탄생
1. 숫자형(number)
- 정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현
2. 문자형(string)
- '' or "" or `` 로 둘러싸인 문자의 집합
num = 10;
'입력한 숫자는' + num + '입니다';
`입력한 숫자는 ${num} 입니다.`; <--- f스트링과 같은 기능
3. 논리형(boolean)
- 참과 거짓으로 표현되는 값
- false,0,'',"",null,undefined는 fasle로 판별
- false가 아닌 모든 값은 true로 판별
- 자바에선 모두 소문자
4.undefined, null
- underfined: 타입이 정해지지 않은 타입을 의미(변수 선언 후 값이 정해지지 않은 경우)
[예시]
let num;
console.log(num); // undefined
-null: null을 저장한 값(값이 없는 것)
let obj = null;
console.log(obj); // null
5.심볼형(symbol)
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key로 사용법
[사용법] const sym1 = Symbol('Apple'); const sym2 = Symbol('Apple'); console.log(sym1 == sym2); // 값이 같은지 비교를 하면 Fasle 왜? 주소 값이 같이 비교되는데 다르기때문 console.log(sym1 == sym2); //데이터 타입과 값이 같은지 비교
6. 객체형(object)
- 어떤 속성을 하나의 변수로 저장할 수 있게 해주는 집합
- key value pair 구조로 저장
[예시]
const user = {userid:'apple, name:'김사과',age:20}
--------------------------------------
key value
✔자바스크립트의 변수는 타입이 고정되어 있지 않으며 같은 변수에 다른 타입의 값을 대입 가능(파이썬과 같은 기능)
[예시]
let user = {userid:'apple', name:'김사과',age:20}
user ='김사과'
가능!
🟢 자동 타입 변환
- 특정 타입의 값이 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용
[예시] let num4 = 10; let str3 = '10'; console.log(num4+str3); //결과 1010 console.log(num4-str3); //결과 0 (숫자로 예상할 수 있는 값이 있다면 자동형변환) console.log(num4*str3); //결과 100 (자동 형 변환) console.log(num4/str3); //결과 1 (자동 형 변환)
- NaN(Not a Number)
- 정의 되지 않은 값이나 표현할 수 없는 값이라는 의미
- 숫자로 변환할 수 없는 연산을 시도
[예시]
const char ='삼십';
result = char - 10; // result의 값은 NaN
🟢 타입변환 함수
-강제로 타입을 변환할 수 있음
Number(): 문자나 숫자로 변환
String(): 숫자나 블린등을 문자형으로 변환
Boolean(): 문자나 숫자 등을 불린형으로 변환
Object() : 모든 자료형을 객체형으로 변환
parseInt(): 문자를 int형으로 변환
parseFloat(): 문자를 float형으로 변환
🟢 자바스크립트의 대화상자
Web API : 브라우저에서 제공하는 API(Application Programming Interface)
- 프로그램들과 기능들의 상호 통신 방법을 규정하고 도와주는 매개체
🔴 기본문법이 아니다 / 브라우저에서만 작동한다 !
alert(): 사용자에게 메세지를 보여주고 확인을 기다린다.
confirm(): 사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 boolen값으로 반환
prompt() : 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환
✔extension 설치
문법이나 자동완성을 도와주는 Javascript(es6) 설치
✔단축키 자동 완성 만들기
f1 -> snippets -> 코드 조각: 사용자 코드 조각 구성 -> 새 조각 만들기 ->global-snippets ->
{
"Console log":{
"prefix": "cl", <-- 무슨 단어를 치면 검색되게 할지
"body": "console.log($1)" <-- 실행시 어떤 문장이 나오게 할지 ($1는 cursor 위치)
}
}
✔ 트랜스 컴파일러 (trans - complier)
- 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 해석해주는 라이브러리
- BABEL을 설치하면 해결 가능
728x90
'Javascript' 카테고리의 다른 글
| Day3_VSCODE_JavaScript_ 함수 호출 및 함수 선언 기초 (0) | 2023.04.06 |
|---|---|
| Day2_VSCODE_JavaScript_자료구조 배열 (0) | 2023.04.05 |
| Day2_VSCODE_JavaScript_제어문(반복문_while문) (0) | 2023.04.05 |
| Day2_VSCODE_JavaScript_제어문(반복문_if문과 switch문) (0) | 2023.04.05 |
| Day2_VSCODE_JavaScript_연산자 (1) | 2023.04.05 |