[WEB] Frontend - JavaScript, WebBrowser

<한줄요약>

JavaScript : 웹 페이지의 동적 요소(추가, 삭제, 사용자 입력)을 처리하기 위하여

 

1. JS란?

 

-  브라우저는 JS를 HTML과 함께 다운로드, 실행

-  브라우저의 JS엔진을 이용해 웹상에서 동작하는 프로그래밍 언어

 

 

2. HTML에서 JS 사용하기

 

-  HTML에서는 <script type="text/javascript"> 태그로 JS를 선언한다. (최신버전 기준 type 생략 가능)

-  외부의 JS파일을 src속성으로 import할 수도 있으며, 직접 작성할 수도 있다.

-  head, body어디에 있어도 상관 없지만, head에 둘 경우 body 출력 전 점검사항이 늘어나 느려질 수 있다.

 

 

3. JS 문법

 

-  주석 : Java와 동일, //와 /* */

-  변수 : type이 없다, var로 선언, 값이 할당되는 중 자동으로 type이 결정된다.

 

기본 자료형

자료형		설명
숫자형, number		정수/실수
문자열, string		문자, 문자열
boolean		true/false
undefined		초기화되지 않음
null		값이 존재하지 않음

-  숫자를 정수/실수로 구분하지 않는다

-  소숫점 연산시 기본적으로 오차가 발생

-  기본 연산자 : 자바와 같다. + - * / %

-  Infinity : 무한대. 0으로 나누는 행동을 했을때 발생

-  NaN : 계산 결과가 숫자가 아닐때 발생

 

-  문자열과 문자를 구분하지 않는다

-  '' "" 둘다 사용 가능. \를 사용한 특수문자도 지원

 

-  boolean은 true/false중 하나를 가진다

-  null, undefined, 빈 문자열, 숫자0은 false와 같다

 

-  undefined : 시스템 레벨에서 할당되지 않은 변수

-  null : 코드의 결과값이 없음

 

자동 형 변환

-  자료형이 다른 변수들끼리 연산해도 자동으로 변환되어 적용된다.

-  string + int : int가 string으로 변환

-  '1'+23 = '123'

 

변수 호이스팅

- 호이스팅 : 모든 선언을 해당 Scope의 처음에 처리하고 본문을 진행한다

-  var a = 123; 의 경우,

-  var a가 먼저 선언되고, 진행 중 var a=123;의 위치에 도달했을때 123으로 초기화된다.

-  그 이전에 참조할경우 undefined로 참조된다.

 

let과 const

-  상수는 const로 선언 ( ex. const LIST_SIZE=10; )

-  var는 기본적으로 전역 Scope

-  let, const는 해당 block을 Scope로 가진다

-  let, const는 호이스팅시 undefined로 초기화되지 않아 참조할 수 없다

-  let은 var와 달리 동일 Scope에서 재선언 불가

 

비교연산자

-  == : value가 동일한지 확인, '1'==1 은 true이다

-  === : type까지 동일한지 확인 '1'==='1'은 false이다 (string과 number로 다름)

 

조건문

-  if(조건식) else if(조건식) else 자바와 같다

-  switch-case 자바와 같다

 

반복문

-  while(조건식). 자바와 같다

-  do/while 최초 1회는 반드시 수행. 자바와 같다

-  for( ; ; ) 자바와 같다

-  for(var key in list) 객체의 key에 대한 foreach로 동작.

-  for(var value in list) 객체의 value에 대한 foreach로 동작. ES6 추가문법, iterator 속성 필요

-  array.foreach( function(item) {} ) array의 각 원소에 대해 foreach로 동작. ES6에선 set/map 지원

 

 

4. 객체

 

-  이름(key)과 값(value)으로 구성된 property들의 집합

-  기본 자료형을 제외한 나머지 모든 값들은 객체이다.

-  JS에서는 함수 또한 객체로 취급한다

 

객체 생성

 

-  1. 객체 리터럴

var player = {
	name : "player1",
	level : 50,
	class : "warrior",
	info : function(){
		console.log(name+ "의 레벨은 " +level +"이며 직업은 " + class+ "입니다.");
	},
};

 

