728x90
반응형
✔ JAvaScript 들어가기 전
최초의 브라우저(인터넷상에서 웹에 연결시켜 주는 윈도 기반의 소프트웨어) : 모자이크
Netscape
- 네비게이터 브라우저
- 브랜드 아이크(Brendan Eich) 영입
- 10일만에 모카라는 언어로 네비게이커에 적용(인터프리터)
모카 -> 라이브 스크립트 -> 자바스크립트
java ---> compiler ---> object
JAvaScript ---> interpriter
jQuery
- 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 하는 라이브러리
- jQuery 문법을 공부해야 하는 단점
V8 자바스크립트 엔진
- 2008년 구글에서 크롬의 베타 버전과 함께 v8엔진 소개
ECMA
- 스크립트를 표준화(ECMA International에 요청)
트렌스 컴파일러
- BABEL
- 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 하는 라이브러리✔ JavaScript 라이브러리와 내용
바닐라 스크립트 - 동적인 작업을 할 수 있는
react :자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용
vue :Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크
angular : 앵귤러는 구글의 앵귤러 팀과 개인 및 기업 공동체에 의해 주도되는 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크이다. 앵귤러는 AngularJS를 개발한 동일 팀으로부터 완전히 다시 작성
SPA(Single Page Application) - 자바스크립트이다
node.js : 2009년 아이언 달이 발표한 자바스크립트 런타임 환경
typescript : JavaScript에는 따로 타입이 존재하지 않아 JavaScript에 type을 추가한 스크립트이다✔ 자바스크립트 특징
- 객체 기반의 스크립트 언어(컴파일 경우 인터프리터 방식 - 한줄한줄 읽는 방식 등)
- 대소문자를 구별
- 마지막 ;(세미콜론) 생략가능
자바스크립트의 출력
WEB API Console API 함수를 통해 브라우저 console 창에 출력
1. HTML 문서에서 <script> 태그 안에 작성
2. .js(자바스크립트 파일) 안에 작성
자바스크립트 실행 순서
인터프리터 방식이므로 위에서 아래로 실행
HTML 시작 -> <head>에 있는 <script> 다운로드/실행 -> 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 순서에 따라 실행
변수(Variable)
- 데이터를 저장할 수 있는 메모리 공간
- 값이 변경될 수 있음
- 자바스크립트의 변수는 타입이 없음
- let키워드를 사용하여 변수를 선언
let 변수명;
let num; (자바스크립트는 ;생략가능)
✔ 자바스크립트 출력
<!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')
// 자바의 system.out.println과 같은 출력문이다.
</script>
<!-- <script defer src="./2.자바스크립트출력.js"></script>
<script defer src ="./3_변수.js"></script> -->
<!-- <script defer src ="./4_상수.js"></script> -->
<!-- <script defer src ="./5_데이터타입.js"></script> -->
<script defer src ="./6_타입변환.js"></script>
</head>
<body>
</body>
</html>
✔ var
- 유연한 변수방식
- 지역변수 전역변수와의 구별이 없음
- 같은 이름의 변수를 선언할 수 있음
- 밑에 있는 부분이 있기 떄문에 let을 대신하여 많이 사용한다.
console.log(num); // 언디파인으로 에로는 나지 않음
var num = 10; // 이때는 10
{
console.log(num); // 전역변수 10
var str ='안녕' // 지역변수 안녕
}
console.log(str) // 안녕 -> 자바스크립트는 지역변수도 사용이 가능
var num = 30; //이도 사용이 가능하다.
상수(constant) - 자바스크립트는 변수보다는 상수를 사용하는것을 권장하고 있음
- 한번 선언된 상수는 다시 재정의 할 수 없음
- 값을 재할당 할 수 없음
const 상수명 = 값;
const num = 10;
const 상수명;
상수명 = 10; (X)✔ 변수
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(num);
}
console.log(num2);
console.log(num);
console.log('---------------');
let val = 10;
console.log(val)
// let val =20;
{
console.log(val);
let val2 =20;
console.log(val2)
// let val =30;
}
// console.log(val2)
✔ 상수
// const str;
// str = '김사과'; (X)
const str = '김사과'; // "" , '' 혼용사용 가능
console.log(str);
// str ='바나나'; 중복 사용X
const obj = {id: 'apple', name: 'banana'}; // 객체 생성
// obj = 10;
// 참조변수를 바꾸지 못하는 것이지 해당 필드를 바꾸지 못하는것은 아니다!!!!
obj.id ="cherry";
obj.name ="apple";
console.log(obj.id);
console.log(obj.name);
✔ 자바스크립트에서 상수를 권장하는 이유
- 해킹을 방지하기 위해
// 재정의 재할당이 불가능하기 때문에 해킹 방지에 도움을 준다
- 개발자 실수를 방지하기 위해
// var와 같은 변수를 사용하거나 집어넣는 경우 기존 데이터의 문제때문
// 기존 데이터 덮어쓰기 문제를 예방하기 위해!!✔ 자바스크립트의 데이터 타입
- 프로그램에서 다룰 수 있는 값의 종류
- 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생
- 자바스크립트의 타입 유연성을 해결하기 위해 타입 스크립트가 탄생
1. 숫자형(number)
- 정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현
2. 문자형(string)
- '' 또는 "" 또는 `` 로 둘러싸인 문자의 집합
'입력한 숫자는 ' + num + '입니다.'
= `입력한 숫자는 ${num} 입니다.`
3. .논리형(boolean)
- 참(true)과 거짓(false)으로 표현되는 값
- false, 0, '', "", null, undefined는 모두 거짓으로 판정함
- false로 판정된 값이 아닌 모든 값은 참으로 판정함
4. undefined, null
- undefined : 타입이 정해지지 않은 형을 의미(변수 선언 후 값이 정해지짖 않은 경우)
let num;
consol.log(a) // undefined
- null : null을 저장한 값. 값이 없는 것
let obj = null; // object형(객체)
5. 심볼형(symbol)
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key로 사용
const sym1 = Symbol('Apple');
const sym2 = Symbol('Apple');
consol.log(sym1 === sym2); // 형과 값이 같은지 비교
consol.log(sym1 === sym2);//값이 같은지 비교
6. 객체형(object)
- 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
- key value pair 구조로 저장
let user = {'userid' : 'apple','name':'김사과','age':20}
------- ------
key value
✔ 데이터타입
// number 형
const num1 =10;
const num2 =11.11;
const num3 =10e6;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(typeof num1);
console.log(typeof(num2));
console.log(typeof(num3));
//문자형
const num4 = 10;
const num5 = 5;
const str1 = 'Hello JavaScript';
const str2 = 'Hello Word';
const str3 = '10';
console.log(num4 + num5); //15
console.log(num4 + str1);// 숫자 문자가 더해지면 문자형으로 10Hello JavaScript
console.log(str1 +" "+ str2);
console.log(`자바스크립트에서는 문자열을
쌍따옴표 또는 따옴표로 둘러싸인
문자의 집합을 의미합니다`);
console.log(`str1 :${str1}, str2:${str2}`);
console.log(num4+str3); // 1010
console.log(num4*str3); // 덧셈 + 을 제외한고는 자동형변환
console.log(num4-str3);
console.log(num4/str3);
//논리형
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)
// undefined, null
let num;// 데이터가 없어서 형이나 아무것도 확인을 못함
console.log(num);// undefined
console.log(typeof(num));// undefined
let obj1 ={};//실체가 있지만 내용은 없음
console.log(obj1); // 자료가 없는 객체 {}
console.log(typeof(obj1)); //object
let obj2 = null;// 실체자체가 없음
console.log(obj2); //null
console.log(typeof(obj2)); //object
// symbol
const symbol1 = Symbol('apple');
const symbol2 = Symbol('apple');
console.log(symbol1);
console.log(symbol2);
console.log(symbol1 == symbol2);
// 내부적으로 아이덴티티한 값이 있어서 false
const symbol3 = Symbol('banana');
const symbol4 = symbol3;
console.log(symbol4 == symbol3);
//객체형
const apple = {'name':'김사과','age':20,'address':'서초구'}
console.log(apple); // {'name':'김사과','age':20,'address':'서초구'}
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";
const b = "20"
let result = a+ b; //1020
result = Number(a) + Number(b); //30
Number() : 문자를 숫자로 변환
String() : 숫자를 불린등을 문자형으로 변환
Boolean() : 문자나 숫자등을 불린형으로 변환
Boolean('Kim'); // true
Boolean(null); // false
Object() : 모든 자료형을 객체형으로 변환
let str ='a';
result = Object(str); // {a}
ParseInt() : 문자를 int형으로 변환 -> number보다 작은 정수형
ParseFloat() : 문자를 float형으로 변환
✔ 타입변환
// 자동형변환
const a= 10 + ' 문자열';
console.log(a);//10문자열
const b ='3'*'5';
console.log(b);//15
const c= 1- '문자열';
console.log(c);//NAN
//타입변환 함수
const num1 = '10';
const num2 ='5';
console.log(`현재 num1의 타입 : ${typeof(num1)} `);
console.log(`num2 + num1 = ${num2 + num1} `);
console.log(`Number(num2) + Number(num1) = ${Number(num2) + Number(num1)} `);
console.log(`parseInt(num2) + parseInt(num1) = ${parseInt(num2) + parseInt(num1)} `);
console.log(`Boolean(num1): ${Boolean(num1)}`)
console.log(`Object(num1): ${Object(num1)}`)
반응형
'JavaScript' 카테고리의 다른 글
| JavaScript(history, navigator, node, 문서객체모델/노드) (0) | 2022.11.09 |
|---|---|
| JavaScript(date, window, setTimeout, setInterval, 시계만들기, location, form) (0) | 2022.11.07 |
| JavaScript(화살표 함수, 객체, 프로토타입, Math/String함수) (0) | 2022.11.07 |
| JavaScript(배열, 사용자정의함수, 호이스팅, 주민등록번호 문제) (0) | 2022.11.04 |
| JavaScript (대화상자, 연산자, 제어문, 반복문) (0) | 2022.11.04 |