[Do it 자바스크립트 + 제이쿼리 입문] 기초 문법(02) + 함수(05) 개념

* 모든 파일은 html로 작성

* html 파일의 <script></script>안에 javascript가 작성됨

* 모든 코드의 출처(책 이름 : [Do it 자바스크립트 + 제이쿼리 입문]) :  https://edu.goorm.io/lecture/12563/%EC%A0%80%EC%9E%90-%EC%A7%81%EA%B0%95-%EB%B0%94%EB%A1%9C-%EC%8B%A4%ED%96%89-do-it-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%9E%85%EB%AC%B8

* 현재 공부중인 자바스크립트 + 제이쿼리 코드 : https://github.com/0131ryu/Javascript_book

 

 

 

[02. 자바스크립트 기초 문법]

 

document.write("hello");

- document는 문서 객체이며, 문서 출력 메서드인 write()를 이용해 데이터를 문서에 출력

 

<script src="js 파일 경로"></script>

- 내부 스크립트를 외부로 분리, 프로젝트 관리를 원활하게 하기 위함

 

변수

- 변하는 데이터(값)을 저장할 수 있는 메모리 공간, 데이터를 담을 수 있는 그릇이며, 오직 데이터 한 개만 저장 가능

- 새로운 데이터가 들어오면 기존의 데이터는 지워짐

- 변수 선언 방법 : var AAA = 0;

 

연산자

- 산술(+,-,*,/), 문자 결합(+로 주로 연결), 대입연산자(+=, -=, *=, /=), 증감연산자(++, --), 비교연산자(>, <), 논리연산자(true, false) 등 존재

- 이 중 증감 연산자는 위치가 어디에 있냐에 따라 값이 달라짐

- 예시) var num = 10;

num--; 

document.write(num); //9;

++num;

document.write(num); //10

num++;

document.write(num); //11

 

[03. 제어문]

 

제어문 

- 프로그램 흐름을 제어할 수 있도록 도와주는 문장

- 조건문(if/else/else if), 선택문(switch), 반복문(while, for문) 존재 *do/while은 while과 동일하게 생각할 것

- break;는 while/for문에서 조건식과 상관없이 반복문을 강제로 종료 시 사용

- continue : 반복문만 사용 가능

- for문은 중첩해서 사용 가능

 

if	if/else	if/else if	switch	while	for
if(조건식) {    자바스크립트 코드; }	if(조건식) {    자바스크립트 코드1; } else {    자바스크립트 코드2; }	if(조건식1) {    자바스크립트 코드1; } else if(조건식2) {    자바스크립트 코드2; }	var 변수 = 초기값; switch(변수) {      case 값1; 코드1;      break;      case 값2; 코드2;      break;      defulat: 코드3;      break; }	var 변수 = 초기값; while(조건식) { 자바스크립트 코드; 증감식; }	for(초기값, 조건식; 증감식) {     자바스크립트 코드; }

for문 내 continue	while 내 continue
for(초기값; 조건식; 증감식) {      continue;      자바스크립트 코드; }	var 변수 = 초기값; while(조건식) {        증감식;        continue;        자바스크립트 코드; }

 

[04. 객체]

 

객체

- 자바스크립트는 객체 기반 언어

- 객체는 기능과 속성을 가짐

객체의 기본형

객체.메서드(); 객체.속성; 또는 객체.속성 = 값;

 

객체의 종류

- 내장객체 : 자바스크립트 엔진에 내장되어 있음, 문자(String) / 날짜(Date) / 수학(Math) 등

- 브라우저 객체 모델(BOM) : 브라우저에 계층 구조로 내장되어 있는 객체

                                 -> window(document와 location의 객체의 상위 객체), screen, location, history, navigator 등

- 문서 객체 모델(DOM) : HTML 문서 구조

 

내장객체 

- 변수를 이용해 참조 : 앞으로 생성된 객체를 이용 시 참조 변수를 사용하겠다는 말

- 배열객체 (ex) arr = [1, 2, 3]) 나 문자열 객체(ex) var t = "test";)등 사용 가능 

내장 객체 기본형

참조 변수(인스턴스 이름) = new 생성 함수();

 

브라우저 객체 모델

- 브라우저에 내장된 객체 : 브라우저 객체

- window 객체의 메서드 종류 : https://homzzang.com/b/js-1139

- screen 객체의 메서드 종류 : https://webzz.tistory.com/83

- location 객체의 메서드 종류 : https://webzz.tistory.com/85

- history 객체의 메서드 종류 :  https://webzz.tistory.com/84

- navigator 객체의 속성 종류 : https://webzz.tistory.com/82   

 

[05. 함수]

 

함수

- 변수(데이터는 저장 가능하나 코드 저장 불가)와 달리, 함수는 코드를 메모리에 저장했다가 필요할 경우 호출해서 사용 가능

기본 함수 정의문	함수명이 없는 함수	정의된 함수 호출하는 방법
function 함수명() {           자바스크립트 코드; }	참조 변수 = function() {           자바스크립트 코드; }	함수명();  또는 참조 변수();

 

getElementById() 메서드

- id값을 이용해 문서 객체(태그)를 선택하는 메서드

ex) id값이 "bg"인 요소의 배경색을 초록색으로 적용

document.getElementById("bg").style.backgroundColor = "green";