-  직접 {}안에 각 property들을 명시하여 생성

 

-  2. Object 생성자 함수

var player = new Object();

player.name = "player1";
player.level = 50;
player.class = "warrior";
player.info = function(){
    console.log(name+ "의 레벨은 " +level +"이며 직업은 " + class+ "입니다.");
};

-  Object로 생성 후 property를 할당

 

-  3. 생성자 함수

function Player (name, level, class){
	this.name = name;
    this.level = level;
    this.class = class;
    this.info = function(){
    	console.log(name+ "의 레벨은 " +level +"이며 직업은 " + class+ "입니다.");
    };
}

var player1 = new Player("player1", 50, "warrior");
var player2 = new Player("player2", 30, "mage");

-  생성자 함수를 만든 후 활용. 중복코드 감소

 

객체 속성 조회, 변경, 추가, 제거

 

-  1. 객체.속성명으로 접근

-  2. 객체["속성명"]으로 접근

-  속성명에 특수문자, 공백, 연산자 등이 있다면 2번방법으로 조회

 

-  접근한 속성에 값을 할당하면 속성의 값이 새로운 값으로 변경된다

-  ex. player1.level = 10;

-  ex2. player1["level"]=10;

 

-  값을 할당한 속성이 없다면 신규 property로 추가된다

-  ex. player1.money= 5000;

 

-  delete연산자로 속성 제거 가능

-  ex. delete player1.money;

 

 

5. 함수

 

-  JS에서 함수는 first-class 객체이다

-  함수는 변수, 배열, 객체등에 저장될 수 있고, 인자로도 전달되고, return값으로도 사용 가능하다

 

함수의 선언

 

-  1. 함수 선언문

function 함수명 (arg1, arg2 ...) {
	//내용
}

 

-  2. 함수 표현식

var 함수명 = function (arg1, arg2 ...) {
	//내용
}

 

-  3. 생성자 함수 이용

var 함수명 = new Function ("arg1", "arg2" .... "함수 내용");

 

 

함수 호이스팅

 

-  함수 선언문 : 호이스팅된다. 어디서든 호출 가능

-  함수 표현식 : 호이스팅되는건 var 변수. 초기화되기까진 undefined로 함수로 사용할 수 없다.

 

함수의 인자

 

-  인자의 갯수가 선언과 일치하지 않더라도 호출 가능하다

 

콜백함수

 

-  특정 이벤트 발생에 따라 자동으로 호출되는 함수

-  ex) 버튼 클릭시 특정 JS 함수가 작동하게 한다

-  주로 비동기식 처리를 위해 사용한다

 

 

6. Window 객체

 

-  웹 브라우저의 JS 최상위 객체

-  브라우저의 여러 객체, 속성이 존재한다

 

Window 객체 활용

-  alert() : 내부 문자열을 담아 경고창 호출

-  comfirm() : 내부 문자열을 담아 확인/취소창 호출

-  prompt() : 문자열을 입력할수 있는 창 호출

 

-  navigator는 브라우저의 정보를 담고있다. chrome인지, ie인지, firefox인지 구분 가능

 

-  location.href=url  : url로 이동한다

-  history.back()/forward() : 뒤로가기, 앞으로가기

 

-  window.open('url', 'name', 'attr', history) : 새 창을 연다

-  이 url에, 이 name으로, 이 attr특성으로, history 덮어쓰기 여부 등 조절 가능

 

-  window.close() 닫는다

-  window.opener() 이 창을 연 창, 즉 부모 창을 컨트롤할 수 있게 해준다.

 

 

7. DOM (Document Object Model)

 

-  문서의 요소들을 tree 계층구조로 표현

-  최상위 노드는 window객체의 document 객체가 위치한다.

-  문서 요소의 추가, 수정, 삭제 지원

 

신규 객체 생성하기

 

-  element를 만들고, text를 넣고, document에 넣는다

var h2 = document.createElement("h2");
var msg = document.createTextNode("hello world!");

h2.appendChild(msg);
document.body.appendChild(h2);

 

-  객체에 속성 추가/조회는 get/setAttribute함수로 할 수 있다.

