HaileyKim

자바스크립트 

-언어 

  -데이터/형식

    - 기본형식(boolean/ Number/ String)

    - 연산자

    -제어구조

    -함수

    -가시영역/ 생명주기/클로저

-플랫폼

 -브라우저

   -API : window Object

    window.alert() / confirm() / prompt()

 -문서 

   -API : window.document

   document.write();

   document.getElementById();

  document.getElementsByClassName();

  ..

코드블록

 <script></script>

 onXXX ="" : 사용하지말자

기본코드블록

   window.onload = function(){

    var obj = document.getElementById("?");

    var item = container.getElementsByClassName("it1");

   }

window.addEventListener("load",function(){ }) 

함수를 누적할수있다. 

querySelectorAll 여러개

3000이면 3초

setTimeout() { }

레프트탑을쓸수있다.

position

스크립트를통해 플랫폼을 이용하려고

문서조작: 다큐먼트오브젝트

브라우저ㅂ오브젝트 : 얼럿,컨펌, 등등

다큐먼트롸이트기능이있지만, 로드된 내용중 특정객체를선택해서 조작한다.

로드되어있는 걸선택하고 조작할예정

로드된순간 객체가됨

태그안쪽에있는 속성에는 innerText를 적용한다

innerHtml = 오른쪽에있는게 html태그를 가지고있어서 태그에 적용하고싶을떄사용

HTML이 먼저로드되고 나서 Script가 실행된다. 스크립트가 위에있으면 html이 로드전이기때문에 에러가 난다. 이것을 해결하려면 ?

<h1 id="aside-title" /* onclick=" " 자리 */>고객센터</h1> :

온클릭속성없앤 후(하나의 코드블럭을 없앤것) 스크립트에 id이름.onclick = 함수이름으로 처리.(함수위임)

코드는 코드블럭에 하는게 바람직. 온클릭을 id에 다시한번하지않아도된다. 

코드블럭이란 ? 스크립트를 작성할 수있는블럭

스크립트태그가 분산되어있다. "printSum()"와 <script>

스크립트를만든느사람

html코드만든느사람 따로

블럭이 흩어져있으면 문서보다 하나로 몰려있는게 좋다.

id가 로드된 다음에 실행해야되니까 계속 블록이생긴다

window는 전역객체고 제일먼저 만들어진다.

HTML태그의 순서에따라 태그의 객체가 window.document에 만들어진다. 

window.onload : 윈도우가 갖고있는 그 구성요소들 HTML,CSS,이미지 등 모든것들이 로드가 되었을때 실행 할 수 있는이벤트속성이있다.

로드가되었을때 수행할수있다

함수에안넣었다면 바로실행되겠지만 함수에넣어서 일단실행이안된다

윈도우객체 온로드이베느를사용해서 문서내에서 어떠한것도 직접onzㅡㄹ랙을 넣지않고 사용가능

Q . 함수호출과 위임의 차이 

1.첫번째캡쳐 : onclick= " 코드블럭임 " 

2. 두번째캡쳐 :  asideTitle.onclick = function(){ printSum(); }; 으로 호출되어야한다. printSum()이 함수안에있던것

                     클릭되면 함수실행.

3.반환값을대입하는것을 의미 , 결과값을주는것(호출된 결과값을 달라고한게아니다)

4. 함수를 위임하는것 : 함수의 참조가 asideTitle.onclick에 대입(사용자가 asideTitle을 클릭했을때 실행될 함수를 넘겨달라고한것)

함수 위임

함수의 객체를 늘리지않으면서 사용가능 , 이름중복 x 

이벤트함수는 이름이 필요없다.

왼쪽:UI , 오른쪽 : 동적문서 

전역공간에 함수가있으면 위험

다른함수와 충돌가능성

window.onload =function(){ 안에 함수구현 } :로드되고 실행되는 블럭에다가 함수를 넣는다.

이름충돌을 피할 수 있다. 안에서만 사용되는 함수. 함수이름없음

쓰고자하는애들을 얻어내서 이용한다.

변수명 명명규칙

HTML : 단어구분시 구분자를 "-" 대시이용 aside-titme

JS : getElementById("aside-title");를 통해 해당아이디를 꺼내서  asideTitle로 사용할것. 

window.document.body.children[0]{id:"body"}

window.document.getElementById("aside-title");객체꺼내쓴다. 

