js

외부 자바스크립트 script src로 연결한다. script는 자바스크립트를 연결하는 태그이다. ex)link 같은 거 이건 어디에서나 사용가능하다. 외부 스크립트는 바디 안의 맨 아랫줄에 사용하는 경우가 많다. => 바디 안에 들어가있는 태그들을 토대로 진행해서

"use strict"; //엄격한 자바스크립트 ES6문법을 사용하겠다는 의미.

자료형이란(date type) '데이터의 형태'를 뜻한다. 변수에 담을 수 있는 자료형의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈데이터(Null, undefined)가 있다.문자형 데이터(Strin

혹은 하지만 이건 결과값은 같지만 다른것이다. 변수 안에서 직접 연산된 거기때문에 수정이 어렵다. !그래서 재사용 할 예정이면 1의 방법을 사용한다. 2번의 연산은 안쪽에 두고 겉에 통을 만들어준다. 이런식으로 ! 산술연산자\~~ 산술연산자 또다른 실전 예시)\~~

문자 결합 연산자는 피연산자(연산대상데이터)가 문자형 데이터이다. 여러 개의 문자를 하나의 문자형 데이터로 결합할때 사용한다. 기호는 +(더하기)를 사용한다. 문자결합 연산자는 피연산자로 문자형 데이터가 한개라도 포함되면

대입 연산자는 연산된 데이터를 변수에 저장할때 사용함. 오른쪽에 있는 값을 변수에 넣는다. '라는 의미이다.'산술연산자와 대입연산자가 복합적으로 적용된 것을 말한다. 예시) 최종적으로 0이 계산된다. 복합대행 연산자는 담을 그릇이 필요하지않기 때문에

증감연산자는 숫자형 데이터를 1씩 증가시키는 증가연산자(++) 1씩 감소시키는 감소연산자(--) 연산자이다. 증감연산자는 앞에서 배웠던 다른 연산자와는 다르게 피연산자가 1개만 필요한 '단항연산자'이다. 즉

프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다. 제어문에는 조건식에 만족여부에 따라 코드를 제어하는 '조건문'과 조건문과 변수의 일치에 따라 코드를제어하는 선택문, 특정코드를 원하는 횟수만큼 반복실행하는 '반복문'

기본형 var 변수 = 초깃값; switch(변수){ case 값1:코드1; break; case 값2:코드1; break; case 값3:코

continue문은 '\~~조건일때, 다음에 오는 코드를 무시해라' for문에서 사용 할 경우 continue문 다음에 오는 코드는 무시하고 바로 증감식으로 가서 증감식을 실행한다. 즉, for문에서 continue문은 '다음 코드는 무시하고 증감식

객체는 기능(함수=매서드)과 속성(프로퍼티)으로 이루어져있다. 즉 함수와 변수를 섞어놓은 것을 말한다. 예를들어 앞서 배웠던 html태그들도 하나의 객체라고 볼 수 있다. a태그에 기능은 링크를 연결하는 것이고, 속성은 태그

변수에는 데이터가 하나만 저장된다고 했다. 하지만 하나의 변수에 여러 데이터를 묶어서 저장하고자 할때 '배열(array)'를 사용한다. 배열은 초콜렛 상자처럼 초콜렛이 몇개이든 상관없이 하나의 박스에 담은 것과 같다.

자바스크립트의 내장 객체에는 수학과 관련된 기능과 상수를 제공하는 수학 객체가 있다. 앞에서 배운 산술 연산만으로는 반올림, 올림, 최댓값 이런 것을 구할 수 없기 때문에 수학 객체를 이용하면 어려운 수학을 연산할 수 있다.

배열객체에 들어있는 데이터의 순서를 바꾸거나 배열끼리 합치거나 배열의 특정구간 만큼을 잘라내고 싶을때 사용하는 매서드들이 있다. 또한 배열객체에 새 데이터를 넣거나 삭제할 수도 있다.

문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 나온다. 즉, 문자형 데이터==문자열 객체이다. 문자형 데이터는 배열과 마찬가지로 첫 번째 글자부터 index번호를 0번부터 부여받는다. 이 인

변수에 간단하게 객체를 넣고자 할때 사용하는 방법 객체를 생성할 때 new키워드를 이용해서 객체를 생성했다. 만약 이것을 좀더 간략하게 표현하면 아래와 같은 문법을 쓸 수 있다. 객체의 속성값을 확인하고자 할 경우 객체(변수명).

웹 브라우저가 창에 문서가 표시되는 순간 브라우저는 html소스를 한줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어낸다. 웹 브라우저가 열리면 가장 먼저 window객체가 만들어지고 밑으로 하위요소에 해당하는 객

일정한 시간 간격으로 코드실행하는 함수로 setInterval()매서드와 setTimeout() 매서드가 있다. setInterval()은 일정한 시간 간격으로 코드를 반복 실행하고, setTimeout()는 일정한 시간이 흐른 후에 코드를

사용자의 모니터 정보(속성)을 제공하는 객체로 모니터의 넓이나 높이 또는 컬러 표현 bit를 반환한다. [기본형] screen.속성; [종류] -screen.width : 화면에 넓이 값을 반환

-프로토콜- http: hyper text transfer protocol = 통신규약 ex) 주소를 표시하는 규약이라고 생각하기. 보안이 되어있지 않음. http: hyper text transfer protocol Security = 보안된 주소

