Javascript 개요

자바스크립트 기본

출처: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOM : 문서 객체 모델(The Document Object Model)
HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다.
웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

DOM에서의 객체 접근

document.getElementById(id)
document.getElementsByTagName (en-US)(name)
document.createElement(name)
parentNode.appendChild (en-US)(node)
element.innerHTML (en-US)
element.style (en-US).left
element.setAttribute (en-US)
element.getAttribute
element.addEventListener (en-US)
window.content (en-US)
window.onload (en-US)
window.dump (en-US)
window.scrollTo (en-US)

자바스크립트, Node.js 자습 사이트

노마드코더 : https://www.youtube.com/channel/UCUpJs89fSBXNolQGOYKn0YQ
생활코딩 : https://opentutorials.org/course/3085
w3cschool 레퍼런스 : https://www.w3schools.com/jsref/default.asp
w3cschool : https://www.w3schools.com/js/default.asp
Node js school : https://nodeschool.io/ko/#workshoppers
http://tcpschool.com
https://www.w3schools.com/
참고할만한 사이트 : https://www.codingfactory.net/

자바스크립트 버전에 관하여

출처 : https://medium.com/sjk5766/ecma-script-es-%EC%A0%95%EB%A6%AC%EC%99%80-%EB%B2%84%EC%A0%84%EB%B3%84-%ED%8A%B9%EC%A7%95-77715f696dcb

ES3 (1999)

우리가 흔히 말하는 자바스크립트.

ES5 (2009)

배열에 forEach, map, filter, reduce, some, every와 같은 메소드 지원
Object에 대한 getter / setter 지원
자바스크립트 strict 모드 지원 (더 깐깐한? 문법 검사를 한다.)
JSON 지원 ( 과거에는 XML을 사용하다가, json이 뜨면서 지원하게 됨 )

ES 2015 (ES 6)

let, const 키워드 추가 : 기존의 변수는 함수 scope를 가진 var 키워드를 이용하여 선언하였다. 때문에 block scope 를 가진 let과 const 키워드를 추가하였다. 기존에는 상수형 키워드가 없어 CONST_TEST와 같이 대문자로 상수임을 표시했다면, ES 6부터 const 키워드가 추가되어 값의 변경을 통제한다.
arrow 문법 지원 : arror 문법은 두 가지의 장점을 제공한다. 첫 번째는 익숙하면 편하고 간결해진 코드를 작성할 수 있다. 두 번째는 this 를 바인딩하지 않는다. (다르게 말하면, this는 해당 scope의 this와 같다.)
iterator / generator 추가 : 위 arrorw에서 샛길로 빠져서 더 새진 않겠습니다. 이 둘은 따로 공부해서 글을 쓸 정도로 내용이 깊고 많습니다.
module import / export 추가 : 사실 저는 익숙하고 당연하게 import / export를 써 왔는데 도입된 시점이 그리 오래되지 않았다는 것에 잠깐 놀라네요.
Promise 도입 : 자바스크립트의 비 동기 callback hell을 해결해 줄 기법이 추가 되었습니다.

ECMA 2017 (ES 8)

async — await : 위에서 ES6에서 callback hell을 해결하기 위해 Promise가 도입되었다고 했는데 async-await도 Promise처럼 callback 을 해결할 뿐만 아니라 좀 더 직관적이고 단순하게 코드를 만들 수 있습니다

브라우저별 자바스크립트 지원 여부

출처 : https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%97%94%EC%A7%84

프로그램 언어 순위?

TIOBE : https://www.tiobe.com/tiobe-index/
TIOBE programming language index는 해당 프로그래밍 언어를 이용하는 엔지니어 및 업체의 수와 Google, Bing, Yahoo 등의 검색 엔진을 통해 검색되는 결과물의 수를 바탕으로 순위를 결정한다. 따라서 TIOBE index에서는 C/C++이나 Java와 같은 전통적인 프로그래밍 언어의 순위가 높게 산정되는 경향이 있다.