getElementsByClassName :

문서에서 동일한 클래스명이 여러개있을 수있다. 복수형태

특정엘리먼트.getElementsByClassName("이름")[0]; 하나만 한정

큰 세션에는 id 부여

지역명 class부여(중복가능한것)

alert는 확인버튼만있지만 confirm은 확인 취소 버튼이있다. 

결과를 출력하고자하는 위치가 있을때

저 엘리먼트에다가 쓰겠다

기존구조에 거기에 글자를 쓰고싶을떄 

자바스크립트가 html 요소들을 객체화하는 로드과정이 포함됨

스크립트로 내용을 변경 할 수있다.

script태그를 id명명하기전으로 옮기면 ?

사용하고자하는 객체가 읽혀지지않은시점에서사용할수없다.

asideTitle은 아직 안읽혔다. 메모리에안올라갔다. ->오류발생

이벤트가 발생할때 실행되는 블록 

사용자가 벝느을 클릭하면실, 마우스가오버되면 실행되는코드

이벤트가발생했을때 실행되는 블럭 

<h1 id="asideTitle" onclick=" ">고객센터</h1>

asideTitle.innerHTML = html;

asideTitle.innerHTML += html;

코드작성 영역이 두군데있다. 

<script>그냥읽혀지는 실행블록, 열리자마자시작

<input onXXX="">이벤트가 발생할때 실행되는 블록

페이지열리자마자 실행되는부분을 사용자가 클릭후 반응하게하려면 ?

prompt를 script에 넣었을때는 창을 열마자마자 실행되었다.

사용자가 특정 부분을 클릭하면 실행되도록해보자

onclick" 실행할 내역 "을 넣음.

<h1 id="asideTitle" onclick="
                        var x = prompt('x값을 입력하세요');
                        var y = prompt('y값을 입력하세요');
                        x = parseInt(x);
                        y = parseInt(y);
                        alert(x+y);">고객센터</h1>

사용자가 고객센터글자를 클릭할때 prompt창이 뜬다. 

상단에 함수를 정의하고 해당부분에 함수이름을 호출하도록한다.

스크립트를 모아두는 방식으로 정리,

스크립트를 헤드영역에 두고 함수호출하도록한다. 

함수를 만드는곳 / 함수사용하는곳 으로 분리 

언어 : 연산과 절차를 만들어 내는 명령어 집합 

API : 플랫폼이 제공한다. 플랫폼을 사용할 수있도록하는 인터페이스 (간접도구) 

플랫폼 : 프로그램을위한 도구, 재료 (카카오친구목록, 기상정보데이터, 디스크, 파일, ..)

           컴퓨터프로그래밍에서 절차에서 사용할 수있는 도구,재료,기반

인터페이스가 있는 플랫폼 

브라우저 오브젝트 API

다큐먼트 오브젝트 API

문자열을 정수로

함수가 플랫폼의 기능인지, 어느객체인지 찾기

언어의 기능이라면 언어의 레퍼런스 찾기

데이터변환은 언어가 갖고있는 범주

alert는 자바스크립트의 기능이 아니라 , 플랫폼(윈도우 객체가 제공하는)API다.

• undefiend : 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태
• (어떤 값도 할당되지 않아서 자료형을 알 수 없음)

• script안에는 전역객체가 존재한다. 

• 전역객체 window에 속성을 붙이는 일(함수안에서 var x =1 로 지역함수 선언해줄것)
• 함수도 객체이다.

new Function("파라미터","구현부분;");

파라미터안에 형식없음 (var (X) )

표기식 선택가능

함수는 객체

add가 함수객체를 참조한다.

마지막: 선언하면서 동시에 대입

두번째를 가장많이 쓴다.

문장이끝나면 세미콜론쓰자

함수정의 방법 

1. var add = function(x,y){ }

변수는 미리준비되어있지만 그 변수가 function은 아니다. (대입이 아직 안되었기때문이다)

함수보다 우선해서 함수를 호출할 수 없다.

2. function add(x,y) { }

변수선언과 동시에 같이 대입이되서 함수를 밑에다 정의해도된다. 

지역화

스크립트에서는 중괄호가 변수 영역을 나누지않음

밖에서 a를 볼수도 쓸수도없다.

x = 1;로 선언을 하면 오류가 안난다. 

전역변수에 x가 붙는다.