var라는 변수의 치명적 특징은 값을 지정하지 않았을때에빈그릇 안에 기본적으로 언디파인트라는 값이 들어가있다. 그래서 나중에 오류가 많이 뜬다. 코드자체도 엄청 길어진다 또한 변수(var)를 적지 않았는데도 10이 뜨는 결과.. 값이 없는건데 자바스크립트는 오류를알려주

재선언재할당var를 이용한 변수는 호이스팅 이외에도 '재선언'과 '재할당'을 할 수 있다. 재선언이란, 같은 이름의 변수를 var를 붙여 여러 번 선언하는 것을 말하고, 재할당이란 만들어진 변수에 값을 계속 여러 번 집어넣는 것을 말한다.

변수를 만드는 새로운 키워드로 재할당은 가능하지만 재선언은 불가능한 변수를 만드는 키워드이다. 그렇기 때문에 var변수처럼 이름이 중복되어 코드의 에러를 발생시킬 일이 없다. Let으로 만든 변수는 호이스팅이 없다. var예약어를 사용한 변수는 선언하기

argument가 있는 함수 정의문 기본함수 정의문은 함수 안에 있는 코드를 실행할때 단순히 함수명으로 호출해서 함수를 실행했다. 즉 함수를 호출할때 값을 전달할 수 없었다. 하지만 매개변수가 있는 함수 정의문은 함수를 호출하고자 할때

setAttribute()매서드 선택한 태그의 특정 속성을 수정하는 매서드. setAttribute()매서드의 첫 번째 인자값으로는 해당 태그의 속성이름이 들어가고 두번째 인자값으로는 해당 속성의 바꾸려는 값을 전달한다. 인

일반 함수의 정의문의 경우 (=이름이 있는 함수)의 경우 호이스팅 기능을 지원 함수의 호이스팅은 함수 정의문보다 함수 호출문이 등장하더라도 해당 함수를 정상적으로 실행하는 것을 말한다. 일반 함수가 정의되면 자바스크립트 엔진 메모리 공간

일반함수 정의문의 경우 함수명을 선언하고 그 이름을 사용해서 호출한다. 이 방법은 함수이름만 알고 있으면 어디서나 함수를 실행할 수 있어서 많이 사용한다. 이 밖에 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고,

ES6버전부터는 => 표기법(화살표 표기법)을 사용해서 함수선언을 좀 더 간결하게 할 수 있다. 화살표 함수는 익명함수에서만 사용할 수 있다. 이런 공식이다. return을 대입하면 이런식이다. addNum에다가 1,3을 넣고, 1+3이 return에 의

