Gotcha JavaScript!

계속해서 반복적으로 사용할 수 있는 코드의 조각이다.따라서 가능한 적은 코드를 작성하기 위해 어떠한 코드를 캡슐화해서 실행을 여러번 할 수 있는 function을 작성한다.

1> 객체의 목적\-정리정돈의 수단으로 쓰인다. 서로 연관된 함수와 변수를 같으 이름으로 그륩하기 위한 도구로서 쓰인다.2> 객체의 사용법1)2)3)3> 객체와 반목문for문은 in 뒤에 따라오는 객체의 key값을 in 앞의 변수 name에 담아서 반복문을 실행한다.변

함수는 어떤 일을 수행하고 그 결과를 알려주는 것인데 return 키워드를 사용하면함수의 결과를 리턴 함으로서 함수를 호출하는 코드가 리턴값으로 바뀐다.함수를 통해 어떤 작업을 하고 그 작업의 결과를 알려줘야할 땐 return값을 넣어준다.return의 또 다른 기능은

Type을 변경하는 방법ParseInt()함수 사용OR AND operate, && || = < <= === !===

document는 브라우저에 이미 존재하는 Object 객체로 이는 우리가 접근할 수 있는 HTML을 가리키는 객체를 의미한다.document 객체를 사용해서 HTML과 연결되어있는 JS는 HTML에 접근하여 여러 정보를 가져오고 가져온 정보를 JS코드에서 볼 수도 있

Event Event 인터페이스는 DOM 내에 위치한 이벤트를 나타내는 것으로 클릭, 마우스가 올라가거나, 입력을 끝내거나 엔터를 누르는 것들 이 모든 행위가 EVENT이다. addEventLisener JS를 사용하여 Event를 listen 할 수 있다. 무슨 e

step 1. element를 찾아라step 2. event를 listen해라step 3. 그 event에 반응해라여기서 반응란 무언가를 보여주거나 감추거나 색을 바꾸는 등을 말한다. element에서 class name을 변경하는 메소드이다.하지만 이렇게 코드를 짜면

input 태그에 value 속성을 사용하여 사용자가 입력한 값을 받을 수 있다.submit은 엔터를 누르거나 버튼을 클릭할 때 발생하는 이벤트 타입이다.input의 유효성검사(max required같은 속성)를 이용하기 위해서 form 요소가 무조건 필요하다.\-fo

interval은 매번 일어나야하는 무언가를 말한다. 매 번 무슨 일이 일어나고 싶을 때 interval을 사용한다.setInterval은 두개의 인자를 받는데 첫 번째 인자는 네가 실행하고 하는 function이고두 번째 인자는 매번 function을 ms 간격으로

\-array, 배열에서 랜덤하게 element를 골라내야한다. Math.random();은 임의 숫자를 리턴해준다.\-여기에 \*num을 작성하면 0~num까지 사이의 숫자를 소수로 리턴해준다. 따라서 배열의 길이를 num값으로 넣어주면 0부터 배열의 길이 사이에 있

Set up To-Do List는 greeting을 만든 것과 동일하다. form 태그를 만들고 그 안에 할 일을 받아낼text 타입의 input을 만들어주고 그 밑에 ul 태그를 만든 뒤 나중에 JS로 li 태그를 추가해준다. 주의 할 점은 newToDoinput

navigator.geolocation.getCurrentPosistion(성공시 함수, 실패시 함수)

\+기호를 이용해 문자열과 문자열을 합쳐서 새로운 문자열을 만든다.백택 기호를 활용하여 string literals를 만들 수 도 있다.\-string literals를 사용하면 줄바꿈을 하거나 특수기호, 싱글쿼트를 이용해도 문자열로 변환이 된다. \-일반적으로 싱글쿼

