최초의 브라우저: 모자이크
Netscape
- 네비게이터 브라우저
- 브랜든 아이크(Brendan Eich) 영입
- 10일만에 모카라는 언어로 네비게이터에 적용(인터프리터 사용)
모카 -> 라이브 스크립트 -> 자바스크립트
jQuery
- 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 하는 라이브러리
- jQuery 문법을 공부해야 하는 단점
V8 자바스크립트 엔진
- 2008년 구글에서 크롬의 베타 버전과 함께 v8엔진 소개
ECMA
스크립트를 표준화(ECMA International에 요청)
트렌스 컴파일러
- BABEL
- 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 하는 라이브러리
JavaScript: 바닐라 스크립트
react, vue, angular: SPA(Single Page Application)
node.js : 2009년 라이언 달이 발표한 자바스크립트 환경
typescript: JavaScriptdp type을 추가한 스크립트
자바스크립트
- 객체 기반의 스크립트 언어
- 대소문자를 구별
- 세미콜론 생략가능
자바스크립트의 출력
WEB API Console API 통해 브라우저 console 창에 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 출력</title>
<script>
console.log('안녕하세요. JavaScript 1');
</script>
<body>
</body>
</html>
1. HTML 문서에서 <script> 태그 안에 작성
2. .js(자바스크립트 파일)안에 작성
자바스크립트 실행순서
인터프리터 방식이므로 위에서 아래로 실행
HTML 시작 --> <head>에 있는 <script> 다운로드/실행 --> HTML 끝
이거는 헤드에 스크립트를 넣으면 html이 안보일 수 도 있다
-script 파일 다운로드가 늦을 경우 HTML이 실행되지 않은 상태에서 빈화면이 보일 수 있음
HTML 시작 --> <body> 끝에 있는 <script> 다운로드/실행 --> HTML 끝
-완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 보일 수 있음
HTML 시작 --> <head>에 있는 <script async> 다운로드/실행 --> HTML 끝
-HTML이 시작되고 script 파일을 동시에 다운로드/실행을 진행함
-script 파일이 여러개 있을경우 먼저 다운로드 script 먼저 실행하게 됨
HTML 시작 --> <head>에 있는 <script defer> 다운로드/실행 --> HTML 끝
-HTML이 시작되고 script 파일을 동시에 다운로드/실행을 진행함
-script 실행은 페이지 구성이 끝날때까지 지연
-script 순서에 따라 실행
**요즘에 가장 많이 사용되고 있다**
자바스크립트 출력.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 출력</title>
<script>
console.log('안녕하세요. JavaScript 1');
</script>
<body>
<script defer src="./2_자바스크립트출력.js"></script>
</body>
</html>2_자바스크립트출력.js
console.log('안녕하세요. JavaScript 2');크롬브라우저 콘솔로 결과확인
변수(Variable)
- 데이터를 저장할 수 있는 메모리 공간
- 값이 변경될 수 있음
- 자바스크립트의 변수는 타입이 없음
- let 키워드를 사용하여 변수를 선언
let 변수명;
let num;
✔ Var
- 유연한 변수방식
- 지역변수 전역변수와의 구별이 없음
- 같은 이름의 변수를 선언할 수 있음
console.log(num);
var num = 10;
{
console.log(num); // 전역변수 10
var str = '안녕'; // 지역변수 안녕
}
console.log(str); //안녕
var num = 30;
변수.js
var num;
num =10;
console.log(num);
str= '안녕';
console.log(str);
var str = '반가워';
console.log(str);
{
console.log(num);
var num2 = 20;
console.log(num2);
var num = 30;
}
console.log(num2);
console.log(num);
console.log('--------------');
let val = 10;
console.log(val);
{
console.log('전역변수'+val);
let val = 20;
console.log(val);
}
let v=0;
if(v==0){
let val =20;
console.log('sibal'+ val);
}
console.log(val2);
에러가 나는 이유는 ? TDZ(Temporal Dead Zone)
호이스팅 관련내용 참고
https://jwinjection.tistory.com/50
호이스팅, var, let
var과 let의 차이는 뭘까? console.log(a) var a = 1 console.log(a) 자바나 c, c++,등 다른 언어를 보면 알 수있듯 코드는 원래 top to bottom이라 1번라인에서 에러가나야 정상인데 자바스크립트는 에러없이 아래
jwinjection.tistory.com
상수(constant)
- 한번 선언된 상수는 다시 재정의 할 수 없음
- 값을 재할당 할 수 없음
- 변수보다는 상수를 쓰는것을 권장
const 상수명 = 값; (O)
const num = 10;
const 상수명;
상수명 = 10; (X)
✔ 자바스크립트에서 상수를 권장하는 이유
- 해킹을 방지하기 위해
- 개발자 실수를 방지하기 위해
상수.js
// const str;
// str = '김사과'; // x
const str = '김사과';
console.log(str);
// str = '반하나';
const obj ={id: 'apple', name:'김사과'};
// obj = 10 에러
obj.id = 'banana';
obj.name = '반하나';
console.log(obj.id);
console.log(obj.name);
자바스크립트의 데이터 타입
- 프로그램에서 다룰 수 있는 값의 종류
- 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생
- 자바스크립트의 타입 유연성을 해결하기 위해 타입 스크립트가 탄생
1. 숫자형(number)
- 정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현
//number형
const num1 = 10;
const num2 = 11.11;
const num3 = 10e6; /* 10의 */
console.log(num1);
console.log(num2);
console.log(num3);
console.log(typeof(num1));
console.log(typeof(num2));
console.log(typeof(num3));
2. 문자형(string)
- '' 또는 "" 또는 ``로 둘러싸인 문자의 집합
'입력한 숫자는 ' + num + ' 입니다'
이런식으로 적을때 핵불편
그래서 백쿼트로쓰면
`입력한 숫자는 ${num} 입니다`
// string 형
const num4 = 10;
const num5 = 5;
const str1 = 'Hello Javascript!';
const str2 = 'Hello World!';
const str3 = '10';
console.log(num4 + num5); //15
console.log(num4 + str1); //10Hello Javascript!
console.log(str1 + str2); //Hello Javascript!Hello World!
console.log(str1 + " " + str2); //Hello Javascript! Hello World!
console.log('자바스크립트에서는 문자열을 쌍따옴표 또는 따옴표로 둘러싸인 문자의 집합을 의미합니다');
console.log(`str: ${str1} , str: ${str2}`);
console.log(num4 + str3);
console.log(num4 - str3); //자동 형변환
console.log(num4 * str3); //자동 형변환
console.log(num4 / str3); //자동 형변환
console.log('------------------------')
3. 논리형(boolean)
- 참(true)과 거짓(false)으로 표현되는 값
- false, 0, '', "", null, unde4fined는 모두 거짓으로 판정함
- false로 판정된 값이 아닌 모든 값은 참으로 판정함
// 논리형
const b1 = true;
const b2 = false;
const b3 = (10>5);
const b4 = (10<3);
console.log(b1);
console.log(b2);
console.log(b3);
console.log(b4);
console.log('------------------------')
4.undefined, null
- undefined: 타입이 정해지지 않은 형을 의미(변수 선언 후 값이 정해지지 않은 경우)
let num;
console.log(a); // undefined
- null: null을 저장한 값. 값이 없는 것
let obj = null; // object타입으로 바뀜
//undefined, null
let num;
console.log(num);
console.log(typeof(num));
let obj1 ={};
console.log(obj1);
console.log(typeof(obj1));
let obj2 = null;
console.log(obj2);
console.log(typeof(obj2));
console.log('------------------------')
5.심볼형(symbol)
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key 로 사용
const sym1 = Symbol1{'Apple'};
const sym2 = Symbol1{'Apple'};
console.log(sym1 === sym2); // 형과 값이 같은지 비교
console.log(sym1==sysm2) //값이 같은지 비교
//심볼형
const sym1 = Symbol('apple');
const sym2 = Symbol('apple');
console.log(sym1);
console.log(sym2);
console.log(sym1 == sym2);
const sym3 = Symbol('banana');
const sym4 = sym3;
console.log(sym4 == sym3);
console.log('------------------------')
6.객체형(Object)
- 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
- key value pari 구조로 저장
let user = {'userid': 'apple', 'name':'김사과','age': 20}
-------- -------
ky value
const apple = {'name':'김사과','age':20, 'address': '서울 서초구 양재동'};
console.log(apple);
console.log(apple.name);
console.log(apple.age);
console.log(apple.address);
apple.age = 21;
console.log(`2022년 김사과의 나이는 ${apple.age}살 입니다`);
✔자바스크립트의 변수는 타입이 고정되어 있지 않으며 같은 변수에 다른 타입의 값을 대입할 수 있음
let a = {'userid': 'apple', 'name':'김사과','age': 20} //object
a = 10; //number
✔ 자동 타입 변환
- 특정 타입의 값이 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용
const a = "10";
const b = "20";
let result = a+b; // 1020
더하기만! 문자열 문자열 합친다 - / * 등등은 문자열이 숫자형태일때 수학연산함
result = a - b; // -10
result = a * b; // 200
...
const c = '삼십';
result = c - a; // NaN
✔ NaN(Not a Number)
- 정의되지 않은 값이나 표현할 수 없는 값' 이라는 의미
- 숫자로 변환할 수 없는 연산을 시도
// 자동 형변환
const a = 10 + '문자열';
console.log(a);
const b = '3' * '5';
console.log(b);
const c = 1-'문자열';
console.log(c);
console.log('----------------')
✔ 타입변환 함수
- 강제로 타입을 변환
const a = "10";
const b = "20";
let result = a+b; // 1020
result = Nuber(a) + Number(b); //30
Number(): 문자를 숫자로 변환
String(): 숫자나 불린등을 문자형으로 변환
Boolean(): 문자나 숫자등을 불린형으로 변환
Boolean('kim'); // true
Boolean(null); //false
Object(): 모든 자료형을 객체형으로 변환
let str = 'a';
result = Object(str); // {a}
자바랑 완전똑같진않음!
자바랑 달리 Integer.parseInt(문자열) 이렇게 안씀!
ParseInt(): 문자를 int형으로 변환 (정수만가지는 Number보다 작은 데이터형)
parseFloat(): 문자를 float형으로 변환(기본형인Number보다 작인 데이터형)
// 타입변환 함수
const num1 = '10';
const num2 = '5';
console.log(`현재 num1의 타입: ${typeof(num1)}`);
console.log(`num1 + num2 = ${num1 + num2}`);
console.log(`Number(num1) + Number(num2) = ${Number(num1) + Number(num2)}`);
console.log(`parseInt(num1) + parseInt(num2) = ${parseInt(num1) + parseInt(num2)}`);
console.log(`Boolean(num1): ${Boolean(num1)}`);
console.log(`Object(num1): ${Object(num1)}`);
'웹 개발 > 🌐 JavaScript' 카테고리의 다른 글
| JavaScript | 함수,오브젝트,클래스,상속,래퍼객체 (0) | 2022.11.09 |
|---|---|
| JavaScript | history,navigator,dom,node,정규표현식 (1) | 2022.11.08 |
| JavaScript | 화살표함수,객체,프로토타입,math,string,date,window,엘리먼트접근 (0) | 2022.11.07 |
| 호이스팅, var, let (0) | 2022.11.07 |
| JavaScript | 대화상자,제어문,반복문,배열,호이스팅 (0) | 2022.11.07 |