내장객체를 생성할때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용해서 객체를 생성한다. 객체 생성자 함수의 이름의 첫글자는 대문자로 쓰는 것이 관례이다. 객체는 각각 다른 기계이다. ex)빵틀을 만들어놀고 비슷한 모양을 생성할떄

이전파일과 같이 보자 !!!!!!객체 생성자 함수를 선언하여 객체를 생성하고 속성과 함수를 등록하여 사용할때 앞에서 배운 내용대로 메서드를 사용하면 객체를 생성한만큼 함수가 등록된다. 그리고 함수를 여러 개 등록하면 메모리 공간을 많이 차지

!DOCTYPE html은 HTML웹 표준 선언문이다. 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이있을때 웹 문서전체 또는 일부분이 동적으로 반응하게 만들기 위해서이다. 이렇게 반응하게 하려면 웹 문서의 모든

DOM객체에서 부모와 자식구조로 나눠지는 모든 것을 '노드'라고 표현한다. 부모 자식 구조를 표시하면 나무 뿌리의 형태가 되므로 DOM트리라고 부른다고 했다. DOM트리에서 가직가 갈라져나온 항목을 노드(node)라고 하고 DOM트리의 시작

자바스크립트에서는 웹요소에 내용도 수정할 수 있다. 가장쉬운 방법은 innerText, innerHTML 프로퍼티를 사용하는 방법이다. innerText프로퍼티는 텍스트 내용을 표시하고 innerHTML프로퍼티는 태그까지 반영하

DOM이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다. 즉, 클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그위에 마우스를 올리는 등 모든 행위를 '이벤트'라고 한다. 자바스크립트에서 이벤트를 실행시키려면 이벤

마우스 이벤트 : 마우스 이벤트는 마우스를 이용해 버튼이나 휠 버튼을 조작할때 사용한다. 키보드 이벤트 : 키보드 이벤트는 키보드에서 특정 키를 조작할때 이벤트가 발생한다. 종류\-keydown★ : 사용자가 키를 누르는 동안 이벤트가 발생한다. 예) 검색창의 엔

앞 예제에서 사용하던 방법은 html이 주인이 되어 자바스크립트의 함수를 호출해서 사용하는 베이직한 방식이다. 하지만 DOM을 사용하면 자바스크립트가 주인이 되어 html의 요소를 가져와서 이벤트 처리를 하게 만들 수 있다.

앞에서 배운 이벤트 객체에는 이벤트에 대한 정보만 들어있다. 만약 이벤트가 발생한 대상에 접근하려면 이벤트 핸들러에서 this를 사용해야한다. 이벤트에서의 this는 '이벤트가 발생한 객체'를 가르킨다.클릭했을때 src의 속성이 뜨게 만들어봤다

요 방식으로 해도 되고, 아니면지금은 함수를 연결해서 만들어줄거임이건 하나의 태그에 두개의 이벤트를 넣어준거임. addEventListener를 넣어준거임 이건 무조건 !!!이벤트명을 ''문자열이어야함 무조건 (없어지면 변수 취급을 당한다. 그래서 오류가 남) 반드시

웹 문서에서 처음 화면에서는 보이지않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가 있다. 이런 동작은 css에 display속성을 사용해서 만들수도 있지만 DOM트리에 새로운 노드를 추가하는 방법도 있다. 이때 주의할점

DOM의 이벤트 객체 이벤트 정보를 저장하는 event객체가 있다. 이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다. 이벤트 객체는 이벤트 함수의 매개변수 자리에 e

텍스트필드와 같이 사용자가 입력한 내용을 자바스크립트로 받아올때는 .value프로퍼티를 이용한다. 먼저 입력값을 받아올 input태그를 먼저 선택해서 변수에 담아둔 다음 변수명.value를 해주면 현재 입력되어있는 내용을 자바