## document.createElement (HTML 태그 추가) -HTML에서만 HTML 요소를 만들 수 있는 것은 아니다. -물론 해당 파일에서 생성하는 것이 가장 간단하기 때문에 대부분 HTML document에서 바로 요소를 생성한다. 물론 자바스크립트를 통해서도 요소를 생성하는 것이 가능하다. -동적으로 특정 태그의 HTML 요소를 생성하려면 자바스크립트의 document.createElement() 메소드를 사용할 수 있다. 이 메소드는 요소의 태그 이름을 매개변수로 받아 해당 노드를 생성한다. -document의 createElement메소드는 지정된 이름의 HTML요소를 만들어 반환한다. document.createElement('div'); document.createElement('..

## 이벤트(event) -이벤트란 사용중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건을 의미한다. -앞으로 배울 웹에서도 이벤트는 발생한다. -웹에서 발생하는 이벤트의 예 # 웹페이지 사용자가 버튼을 클릭한 경우 (클릭 이벤트) # 웹페이지 사용자가 키보드로 입력 경우 (키다운 이벤트) # 웹페이지 사용자가 입력 form의 내용을 전송한 경우 (제출 이벤트) # 외 다수의 이벤트가 발생할 수 있다. -각각의 이벤트들은 이벤트 핸들러(event handler)를 가질 수 있다. -이벤트 핸들러는 이벤트가 발생하면 실행될 코드 블록을 의미한다. 주로 함수가 이 역할을 담당한다. -이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다. example) const button ..

## 함수 -함수는 ‘호출될 수 있는 코드 조각’이다. -변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼 함수를 선언하면 함수의 이름을 코드 조각대신 사용할 수 있다. -함수를 만드는 대표적인 방법 2가지 # 함수 선언식 # 함수 표현식 # 함수 선언식 function 함수명() { // 함수의 기능을 표현하는 구문 } # 함수 표현식 (이름이 없는 함수를 만든 후 변수에 대입하는 형식) const 함수명 = function(){ // 함수의 기능을 표현하는 구문 } -함수가 만들어지고 나면 함수명은 스스로 보관하고 있는 구문대신 사용될 수 있다. -함수를 사용하기위해서는 함수를 호출해야 한다. -둘의 차이는 const는 변수로 저장했기에, 선언전에 사용을 할 수 없지..

## 조건문 -조건문이란 주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문을 뜻한다. -여기서 조건이란, boolean 데이터를 반환하거나 논리형 데이터로 해석될 수 있는 표현식을 의미한다. (즉 결과값이 true 또는 false로 나와야 한다.) # if문 -키워드 if를 사용해서 만드는 구문이며 ‘if문’은 가장 일반적인 형태의 조건문이다. -조건식이 true이면 블록을 실행하고 false이면 블록을 실행하지 않는다. if(조건식 : true & false) { 조건식이 true일 경우 실행될 구문1 작성; 조건식이 true일 경우 실행될 구문2 작성; 조건식이 true일 경우 실행될 구문3 작성;} let number = 3; if (number == 3) { console..

## DOM (Document Object Model) -웹브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여준다. -해석한 HTML 코드를 화면을 통해 보여주는 과정을 렌더링이라고 한다. #HTML, CSS 작업 → 렌더링 → DOM → DOM 렌더링 → 웹브라우저 # DOM의 목적 -HTML에서 작성한 태그들을 하나의 객체(메모리에 등록해서 사용할 수 있게 만들어주는 것)로 만들어주는 작업 -문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스다 -DOM은 자바스크립트를 사용해서 웹 컨텐츠를 추가, 수정, 삭제하..

##연산식 -연산이란 "식이 나타내는 일정한 규칙에 따라 계산"을 뜻한다. -사용자는 자바 스크립트를 통해 연산을 처리하는 식을 만들 수 있고 여기에 사용하는 기호를 연산자라고 한다. # 산술 연산 # +, -, *, /, %를 사용한 계산을 의미한다. # 두 개의 피 연산자를 받아서 하나의 숫자 데이터를 결과로 반환한다. # + : 더하기 : 2 + 2 = 4 # - : 빼기 : 4 - 2 = 2 # * : 곱하기 : 4 * 2 = 8 # / : 나누기 : 10 / 5 = 2 # % : 나머지 : 17 % 5 = 2 # 연산자 우선순위 -여러개의 연산자가 함께 사용되는 경우 연산자 우선순위가 반영되어 우선순위가 높은것부터 계산된다. # 대입 연산 , 복합 대입 연산 -대입연산은 오른쪽의 피연산자를 데이..

한 줄 정리 -``를 문장 처음과 끝에 사용해주면 준간에 ${} 플레이스 홀더를 사용해서 문구 추가가 가능하다. -let template = "좋아요" -let youtube = `구독과 ${template}는 사랑입니다.` ## 템플릿 리터럴 (문장 부분에 단어 추가) -기존의 문자열은 따옴표를 사용했지만 템플릿 리터럴은 백틱을 사용한다. -템플릿 리터럴은 표현식을 내장할 수 있는 문자열 표현 방식이다. (문자열 내용에 데이터를 삽입할 수 있다.) -템플릿 리터럴로 표현한 문자열에 플레이스홀더( ${ } )를 사용하여 새로운 데이터를 삽입할 수 있다. -플레이스홀더( ${ } )안에 문자열을 입력하면 해당 문자열은 템플릿 리터럴 문자에 적용된다. -일반적인 코드 사용 let str = '홑 따옴표를 사..

## 객체 (Object) -객체의 사전적 의미 : 실세계에 존재하는 대상 또는 생각할 수 있는 개념 (스마트폰 , 화분등) -자바 스크립트에게 객체란? : 어떤 사물이나 개념을 소프트웨어적으로 표현하기위해 사용하는 문법적 수단 자바 스크립트 코드 내에서 객체란 "값 또는 기능을 가지고 있는 데이터"이다. -값, 속성, 동작(메서드 method)이 필요하다. -method 메서드 : 객체가 필요하다, 함수 : 객체없이 호출해서 사용 -현실세계에 있는 것을 프로그램에서는 객체로 만들 수 있다. -웹브라우저도 하나의 객체이다. : 웹브라우저는 소프트웨어 세계에 존재하는 사물, 즉 객체이다. 그리고 자바 스크립트는 웹브라우저라는 객체에 명령을 내리기위해 사용하는 언어이다. 사용자가 웨브라우저에게 명령을 내릴 ..

## 자바스크립트란 -자바 스크립트는 프로그래밍 언어중 하나이다. -자바 스크립트는 서버개발, 어플리케이션 개발등 다양한 목적을 위해 사용할 수 있는 언어이지만 주된 활동 분야는 웹 개발에서 가장 많이 사용한다. (인터넷을 통해 서비스되는 웹 사이트 개발) -웹사이트 개발에서 자바 스크립트의 역할은 웹브라우저가 가진 기능을 실행시키거나 HTML/CSS를 통해서 랜더링된 화면을 조작할 수 있다. 즉 자바 스크립트는 웹브라우저를 조작함으로써 역할을 수행 한다. ## 자바 스크립트 사용법 -자바 스크립트를 사용하는 방법은 크게 2가지를 사용 할 수 있다. 1) HTML문서 내부에 작성하는 방법 2) 자바 스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML문서에 연결하는 방법 (자바 스크립트의 파일 확장자..