실습 방법: 구글 브라우저 들어가서 오른쪽 마우스, 검색(F12), 콘솔들어가기
enter : 실행
SHIFT + 엔터 : 줄 개행(다음줄로 이동)
위쪽 방향키 : 입력했던 코드 보기
ctrl +R, F5 : 코드 다 없어짐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>
자바스크립트 → 자바보다 이걸 더 잘하면 회사에서 사랑받음 워낙 다 써서 HTML - 뼈대 CSS - 스타일 JS - 기능
해석 엔진
<style>
…
</style>
-렌더링 엔진 : Webkit/bink : 스타일 해석
-자바 스크립트 엔진 :V8
- 실습방법 안내
- 브라우저 - 콘솔
- 렌더링 엔진 + 자바스크립트 해석 엔진(V8)
- 콘솔에서 alert("알림!"); 엔터 하면 창이 뜬다.
- SHIFT + 엔터 -> 줄 개행(다음줄로 이동)
- 위쪽 방향키 누르면 입력했던 코드 볼 수 있음
자바스크립트 기초 문법
- 자바스크립트 사용하는 방법
- script 태그 안에 정의하는 방식스크립트 코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> alert("알림!") </script> </body> </html> - </script>
- <script>
→ script.js에서 알림!을 가져와서 실행 결과는 알림! 이라고 창이 뜬다.알림! 창 뜨고 확인 누르면 클릭 버튼 나오고 클릭 창이 뜬다.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="script.js"></script> </head> <body> </body> </html> - script 태그 안에 정의하는 방식스크립트 코드
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="script.js"></script> </head> <body> <button onclick="alert('클릭');">클릭!</button> </body> </html>
- 실습) script.js 파일을 만들고 alert("알림!") 쓰고 저장, html 파일에 밑에 코드 적기
- <script src=”스크립트 파일 경로”></script>
- 예) onclick=”클릭시 동작하는 스크립트 코드”
- b. HTML 태그의 이벤트 처리기 속성
- 자바스크립트 주석 처리
- 자바스크립트 엔진이 해석 X
- 설명
- 해석을 하지 않으므로 실행 배제 가능
- b. 실행 배제
- **/
- /**
- 여러줄 설명…
- /*
- 자바스크립트 엔진이 해석 X
- 변수
- 정의 공간의 이름 (공간=메모리) 변하는 수
- 숫자, 문자, 논리값 …
- 변수선언 var 변수명;var 변수명 = 값; // 선언과 동시에 초기화=선언과 동시에 대입(저장)= → 대입 ; -> 문장의 끝console.log(값); 말고 값; 만 해도 값 출력 가능 → console.log(a); = a;
- CTRL + R / F5 : 새로고침
- console.log(값); -> 값의 출력 기능
- 참고)
- 변수명 = 값; (저장) / 최초로 값을 저장(값을 오른쪽 변수에 저장) -> 초기화
- 선언자 종류 var, let, const
- 변수 중복 선언시 기존 값이 변경
- 알파벳(대소문자), 숫자, 특수문자(_, $)
- 한글도 사용 가능 - 권장 X
- 숫자는 변수명 앞에 올 수 없다.
- 예약어는 쓸 수 없다. (return, if, for .... throw ...)
- 변수명은 의미있는 단어 작성
- number Of Order
- 단어의 첫문자는 대문자, 다만 시작 단어는 소문자
- 변수명을 짖는 관례 (함수명 적용) var numberOfOrder : 카멜 표기법 → 낙타의 혹처럼 생겨서 카멜…
- (1) - var num1 (2) - var 1st
(3) - var _abc (4) - var $dollar; - 참고) 상수 : 변경이 불가한 수 → 다 대문자로 쓴다.
- e. 변수 선언 생략
- d. 선언 방법 변수가 여러개 있는 경우 변수 선언자 변수명, 변수명, 변수명;
- → 버전이 계속 업그레이드 된다.
- ECMASScript6
h. 변수에 저장할 수 있는 자료형 자료형 : 값의 형태, 형식
참고) typeof : 자료형을 체크해 보는 연산자
ex) typeof a ;
- 문자형(string) : **"**또는 **'**로 값을 감싸면 문자형 → 보통 **‘**를 많이 쓴다. var str = 'ABC'; var str = "ABC";
- 숫자형(number)
- 정수(소수점이 없는 수 - 양수(1,10), 음수(-1, -10), 0)
- 실수(소수점이 있는 수 - 3.123, 0.0)
- 논리형(boolean)
- 참, 거짓
- true (참)
- false (거짓)
- 제어문, 반복문에서 자주 활용
- null : 값이 없는 상태(값)
- undefined : 값이 정해지지 않은 상태 - 변수를 선언만 한 경우→ 변수 선언만 하고 값을 넣지 않았을 때 나온다. = 값을 대입하지 않은 상태 빈 상태…. 초기화하지 않은 상태var a; <undefined
- 예시)
실습)
var a= ‘A’; typeof a; → 'string' : 알아서 문자형으로 인식한다.
var a ='ABC'; var b ='DEF'; a+b → 'ABCDEF' : 문자도 더해준다.
var a = '10'; typeof a; → 'string' : 따옴표 있으면 문자라는 것!!
var a = true; typeof a; → 'boolean' : a에 true나 false를 넣으면 변수는 논리형이다.
var a =null; typeof a; → 'object'
- 연산자
- 항 : 연산에 사용되는 값 연산에 사용되는 값의 갯수 1 : 단항 연산 2 : 이항 연산 3 : 삼항 연산
- 연산자 : 연산에 사용되는 기호
- 더하기(+), 빼기(-), 곱하기(*), 나누기( / ), 나머지(%)
- 나머지(%) : 균등 배분(나머지가 나누는 수보다 작은 수가 반복해서 나온다)
- 6%3=0 → 6을 3으로 나눈 나머지는 0이다!
- 문자형 + 연산자 : 수치 연산 X, 문자를 결합 var str1 = "abc"; var str2 = str1 + "def";
- 문자 + 숫자 -> 문자 var num1 = '100'; var num2 = num1 + 100; // 100100
- ⇒ 문자+문자 or 다른 자료형 → 문자 결합
- *, /, %의 연산의 우선 순위가 +, -보다 크다
- (....) : 연산자의 우선순위 강제 적용{중괄호}→ 소괄호가 가 제일 세다 제일 우선순위임!!
- (소괄호)
- [대괄호]
- =
- 오른쪽에 있는 값을 왼쪽 변수에 저장(대입=저장)
- var num = 10;
- 연산의 우선순위가 가장 낮은 연산자
- 단항 연산**(++,--)**
- 1씩 증가, 1씩 감소
- ++
num++; // num = num + 1; ++num; // num = num + 1;중요!!!) 뒤나 앞에 쓰는 거 둘 다 되긴 되는데 차이가 있다. 대입해보면 알 수 있다.var num = 10; var num2=num++; num; → 11 num2; → 10 : ++연산 되기 전에 num을 num2에 먼저 대입해서 저장한다.var num = 10; var num2=++num; num; → 11 num2; → 11 : ++연산 하고 num을 num2에 대입한다.3) 다항연산일 때- 복합 대입 연산자 산술 연산 + 대입 (+, -, *, /, %) + =
- num = num + 2; // num += 2; num = num * 2; // num *= 2;
- 부호 연산자 (+, -)
- : 부호 반전 (음수 -> 양수, 양수 -> 음수) (* - 1)
- num *=-1 → -num
- 비교 연산자 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=) 같다(==) 같지않다(!=, !==)
- 연산의 결과가 논리값(boolean : 참(true), 거짓(false)) -> 판별식에서 주로 사용(조건식, 반복문)
- ! → 부정 연산(NOT) : 참 → 거짓, 거짓 → 참
- != 동등 / !== 동일
- var num1=10; var num2='10'; typeof num1; → 'number' → 데이터 타입은 typeof num2; → 'string' num1 == num2; → 동등성 비교(가치 비교) → true num1 === num2; → 동일성 비교(주소(메모리) 비교) → false
- → 100원짜리 동전 두개는 다른 물건(동일하지 않지만)이지만 동등한 가치를 가지고 있다.
- 논리 연산자 AND 연산 : 교집합과 비슷 : 전부 true일 때 → true
- &&OR 연산 : 합집합과 비슷 : 어느 하나라도 true일 때 → true
- || true || true -> true true || false -> true false || true -> true
- 0, '', undefined, null ——> java와는 다른 점이다!!! java는 and, or, not 연산으로만 논리 연산한다.**
- false 인식하는 값 이외의 값**
- 논리 연산의 값 : 최종 연산의 값
- var result = 0; undefined if (result) { console.log("참"); } else { console.log("거짓"); } → 거짓
- 연산자의 우선순위 비교 연산 > 논리 연산
- true && true -> true
- 삼항 조건 연산자
- || →? 졸았다ㅎㅎ……… 강의 다시 보기
- var result = 0; undefined if (result) { console.log("참"); } else { console.log("거짓"); } → 거짓
- → 아주 똑똑함, 목표를 이루면 뒤에는 안함
- = (대입 연산자) < 논리 < 비교 < (...)
- 참고) 조건식 : 참 거짓을 판별하는 판별 식 (주로 비교, 논리 연산...)
- var num = 10; var num2=5+ ++num; → 5보다 ++num를 먼저 해야됨! num2; → 16
- ⇒ 뒤에 있으면 연산이 나중으로 밀리고, 앞에 있으면 연산이 먼저 와야한다!!!
- 2) ++이 앞에 있을 때
- 1) ++이 뒤에 있을 때
- num--; // num = num - 1; --num; // num = num - 1;
- var result =10+2*3; → *연산자 우선순위⇒ →+→= result 16
- a) 산술 연산자 → 국비 자바 중간 시험에 나온다!!
'Languages > JavaScript' 카테고리의 다른 글
| 4. 배열 (0) | 2024.04.06 |
|---|---|
| 3. 내장객체 (0) | 2024.04.01 |
| 2-1. 객체 리터럴, 함수, 메서드, 생성자 (0) | 2024.03.30 |
| 1-2. 제어문, 조건문, 반복문(javascript) (0) | 2024.03.24 |
