국비 38 일차

기분좋음:) 2022. 2. 9. 21:59

자바 스크립트

• 사용자와 웹 페이지간의 상호작용이 이루어지는 웹 페이지를 동적 웹페이지라고 부른다.

웹에서 표준으로 사용하는 프로그래밍 언어(자바스크립트) -이벤트에 반응하는 동작 구현

자바스크립트 지원 버전 https://www.ecma-international.org/

Home - Ecma International

Ecma International is an industry association dedicated to the standardization of information and communication systems Ecma is driven by industry members to meet their needs, providing a healthy competitive landscape based on differentiation of products a

www.ecma-international.org

특징

-html 문서에 내장<script>태그

-스크립트 언어(컴파일 X)

웹 페이지에서 자바스크립트의 역할

-사용자의 입력 및 계산

-웹 페이지 내용 및 모양의 동적 제어

-브라우저 제어

-웹 서버와의 통신

-웹 애플리케이션 작성

실행방법

웹 브라우저 콘솔에서 실행(test) -inspection창에서 console

HTML문서에 자바스크립트 코드를 삽입하여 웹브라우저에서 실행하기 - 개발용

console.log('') -콘솔창에 출력가능

주석처리(자바와 동일)

// /* */

자바스크립트 코드작성 가능한 위치

-HTML태그의 이벤트 리스너 속성에 작성

-<script>태그안에 작성

(<head>,<body>내 어디든 가능), (웹페이지 내에 여러번 사용가능)

-자바스크립트 파일에 작성

-url부분에 작성

식별자 -대소문자 구별

자바와 유사

자바스크립트의 위치 방법

1. 인라인 자바스크립트

2. 내부 자바스크립트

3. 외부 자바스크립트

외부 자바스크립트

•자바스크립트 코드 파일 저장

-확장자 .js파일 저장

• 여러 웹 페이지에서 불러 사용

-하나의 .js파일로 여러개 웹페이지의 코드 작성 가능

자바스크립트 다이얼로그 : 프롬프트 다이얼로그

• prompt("메시지" , "디폴트 입력값") 함수

-사용자로부터 문자열을 입력 받아서 리턴

null과 ""은 다른값

자바스크립트 다이얼로그 : 확인 다이얼 로그

• confirm("메시지") 함수

- “메시지”를 출력하고 ‘확인/최소(OK/CANCEL)’버튼을 가진 다이얼로그 출력

- 확인 버튼을 누르면 true, 취소 버튼이나 강제로 다이얼로그를 닫으면 false 리턴

자바스크립트 다이얼로그 : 경고 다이얼 로그

• alert("메시지") 함수 • 메시지’와 '확인' 버튼을 가진 다이얼로그 출력, 메시지 전달

자바스크립트로 HTML 콘텐츠 출력

• 자바스크립트로 HTML 콘텐츠를 웹 페이지에 직접 삽입

document.write()

ex) document.write("<h3>welcome!</h3>");

자바스크립트 문장

문장구분 세미콜론(;)사용

한줄에 한문장만 있는경우 세미콜론 생략 가능

자바스크립트 데이터 타입

숫자 타입(정수,실수)

논리 타입(true,boolean)

문자열 타입

객체 레퍼런스 타입(객체-종류多)

null

•자바스크립트에는 문자 타입 없음

변수

let 변수명; -중복 선언 불가

var 변수명; -중복 선언이 가능하다.

자바스크립트는 변수 타입 없음

변수타입 선언하지 않는다.

변수에 저장되는 값에 대한 제약 없음(변수,문자열,함수...)

• 루프의 카운터 변수는 i,j,k등을 사용한다.

• 상수는 대문자로 표기한다.

• 논리값은 변수앞에 is 접두어를 붙인다.

• 생성자는 파스칼표기법을 따른다.

자료형 확인

-브라우저 console창에서 확인

typeof()

상수 선언

const 이름 = 값

• 이중 인용 부호(“”)와 단일 인용 부호(‘’) 모두 사용

• 문자열 내에 문자열 표시 ""안에 ''로 표시

연산자 우선순위

https://developer.mozilla.org/ko/docs/Web/JavaScript/

JavaScript | MDN

JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼

developer.mozilla.org

산술 연산

자바스크립트는 부동소수점으로 %연산을 진행가능

ex) 3%1.5

+연산에서 피연산자중 하나가 문자열 → 연산의 결과는 문자열 이다.

ex) 321+"welcome"; → "321welcome"

NaN(not a number)

isNaN → 숫자인지 아닌지 확인시 사용

요소가 숫자일 경우 false , 숫자가 아닐 경우 true

관계 연산 (비교연산)

undefined와 null은 같은 것으로 처리

• 한쪽이 숫자이고 다른쪽이 문자열이면 문자열을 숫자로 전환해서 비교

• 둘중 한쪽이 논리값이면 true는 1로, false는 0으로 변환해서 비교

• 한쪽이 객체이고 다른 쪽이 숫자나 문자열이면 객체를 숫자나 문자열로 변환한 후 비교

→ 위의 경우를 벗어나면 모두 ‘같지 않음’으로 판단

===, !==연산

값 뿐만 아니라 해당 타입까지 비교

&&과 || 연산 진행시 SCE(단락연산: Short-circuit evalution)를 한다.

단락연산 A && B A가 false인 경우 B 진행하지 않고 넘어감.

단락연산 A || B A가 true인 경우 B 진행하지 않고 넘어감.

비트 연산

피연산자를 부호 있는 32비트 정수로 변환해서 처리

true - 1 false - 0

&(AND) → 두 비트 모두 1이면 1, 아니면 0

|(OR) → 두 비트 모두 0이면 0 , 아니면 1

^(XOR)-A와 B가 다르면 true → 두 비트가 다르면 1, 같으면 0

~(NOT) → 1을 0으로, 0을 1로 변환

시프트 연산

>>오른쪽으로 비트를 1칸씩 이동(밀려나는 비트는 버리고 빈 비트는 0으로 채운다.

(숫자 커짐)

<<왼쪽으로 비트를 1칸씩 이동

(숫자 작아짐)

왼쪽 시프트 (X2효과)

ex) a=5;

b=a << 1; → b = 10;

오른쪽 시프트(나누기 2효과)

ex) a=5;

b=a >> 1; → b = 2;

증감 연산자

a++ , a-- a사용후 a값 1증가, 감소

++a , --a a사용전 a값 1증가, 감소

조건 연산자

(조건)?(A):(B) - 조건 true → A값

- 조건 false → B값

문자열 연산자

•문자열 연결

ex) 23+"35" → "2335" (하나가 문자열일 경우 문자열로 결합)

순서유의

23 + 35 + “abc” → "58abc"

“abc” + 23 + 35 → "abc2335"

•문자열 비교

비교 연산자는 문자열 비교에 사용

사전 순으로 비교 결과 리턴 (사전 순 앞에 있을수록 작다.)

제어 구문의 종류

• 조건문

if 조건문(if~else)

switch문

• 점프문

자바스크립트에서 사용가능한 점프문은 break, continue, return, throw문이 있다.

break

- switch문 종료

- break 만나면 반복문 빠져나간다(가장 안쪽 반복문 하나만 빠져나감)

continue

-진행하던 코드 중단하고 위로 올라가 다른 값으로 다시 실행

• 반복문

조건의 반복 : while

-while문

시작부터 조건을 확인

-do~while문

한번 코드블록을 실행하고 조건을 확인

횟수의 반복 : for

• 라벨문

자바스크립트에는 모든 문장에 라벨을 붙일 수 있다.

해당 라벨로 점프위해(break, continue)사용

라벨이름 : 문장;