var img = document.createElement("img");
img.setAttribute("src","img.jpg");
img.setAttribute("width", 160);
img.setAttribute("height", 250);

document.body.appendChild(img);

 

-  객체 하위에 HTML 추가는 innerHTML로 가능하다

-  객체 하위에 text 추가는 innerText로 가능하다

var div = document.createElement('div');
var div2 = document.createElement('div');

div.innerHTML = '<h1>hello world!!</h1>';
div.innerText = 'hello world!!';

 

문서에서 객체 찾기

 

-  id로 찾기 : getElementById(id) : element 한개 반환

-  class로 찾기 : getElementsByClassName(className) : element의 배열을 반환

-  tag으로 찾기 : getElementsByTagName(tagName) : 배열반환

-  name으로 찾기 : getElementsByName(name) : 배열반환

-  css의 선택자 사용

-  querySelector(selector) : 선택자에 맞는 element중 첫번째 하나

-  querySelectorAll(selector) : 선택자에 맞는 element 전부

 

문서에서 객체 제거

 

-  removeChild(node);

 

 

8. 이벤트 (Event)

 

-  웹 페이지에서 발생하는 여러 상호작용들을 event라 한다

-  마우스 클릭, 키보드 입력, 드래그 등등

-  일반적으로 이벤트-함수가 연결되고, 이벤트 발생시에 호출한다.

-  이벤트 발생시 호출될 함수, 이벤트 핸들러를 만들어 연결해줘야 한다.

 

이벤트 종류

 

-  마우스

-  onclick : 마우스로 클릭시 발생

-  ondblclick : 더블클릭

-  onmousedown : 마우스 버튼이 눌렸을 때

-  onmouseup : 마우스 버튼이 올라갈 때

-  onmouseover : 커서가 들어올 때

-  onmouseout : 커서가 나갈 때

-  onmousemove : 마우스가 움직일 때

 

-  키보드

-  onkeypress : 키보드가 눌렸을 때

-  onkeydown : 키보드를 누르는 순간

-  onkeyup : 눌린 키가 올라오는 순간

 

-  frame

-  onload : 모든 로딩이 끝났을때

 

-  form

-  onsubmit : 전송될 때

-  onreset : reset될 때

-  onfocus : 입력 포커스가 들어올 때

-  onblur : 포커스가 나갈 때

 

이벤트 핸들러 등록

 

-  1. 인라인 이벤트 핸들러

<div onclick="javascript:alert('hello world!');">클릭
// 2가지 함수 호출
<div onclick="func1(); func2();">클릭

-  클릭시 js가 호출되 hello world! 메시지의 alert 창이 뜬다

 

-  2. 이벤트 핸들러 property

-  JS상에서 DOM을 찾아 선택하고 이벤트 핸들러를 등록한다

<script>
document.getElementById("id").onclick = function () {
	alert("hello world!");
};
</script>

-  하나의 DOM에 2개의 핸들러를 등록할 수 없다.

 

-  3. addEventListener방식

-  이벤트 이름, 핸들러를 전달하면 등록해준다

<script>
document.getElementById("id").addEventListener("click", openAlert, false);

function event(){
	alert("hello world!");
};
</script>

-  하나의 이벤트에 하나 이상의 핸들러 추가 가능

 

 

9. 브라우저 저장소

 

-  사용자 로컬에 데이터를 보관한다.

-  JS로 조작 가능

-  Cookie와의 차이 : 유효기간이 없으며, 가용 용량이 더 크다

-  key - value pair로 저장된다.

 

-  localStorage에 데이터 저장하기

<script>
	function storage(){
    	localStorage.Data = "testData";
    	localStorage["Data"] = "testData";
    	localStorage.setItem("Data", "testData");
    };
</script>

 

-  localStorage의 데이터 획득하기

<script>
	function storage(){
    	var val = localStorage.Data;
    	var val = localStorage["Data"];
    	var val = localStorage.getItem("Data");
    };
</script>

 

-  localStorage의 데이터 삭제하기

<script>
	function storage(){
    	localStorage.removeItem("Data");
        //전체삭제
        localStorage.clear();
    };
</script>