var x = 1;로 선언을 하면 오류가 난다. (지역변수)

x 는 완전히함수의 지역변수

함수가끝날때 스택에서 사라진다.

객체안에서 객체를 정의하듯이 함수안에서 함수를 정의한다.

f2의 역할이 f1의 a를 반환하는것

우 :  a가 사라지지않는다.

이유 : f2()때문이다.

참조변수는 참조하는애가있으면 안사라져요

f2가 x를 계속쓰니까 f1의 x가 죽지못하고 살아난다.

리턴된 f2가사라질때까지 

리턴된 함수를 클로저라고부른다

Q. var f = f1();

f1() : f1의 리턴값을 줘 ->f2()

Q. var a = f 가아니라 var a = f() 인 이유 ?

var a = f 이면 a도 f1()을 가리키게된다.

Q. var a = f(); 의 의미

f() 참조변수 f가 가리키는 f2()의 반환값을 호출한다. 

함수는 함수를 반환할 수있다.

f는 자기가 갖고있는 지역변수가 없다. 자기 outer함수의 지역변수를 반환하고있다.

f1()이 반환되고 끝났음에도 f1()의 지역변수는 죽지않고 살아있다.

f1의 반환값이 함수가아니라 x였다면

f1()이 호출되고 반환하고 지역변수는 사라진다

함수는 함수를 반환할 수 있다. 반환할때 inner함수가 outer변수를 사용한다면 outer변수가 사라지지않는일이 발생한다.

의도적으로 한게아니라면 주의해야한다

배열에서 식별자 : 인덱스

자동화된 인덱스 순환구조

오브젝트의 식별자 : 키

obj[속성명]

for in 문으로 객체를 갖는 속성을 순환할 수있다.

항상 선언이 먼저 인식되고(stack에 올라감) 연산절차가 진행된다. 

인터프리터 : 소스코드바로실행, 버추얼머신

컴파일러 : 소스코드번역해서 ->번역된결과물실행

모든객체에 속성을 마음대로 붙일 수있다.

앞에 아무것도 안붙이면 전역변수

var를 붙이면 지역변수가 되는데, 함수를 선언하고 그안에서 var로 선언해야 지역변수가 된다. 

console.log(a);

var a = 1;하면 

undefined가 나온다. 오류가 아니다.

선언이 되지않은걸 실행하면 오류가 날것같은데.. 오류가 아니고 undefined가 나온다.

• 선언한것은 코드가실행 되기전에 미리 stack에 올라간다.
• console.log(a)이후에 var a를 선언했어도 정의/선언된걸 먼저 찾기 때문이다. 이 후 연산이 진행된다.
• var a는 실행문장이 아니다.

var x 가 스택에 올라간다. 

선언이 뒤에가있어도 

코드실행시 선언된것이 먼저 캐치되서 준비되고, 연산이 실행된다.

window.가 생략된것 

window객체의 변수 (this.처럼생략)

윈도우에 a를 추가한것으로 이해한것

• <script>는 전역영역
• window라는 전역객체가있다.
• 변수선언하지않고 a = 1;라고 쓰게되면, (window.)a = 1; 전역객체에다가 a속성을 정의 한것이다.
• alert도 window객체의 함수다. (window.)alert(a); 
• 기본적으로 window객체를 기본적으로 활용하는 영역이기때문에 생략된다 

자바와 비슷하다.

this에 a가있어.

지역변수에 a가있나 봤더니 a가 없어.  - > this에 a가 있나 ? -> int a 있다 -> f1()에서 대입하고있는 3은 this의 a속성에 대입된다.

var를 붙이는것 : 지역변수선언

진짜지역을 갖고있는 블록이 존재하면 거기서 var를 붙이면 그 지역에서만 사용할 수 있는 변수가 만들어진다.

{ }를 안하면 선언헀던 안했던 전역변수가 된다.

자바스크립트에서 지역화는 없다.

함수지역만 가능하다. es 5버전

함수내에서 var를 붙이면 의미가 달라진다 

배열표현

데이터를 구분하기 위한 표현방법

담겨진건 객체가 아니라 문자열이다. undefined로나온다

문자열로 넘겨진것들을 객체로 받으려면 ?

"x=3;"을 출력하면 

undefiend 

eval()은 문자열을 코드로 인식하게 하는 함수