Javascript의 작성위치

external

외부에 js 파일을 두고 이를 불러서 사용 <script src="externalScriptFile.js"></script>

embeded

script 태그 내에 스크립트를 작성

  <script>
    alert("test");
  </script>

inline

html의 onclick등에 직접 작성

<button onclick="alert('버튼 클릭')">버튼<button/>

자바스크립트의 구성요소

이벤트(트리거)

DOM Events : https://www.w3schools.com/jsref/dom_obj_event.asp

  <button onclick="alert('클릭됨')">클릭 해 주세요.</button >
  <button onmouseover="alert('마우스 올림')">마우스를 올려주세요.</button >

함수(function, method)

기능
여러가지 명령을 묶어 놓은 것
함수의 선언
함수를 사용하기 전, 함수의 형태나 내용등을 정의합니다. (사용 하기 위해 미리 설명을 해둡니다)
function 함수 이름 (인자1, 인자2 ...) { 내용 }

함수의 호출

함수를 불러서 정해진 대로 작동 하도록 해줍니다.
인자 값을 전달하여 함수가 그때그때 다른 동작을 할 수 있도록 할 수도 있습니다.
함수 이름 (인자1, 인자2 ...);

예제

기본함수

  <script>
  	function f1(){
  		alert("아주 기본적인 형태의 함수 입니다");
  	}
  </script>
  <button onclick="f1()">f1 실행</button>

인자값이 있는 함수

  <script>
  	function f2(i){
  		alert(i+"라는 값을 전달 받았습니다");
  	}
  </script>
  <button onclick="f2(1)">f2 실행하면서 1을 전달</button>
  <button onclick="f2(2)">f2 실행하면서 2을 전달</button>

인자값 (변수 variable) 이 있는 경우는 호출하기에 따라 각각 다른 일을 할 수 있습니다.

리턴이 있는 함수

함수의 처리 결과를 의미하는 리턴(return)이 있는 함수는 스스로 무언가를 하기보다는 처리결과를 되돌려 줍니다.

  <script>
  	function f3(i,j){
  		return i+j;
  	}
  	function f4(i,j){
  		var sum = f3(i,j);
  		alert(i+"더하기"+j+"는?"+sum);
  	}
  </script>
  <button onclick="f4(3,5)"> 3+5는? </button>

변수(variable)

변하는 수
똑같은 기능(function)을 가지고도 다양한 결과가 나올 수 있도록 함

출력장치

  document.getElementById("demo").innerHTML="";
  document.write("");
  window.alert("");
  console.log("");

변수

이름규칙

이름에는 문자(영문),숫자,언더라인(_),달러기호($)이 사용될 수 있다.
이름은 반드시 문자(영문)으로 시작하여야 한다.
이름은 달러기호($)와 언더라인(_)으로 시작할 수도 있다.
*라이브러리의 주기능에 대한 별칭으로 ($)가 사용되는 경우가 많음
*비공개(숨겨진) 변수에 대한 별칭으로 (_)가 사용되는 경우가 많음
이름은 대소문자를 구분해야 한다. (y와 Y는 서로 다른 변수이름)
예약어(javascript에서 사용하기 위해 미리 지정된 이름)는 변수이름으로 사용될 수 없다.

선언방식

 var carName;
 carName = "sport car"; //hoist라고 부르며 var만 이 방식으로 선언가능
 var carName = "sport car";
 var carName = "sport car", carColor = "red", carPrice = "10000";

var

중복선언 시 값이 유실되지 않음

  <p id="demo"></p>

  <script>
    var carName = "Volvo";
    var carName;
    document.getElementById("demo").innerHTML = carName;
  </script>

let

let은 ES6(2015)에 처음 소개되었다.
let은 재정의 될 수 없다.
let은 사용전 반드시 값이 할당되어야 한다.
let은 블록변수(block scope)로 사용될 수 있다