Function\-프로그램을 구성하는 기조벉거인 빌딩 블록\-서브 프로그램이라도 불리고 여러번 재사용가능하다.\-한가지 태스크가 값을 계산하기 위해서 사용된다.1.function declaration ?\-Function 함수 이름 (파라미터1, 파라미터 2\_ {바디

클래스는 연관있는 데이터를 한데 묶어놓는 컨테이너와 같은 역할로 이름과 나이와 같은 속성이 들어가 있고 말하는 행동, 메소드가 들어가있다. 즉 클래스는 연관이 있는 속성과 메소드가 묶여있는 것을 말한다. 클래스는 붕어빵을 만들 수 있는 틀과 같다. 클래스 자체에는 데

원시형 타입은 변수 하나에 값을 하나만 담을 수 있다.출력 시에도 각각의 변수를 파라미터로 전달해줘야하여 함수를 정의하여 쓸 때도 각각의 변수를 파라미터로 받아올 수 있아야하는데 만약 인자가 많아지면 추가해야하는 것들이 너무 많아져 관리하기 힘들고 로직컬하게 그륩으로

바구니를 이용해 비슷한 물건을 담아놓듯이 프로그래밍 언어에서 비슷한 종류의 데이터를 묶어서 한 데다가 보관해놓는 것을 자료구조라고한다. 자료구조는 어떤 방식으로 어떤 형식으로 데이터를 담느냐에따라서 다양한 타입들로 나눠진다. 오브젝트는 여기서 토끼와 당근에 속하는데

브라우저 위에서 동작하고 있는 웹 사이트나 웹 어플리케이션과 같은 클라이언트들이 어떻게 서버 와 통신할 수 있는지를 정의 한 것이 HTTP이다. http는 어떻게 Hyper Text들을 서로 주고 받을 수 있는지를 규약한 프로토콜의 하나이다. http는 클라이

콜백 지옥을 대체하기 위해, 어떻게하면 깔끔하게 작성할 수 있는지알아보자. Promise -Promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트 이다. -Promise는는 정해진 장시간에 기능을 수행하고 나서 정상적으로 기능이

async와 awaits는 promise를 간결, 간편하게 동기적으로 실행되는 것처럼 보이게 만들어주는 것이다.promise는 여러가지 chaning이 가능한데 promise된 다른 promise된 다른 promise된 이런식으로 chaning이 계속되면 다소 코드가

JS에서 함수가 어떻게 전달 되는지함수 선언 & 호출함수는 딱 두 가지만 이해하자함수를 선언하는 것함수를 호출하는 것함수를 선언\-function 키워드 이용하여 원하는 함수명을 정의해준다.\-함수명(), ()괄호 안에 함수가 어떤 값을 전달 받아오는지, 전달받는 인자

\-웹페이지의 문서의 구조를 나타내는 HTML\-문서 각 요소들의 스타일을 나타내는 CSS\-정적인 문서의 구조와 스타일에 변화를 주거나 로직을 추가할 수 있는 JS함께 동작한다.JS 코드를 실행 > HTML, CSS에 변화 > 브라우저에 해당 내용을 반영하여 렌더링>

브라우저에서 제공하는 window 객체이다.JS 해당 객체를 통해 각 HTML elment나 CSS에 접근하거나 조작을 가 할 수 있다.브라우저에서 Javascript 실행시 가장 상위에 존재하는 객체이다.\-변수를 선언하거나 함수 선언시 window 객체 안에 선언이

Cascading Style SheetHTML 문서의 요소가 어떻게 표시될지 정의selector : tag이름, id, class로 작성 가능하다.\-tag이름 : 태그 이름 그대로 사용(h1, h2, p, img, ...)\-id : -class : .을 붙이고 cl

HTML문서가 DOM에 따라 기술되고 DOM INTERFACE를 통해 기술된 HTML elemnt가 Object, 즉 객체로서 연결되기 때문에 접근 가능하다.컴퓨터가 문서를 잘 처리할 수 있도록 문서에 대한 구조를 약속한 것Dom은 Tree 형태를 따른다 (족보나 가

단일 Element 선택엘리먼트의 ID 속성을 기준으로 해당 엘리먼트에 해당하는 태그를 반환한다.\-document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드\-document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드인자로 HTM

document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드. 배열형태로 값을 반환함1>document.getElementsByTagName 메소드\-인자로 HTML element 태그의 이름을 전달하면 해당 엘리먼트들이 반환된다.2>document.

document.createElement() : 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환된다..appendChild(인자) : 추가할 element를 인자로 받아 호출된 element의 가장 마지막 자식으로 인자를 추가한다..remov

Callback Function 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수

form event : HTML 문서의 form element에 변화가 생기거나 submit버튼을 누르는 경우 등의 상황에서 발생하는 이벤트.window event : 패이지가 모두 로드되었을 때 발생하는 onload event 등이 있다.mouse event : 사용

\-브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 그 응답을 받아 처리할 수 있는 기술이다.\-AJAX를 사용하면 사용자에게 더 나은 사용 경험을 제공해준다.AJAX를 위한 객체 생성\-new XMLHttpRequest(); 메

1.HTTP 요청을 보냈을 때 발생하는 이벤트 종류에 대해서 알아보자.2.이벤트 핸들러를 등록해 활용하는 방법에 대해서 알아보자.req 객체에 대해서 readyState 속성이 변할 때마다 해당 메소드가 호출된다. this.readyState출력하면 req 객체에 메소

자바스크립트의 객체를 문자열로 표현하는 방법이다.\-프로그램간에 전달하기 편리하다. (서버 -> 브라우저)\-서버에서 데이터를 받아서 브라우저에 표시하려할 때 많이 사용된다.서버에서 보낼 데이터를 json형태로 전송하면그 데이터를 수신한 브라우저는 JS를 통해 해당 데

\-데이터가 여러개인 경우에 (배열 형태로 값을 받은 경우) 반복문으로 각각의 데이터에 대해 돌면서 처리한다.

스크립트 태그를 헤드태그 안에 넣을 때와 바디 태그 직전에 넣을 때의 차이는?\->HTML문서의 파싱과 JS 코드의 실행 관계때문이다.브라우저는 HTML 문서를 읽으면서 script tag를 실행한다.HTML 문서에 있는 Element 파싱보다 스크립트가 먼저 실행되면

\-Syntax Error (문법적 오류)해당 구문이 실행되지 않아 쉽게 발견 및 수정 가능\-Semantic Error (논리적 오류)실행은 되지만 의도한 결과가 도출되지 않는다.크롬 디버거를 활용하면 프로그램이 실행되는 도중 원하는 위치에서 멈추도록 할 수 있다.멈

JS에서는 함수가 1>인자로 사용되거나 2>콜백 함수로 사용될 수 있기 때문에, 일회성으로 사용될 코드의 블럭을 함수로 정의하는 경우가 많다.즉, 이러한 함수의 경우 이름이 꼭 필요하지 않기때문에 익명함수가 필요하다.중간에 어떤 코드를 추가해야하고 그 코드가 독립적으로

프로그램의 외부 요인으로 프로그램의 특정 파트가 정상적으로 동작하지 않을 수 있으나, 에러처리를 이용하면 프로그램이 정상적으로 실행될 수 있다.예외처리 과정? \-JS에서 throw 명령을 통해 에러를 발생시키고 Try, Catch구문을 통해 해당 에러를 받아서 에러를

if & else구문과 try & catch구문의 차이는 뭘까? try, catch 구문은 함수 호출, 호출한 함수 안에서 에러가 발생할때에도 에러를 캐치할 수 있다는 장점을 가지고 있다. >예제 1번> function errFunc() { throw "err

<이미지 갤러리의 기능>1\. 이미지를 마우스 선택 창으로 선택이 가능하다.2\. 마우스를 올려두면 이미지 확대된다.3\. select all 버튼과 unselect all버튼으로 이미지 전체 선택 및 해체가 된다.4\. slide show 버튼을 누르면 일정 시

1> div 태그에 onclick 이벤트가 발생시 함수를 작성한다.2> 이미지를 클릭했을 때 div 태그의 class 속성값을 얻어온 후 indexOf메소드를 사용하여 image-selected 클래스의 존재 여부를 확인한다.2-1>image-selected 클래스가

HTML 문서에 input 태그를 사용하여 버튼을 만들어준다.selectAll() 함수를 통해서 모든 div 태그를 선택해준다.변수 images안에 image 클래스를 가진 모든 엘리먼트를 배열로 저장해준다.반복문을 활용하여 classList.add를 통해서 image

classList에 접근하기 위해서는 해당 elment에 접근해야한다.onmouseover이벤트가 발생하는 익명함수 안에서는 this가 div이다.setTimeout이벤트에 의해서 호출되는 익명함수 안에서는 this가 해당 div가 아니다.이를 극복하기 위해서 함수의

Part 5. 슬라이드 쇼 기능 만들기 setInterval 을 이용한 순차적 이미지 확대 슬라이드쇼가 끝나면 interval을 취소 추가로 구현해 볼 내용 중간에 슬라이드쇼를 멈추는 기능 슬라이드쇼 중에는 그림이 확대되지 않도록 하는 기능

비동기적 자바스크립트와 XML, 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 통식 방식을 의미한다.비동기적이라 함은 브라우저가 서버랑 통신을 하면서 어떠한 작업을 실행시키고 다른 일을 할 수 있는 걸 의미한다.반대로 동기적인 건 네트워크 지