자바스크립트라는 코드를 실행해주는코드

eval은 코드를 실행해준다.실행되는 코드가 한문장으로 완벽해야한다

인터넷에서 가져온 문자열이 [2,3,4,5]였다면 ( )으로 감싸줘야한다

( )으로 감싼 뒤 배열객체 data에 담긴다.

문자앞뒤에 ()감싸면 

자료제공자가  ( )붙여서 줄수없을수 있으니

받은데이터에 ( )를 덧씌우는 json = "(" + json + ")"를 거치고 eval()해서 객체화

JSON Parse 

JSON형태라면 json을 객체로 인식해서 파싱해준다.

parse 메소드는 string 객체를 json 객체로 변환

키의 표기는 따옴표

키값을 완벽히 문자열로표현

제이슨파스쓸때는 키 를 더블따옴표로" "  써야한다

반대로 JSON문자열로 바꿔야한다면 ?

JSON.stringify

json 객체를 String 객체로 변환시켜 줍니다.

eval("var ar = " + data + ";" );

data의 문자열을 ar 배열에 담는다

배열0번째의 co값을 출력한다. 0.6

== 값만비교 (.equals())

===참조비교  

for in

키를 뽑아내주는 제어구조이다

그 안에있는것들을 하나씩꺼내서 전체를 순회하는데 도움을준다

ar의 데이터를 식별할때 유일한 식별자는 순서다

ojt의 식별자는 key다 kor, eng, math (키는순서가없음)

키값을 담을수 있는 변수가 k인것

splice(인덱스번호,삭제여부,추가할숫자)

중간에서 값을 삭제하거나 넣기 

nums.splice(2) 인덱스 2번부터 삭제해

nums.splice(2,2)

인덱스2번에서 2개를 삭제해.

nums.splice(2,0,3)

인덱스 2번에서 삭제를 안하고 3을 넣는다 (가운데가 0이면 삽입)

nums.splice(2,1,3)

인덱스 2번에서 삭제를하고 3을 넣는다. (가운데가 1이면 교체)

인덱스 2번에서 삭제안하고 3,4,5삽입

slice(시작,끝)

일부분을 추출함. 일부분 가져옴

익스클루시브 

(1,3) 1부터2까지 짤림

indexOf(3) //  해당숫자의 인덱스번호 

찾았으면 0이상

해당인덱스가 있으면 양수 , 없으면 음수

기본데이터형이 다 객체다.

객체지향언어이다.

인터프리터언어라 미리 정의하는것이 발달되어있지않다.

미리정의하는걸 안좋아한다.

미리정의하지않았어도 초기화하면서 동시에 정의가 된다. 먼저생성하고 정의함.

변수이름 대소문자 주의 

변수이름을 미리 정의하는게아니기 때문에 오타실수가 발생할수 있다

씨플플,씨샵,자바는 정의를 하고 객체를만든다 -정적인객체정의
자바스크립트는 객체만들고 정의 - 동적인객체정의
기본기를 잡기위해 자바스크립트를 배우고있다
가능하면 타임스크립트가 낫다
보안장치가있다.
앵귤러:기업형적합
자유도:리액트
모바일:뷰제이에스

속성명에 -(대시)를 쓸 수 없다.

속성사용할때는 문자열형태로 바꿀 수있다. 대시가 들어가던 안들어가던 사용가능 대괄호로 감싸기

문자열로표현한 속성은 대괄호 이용한다.

math는 유효한 속성명이라 두가지 방법 모두 가능하다.

"w-1" -대시가 들어가면 유효하지않은 속성명이므로 괄호를 써준다 

Object표기

JSON 생성방법

키와 값을 한번에 저장하는 컬렉션 등장 

객체를 직접만들 필요없다.

문자열과 문자를 같이 취급한다. (모두 문자열) " " ' ' 모두가능,

쌍따옴표,홑따옴표모두가능 하나 일단 쌍따옴표쓰는것으로 기억하기 

객체를 제이슨표기법으로 만들기.

exam.a는 exam객체의 a 키를 부른것인데 exam객체중에 a 키는없다. 그래서 undefined

exam[a]는 exam객체의 키값을 a변수를 통해 "kor"속성명의 30값을 호출했다.

기본데이터객체 : boolean, number, string, undefined

배열 : 공간을 미리정하지 않아도 알아서 만들어준다. 공간을 줄였다 붙였다 할 수 있다.

