8장 자바스크립트 시작하기
8.1 자바스크립트 코드 작성법
-내부스크립트방법
HTML파일에서 script 태그의 콘텐츠 영억에서 자바스크립트 코드를 작성하는 방법
document.write("내부 스크립트 방법");
-외부 스크립트 방법
js확장자로된 별도의 파일을 생성하고 그 파일에 자바스크립트 코드를 작성한뒤 HTML문서와 연결하는 방법
document.write("외부 스크립트 방법");
< script src="script.js"></script
script태그는 항상 body태그의 종료태그 바로전에 사용
8.2 자바스크립트 코드 실행하기
-콘솔창 사용하기
웹브라우저의 콘솔창에 자바스크립트 코드를 작성해 실행가능
F12 -> 콘솔창으로 이동
clean console : 콘솔창의 내역을 지우는 기능
clean console history: 콘솔창에 입력한 모든 코드 기록을 지우는 기능
확장프로그램 사용하기
code Runner확장 프로그램 -> 에디터 내부에서 자바스크립트 코드의 실행결과를 바로 확인가능
document.write():웹 브라우저에 텍스트를 표시해주는 코드
cosole.log(): 웹브라우저 없이 에디터에서 바로 실행할때 사용
//한줄주석
/여러줄 주석/
콘솔창을 보면 오류발생 파일명과 코드 줄 번호와 오류 메세지를 출력해줌
9장 자바스크립트 기본 문법 살펴보기
9.1변수와 상수
변수: 변하는 수 ->값이 변하는 데이터를 저장하고 관리하기 위한 공간
키워드: 자바프로그래밍 언어에서 어떤 역할이나 기능이 정해진 특별한 단어(== 예약어)
식별자: 자바스크립트 내부에서 변수, 함수등에 부여되는 이름을 의미
연산자: 연산 작업을 하는데 사용하는 기호
=기호: 우변에 있는 데이터를 좌변에 할당하는 역할을 하기 떄문에 할당연산자라고 한다
표현식: 평가되어 하나의 값을 반환하는 식 또는 코드를 의미
값: 더 이상 평가할수 없는 데이터를 의미
세미콜론: 자바스크립트에서 하나의 문법이 끝났음을 의미
선언,할당,초기화
변수의선언: 변수의 식별자를 지정하는 행위
값을 할당: =기호로 우변에 있는 값을 변수 공간에 대입라는것
let
1.변수명 중복이 불가능
var 카워드로 선언한 변수명을 중복해서 생성가능
2.호이스팅이 되지 않음
호이스팅: var키워드로 변수를 선언하고 할당했을때 변수 선언을 자바스크립트의 스코프 맨위로 올려 실행하는것
3.스코프의 범위가 다음!
상수: 변하지 않는 수
const 키워드는 재할당이 안되는 특징떄문에 상수변수 선언시 사용하는 키워드
식별자 명명 규칙
-식별자에 키워드 사용불가
-식별자에 공백 포함 불가
-식별자의 첫글자는 영문,소문자,_,$기호만 사용
카멜표기법
: 길자 높이가 내려갔다가 올라간다고 해서 이름 지어진 표기법
-> 첫 글자는 영문 솜누자로 시작하고 2개이상의 단어가 조합되면 각 단어의 첫글자는 대문자로 표기
언더스코어표기법
: 2개 이상의 단어가 조합될때 각단어를 -기호로 연결해 표기하는 방법(상수의 식별자를 지을때 사용)
파스칼 표기법: 각 단어의 첫글자를 대문자로 작성하는 방법(생성자 함수명을 지을때 사용)
9.2 자료형
자료형: 자바스크립트에서 사용할수 있는 데이터의 종류를 의미
기본 자료형:문자,숫자,논리,undefined,null, Symbol
참조자료형: 객체
문자열: ("")나('')로 둘러싸인 값의 형태를 의미
문자열에 따옴표가 포함된 경우
문자열 연결 연산자
: +이용
이스케이프 문자
: 웹 브라우저가 사용자 의도와 다르게 문자열을 해석할때 사용
템플릿 문자열
백틱()으로 문자열을 정의하는 방법
->큰 따옴표나 작은 따옴표의 영향을 받지 않음
숫자형 : 정수와 실수를 구분하지 않고 하나의 숫자 자료형으로 취급(예를 들어 10이나 0.1이나 같은 숫자형)
논리형
: 참 또는 거짓에 해당하는 논리값인 true ,false를 의미
undefined
: 변수나 상수를 컴퓨터 메모리 공간에 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야하는데 할당하지 않을 경우 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이떄 할당되는 값
null
:벼눗나 상수를 선언하고 의도적으로 선언한공간을 비워둘때 할당
객체: 자바스크립트의 핵심적인 자료형
배열
:복수의 데이터를 정의할수 있는 자료형
객체 리터럴: 객체를 정의하는 가장 간단한 방법->중괄호 안에 키와 값의 한쌍으로 이루어진 속성이 들어감
연산자
산술연산자: 덧셈,뺄셈,곱셉,나눗셈과 같은 수학 연산을 수행하는 연산자
이항 산술연산자: 연산을 수행하는데 피연산자가 2개 필요한 연산자
단항 산술연산자: 연사나을 수행하는데 피연산자가 1개만 필요한 연산자를 의미
단항 부정연산자: 항상 피연산자 앞에 위피하며 피연산자의 부호를 부정하는 연산을 수행
대입연산자: 데이터를 대입,할당하는 연산자
복합대입연산자: 산술연산자와 대입연산자를 함꼐 사용해 산술과 할당을 한번에 수행하는 연산자
비교연산자: 피 연산자를 비교한뒤 논리형인 값 참,거짓을 반환하는 연산
논리연산자: 피연산자를 논리적으로 평가한뒤 조건에 맞는 피연산자를 반환하는 연산을 수행
삼항연산자 : 가장 왼쪽에 있는 피연산자의 참,거짓에 따라 나머지 두항에 있는 피연산자를 선택적으로 반환하는 연사능ㄹ 수행
x?y:z
암시적 형변환: 연산자를 공부할때 같이 이해하면 좋은 개념
명시적 형변환: 이름 그대로 드러나게 형 변환을 처리함
9.4 조건문 다루기
if문 :if 뒤에 오는 소괄호 안의 조건식이 참으로 평가됨녀 중고라호 안의 코드를 실행하는 조건문
else문
: if문의 조건식이 거짓일때 실행되는 블록문을 정의
else if문
:if문제 조건을 추가하고싶을때 사용
중첩하기:어떤 조건식을 만족할때 어떤 블록문을 실행할지 결정하는것을 분기처리
switch : 뒤에 오는 소괄호안의 값과 일치하는 case문이 있을때 해당 코드를 실행하는 조건문
if문: 조건에 식을 사용-> 조건에 식을 사용
switch 문: 조건에 값을 사용
9.5 반복문 다루기
while,do,...while,for
while문: 기본은 whlie문으로 특정조건을 만족하는 동안 블록문을 실행
무한반복문: 반복문의 조건이 계속 참으로 평가되어 반복문이 끝나지 않고 무한히 실행되는것을 말함
do...while문 : 특정 조건이 참으로 평가되는 동안에 do다음에 블록문을 반복실행
for문: 횟수를 지정해 지정한 횟수가 끝날때까지 블록문을 반복실행하는 반복문으로 조건식과 증감식이라는 독특한 실행구조로 되어있음
for...in
for(가변수 in 배열/객체 리터럴){}
break문
:종료조건을 만족하지 않아도 인위적으로 반복문을 종료하는 방법
continue 문
:반복문을 건너뛰고 실행하라는 명령- > 해당 반복 실행만 건너뛰게 됌
10장 자바스크립트 함수 다루기
함수: 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문
함수선언문으로 함수 정의하기
function 식별자(){}
함수명();
함수표현식으로 함수 정의하기
:변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명함수로 구분
화살표 함수로 함수 정의하기
()=>{};
매개변수: 함수를 정의할때 외부 전달하는 데이터를 함수에서 받을수 있도록 정의하는 변수
인수: 정의한 함수를 호출할떄 소괄호 안에 전달하고싶은 데이터를 적음
명명규칙-> 변수의 식별자 명명 규칙에 따라 지어줌
데이터 전달: 함수를 정의할때 함꼐 정의한 매개변수는 함수 호출시 전달되는 데이터와 일대일로 대응되어 데이터가 할당됌
function sum(num1,num2){}
sum(10,20);
return :함수 외부로 데이터를 반환시 사용
return 식(또는 값)
스코프: 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙
함수 스코프 : 함수에서 정의한 블록문만 스코프의 유효범위로 인정하는 방식
블록 스코프: {}로 구성된 블록문 기준으로 스코프의 유효범위를 나누는 방식
참조 우선순위-> 같은 스코프영역에서 중복선언이 불가능하다고 할수 있음
즉시 실행함수 : 함수를 정의하면서 동시에 실행까지 하는 함수
(function(){})();
11장 자바스크립트 객체 다루기
객체 속성에 접근하기
대괄호 연산자로 접근하기 : []를 사용해 객체의 속성에 접근하는 방법으로 배열에서 사용가능. 객체의 속성에 접근하려면 객체명 뒤에 대괄호를 붙이고 대괄호 안에 키를 붙임. 이때 키는 반드시 큰 따옴표나 작은 따옴표로 감싹 문자열 형태로 작성해야함
마침표연산자: .를 이용해 객체 속성에 접근
객체 속성값 변경하기
: 객체로 정의도니 값을 바꾸고 싶다면 키로 속성에 접근해서 값을 재할당하면 됌
객체 속성 동적으로 추가하기
: 객체 속성에 키로 접근해 값을 재할당하면 기존 속성값을 변경할수 있음
객체 속성 동적으로 삭제하기
: delete키워드로 person객체의 하나뿐인 name속성을 삭제하고 person객체를 출력해보면 빈 객체가 출력됌
표준 내장객체 사용하기
문자열을 다루는 string객체
:string 객체는 기본 자료형에서 문자열을 다룸
배열을 다루는 Array 객체
: 기본 자료형중 배열을 다루는 객체
날짜와 시간을 다루는 Date객체
인스턴트 만들기
const date=new Date();
수학 연산을 다루는 Math 객체
Math.floor()
Math.ceil()
Math.round()
Math.random()
난수구하기
random()메서드는 0이상 1미만의 난수를 반환
브라우저 객체 모델사용하기
브라우저 객체 모델: 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체도 있음
window :웹 브라우저의 기능과 요소들을 제어할수 있는 여러속성과 메서드가 있음
->주로 웹 브라우저의 창과 관련있는 속성이 많음