재정의 될 수 없다

  let x = "John Doe";
  let x = 0;
  // SyntaxError: 'x' has already been declared

블록변수(block scope)로 사용 될 수 있다

{} 내에서 정의 된 let은 밖에서 접근할 수 없다.

 {
   let x = 2;
 }
 // x can NOT be used here
 console.log(x);

지역변수로 사용할 수 있는 기초
var같은 경우는 scope 밖에서 변수가 재정의 되거나 변경될 수 있다.
이미 선언된 let를 var로 재정의 하거나, var를 let으로 재정의 하는것이 불가능

const

const는 ES6(2015)에 처음 소개되었다.
const는 재정의 되지 않는다.
const는 값이 재할당 되지 않는다.
const는 블록변수(block scope)를 가지고 있다.
Array(배열) Object(객체) Function(함수) RegExp(정규표현식)
변수가 아니기 때문에 고정된 값을 할당합니다.
위와같은 객체형 변수를 할당할 경우 객체참조(주소)를 고정값으로 가지고 있고. 객체 자체에 접근하여 변수를 수정할수 있습니다.

산술연산

사칙연산(+,-,*,/)으로 기본되는 숫자를 이용한 셈 연산

논리연산

예/아니오, 참/거짓 으로 표현될 수 있는 판단
!=, ==, <=, >=, <, >

제어문

조건문, 반복문, 분기문
조건문
조건식을 통하여 비교판단 하고 기능을 제어하는 구문
if, if ~ else, if ~ else if ~ else, switch

반복문

같은 작업(또는 약간의 차이가 있는 연속성작업)을 쉽게 처리하기 위한 구문
while, do ~ while, for

분기분

실행순서를 변경하여 다른명령을 실행할 수 있도록 하는 구문
break, continue, return

자바스크립트의 특수성

DOM(문서 객체 모델 : The Document Object Model) 제어

  <div>나의 이름은 <span id="my_name">홍길동</span>입니다. 반가워요</div>
  <script>
  	var name_span = document.getElementById("my_name");
  	name_span.innerHTML = "고길동";
  </script>

CSS 제어

  <style>
  	.red_back{
  		background-color: red;
  	}
  </style>
  <div id="div_red"> 붉은 배경 </div>
  <script>
  	var target_div = document.getElementById("div_red");
  	target_div.classList.add("red_back");
  </script>

class제어, transition의 조합

  <style>
  	#div_red2{
  		transition: background-color 1s;
  	}
  	.red_back2{
  		background-color: red;
  	}
  </style>
  <div id="div_red2" onmouseover="add_red()" onmouseout="remove_red()"> 붉은 배경 </div>
  <script>
  	var target_div = document.getElementById("div_red2");
  	function add_red(){
  		target_div.classList.add("red_back2");
  	}
  	function remove_red(){
  		target_div.classList.remove("red_back2");	
  	}
  </script>

Javascript 개요

자바스크립트 기본

DOM에서의 객체 접근

자바스크립트, Node.js 자습 사이트

자바스크립트 버전에 관하여

ES3 (1999)

ES5 (2009)

ES 2015 (ES 6)

ECMA 2017 (ES 8)

브라우저별 자바스크립트 지원 여부

프로그램 언어 순위?

Javascript의 작성위치

external

embeded

inline

자바스크립트의 구성요소

이벤트(트리거)

함수(function, method)

함수의 선언

함수의 호출

예제

기본함수

인자값이 있는 함수

리턴이 있는 함수

변수(variable)

출력장치

변수

이름규칙

선언방식

var

let

재정의 될 수 없다

블록변수(block scope)로 사용 될 수 있다

const

산술연산

논리연산

제어문

조건문

반복문

분기분

자바스크립트의 특수성

DOM(문서 객체 모델 : The Document Object Model) 제어

CSS 제어

class제어, transition의 조합