• var nums = new Array();
• var nums = new Array(5); // 숫자가하나면 5개의 빈공간만들어짐(참조변수 5개만든것)
• var nums = new Array(5,10,21); //  2개이상값은 배열의 초기화값으로됨. 3개짜리방에 1번째 5, 2번째 10, 3번째 21
• var nums = new Array(5,10,21,"hello"); 다양한 형식넣을 수 있음
• var nums = new Array(5,10,21,"hello", new Array(2,3,4));  alert(nums[4][1]) // 3

new Array(5) 공간생성, 비어있는 공간 5개 만들어짐

new Array(5,10); 배열의 초기화, 0번인덱스에 5, 1번인덱스에 10이 들어간다.

new Array(5, 10, "hello", new Array(2,3,4)); 배열을 담는 배열

배열속 배열의 1번 인덱스출력

자료구조

FIFO구조 : Queue 구조 선입선출

LIFO구조 : Stack 구조 후입선출

push(); 배열에 숫자 넣음 

pop(); 배열에서 마지막에넣은 숫자를 뺀다

shift() 앞에서부터 빼기 (큐)

웹개발자의 직업군 : Front-end 개발자

문서의 내용을 동적으로 만들거나 사용자 행위에따라 내용을 바꾸는것

DOM : 다큐먼트객체, 모델, 표준

다큐먼트객체화한것 + 스크립트 이용

자바스크립트버전

5.0 , 6.0 둘다 공부한 후 선택적으로 쓸 수 있어야한다.

두 버전의 능력은 같지만 6.0에서는 표현식이 달라졌다.

HTML파일이 로드되어 메모리에 올라 가고 객체가 갖고있는 속성이 사용자 인터페이스에 보인다.

-스크립트언어 : 연산자, 제어구조, 함수구현(절차작성)

-화면출력: 사용자 입출력, 브라우저

->스크립트로 브라우저 기능을 조작

과거에 유효하지않은 값을 넣고 로그인을 누르면 서버에서 서비스를 제공하는데 어려움이 있었다. (e.g 디도스공격)

이것을 해결하기 위해 폼객체가 만들어졌다. 폼태그안에 있는 입력객체만 메모리에 올라감

90년 말 : 문서를 다 바꿀 수 있는 범위로 플랫폼의 확장

Dynamic html -> ajax -> 제이쿼리 -> AI , 빅데이터 순으로 유행이 바뀜.

값이 유효하면 전송해서 불필요한 요청의 처리를 줄였다.

HTML파일에 script를 넣어보자

새로고침을하면 화면에 입력한 값이 나온다.

태그내역에 변화주기

input 태그에 id명과 value값을 넣고

script에서 이를 수정하면 수정한 내역이 반영된다.

태그들을 객체화해서 이용한다.

원하는대로 바꿔 쓸 수 있다.

자바스크립트의 특징

자바스크립트 : 인터프리터언어. 컴파일러가 없고 소스코드가 그대로 전달된다. 그때그때 번역기를 돌려서 실행한다.

자료형이 구체적이지 않다.

모든변수가 참조형식이다.

자바에서의 변수선언이란 공간을 마련하는 것이지만,

자바스크립트는 기본형식이 없고 기본래퍼타입만 있다.

100%참조형식이다.

변수들은 내부적으로 4바이트만 마련한다. 정수객체, 실수객체, 문자객체, 문자열객체이다.

변수는 공간이 아니다. var x =3 ; 3스스로가 공간을 확보한다.

실행중에 오류를 만나야만 알 수 있다.

값을 대입안했을 경우 ? undefined 

변수중 객체를 할당하지않은 변수는 undefined라는 객체를 갖는다.

아직 객체를 참조한적 없는 변수를 의미

변수에 값을 대입하기 전과 후의 차이

x =3를 대입하기 전에는 undefined로 출력이되고 , 대입 후에는 대입한 값이 나온다.

undefined인지 아닌지 확인하려면 ""없이 입력

출력함수  console.log(typeof x);

자바에서의 System.out.print()와 비슷

배열 객체

공간을 미리 만들 필요 없다.

자바 : 컬렉션

자바스크립트 : 컬렉션화된 배열

데이터를 가변적으로 담을 수 있다.

초기값비교

undefined자체가 값이다. ""쓰지말것

x == undefined