Javascript Basic

자바스크립트 언어는 스크립트 언어로 컴파일 없이 인터프리터로 바로 실행하는 HTML 내장 코드다.

 

서버에서 HTML, CSS, JS 는 text로 브라우저에 넘기면

브라우저에서 parsing, rendering 한다.

브라우저는 동기적으로 HTML, CSS, JS를 처리하므로 script 태그의 위치에 따라 DOM 생성이 지연될 수 잇다. 

>> DOM트리가 우선 생성되게 하기 위해 script 태그를 가장 아래 위치하는게 좋다. 

    중간에 script를 만나면 HTML 파싱도 지연되어 사용자 경험이 좋지 않다. 

 

javascript object properties

M= function property

 

자바스크립트의 기능

- 웹 페이지 내용 및 모양의 동적 제어

- 브라우저 제어

- 웹 서버와의 통신

- 웹 애플리케이션 작성 

 

자바스크립트 코드 작성이 가능한 위치

- HTML 태그의 이벤트 리스너 속성에 작성  (inline방식)

     *a 태그의 경우 "javascript:" 접두어를 붙여주어야 한다.*

<a href="javascript:join_form_validation_button();">가입</a>

- <script> 태그에 작성 (head와 body안에 작성가능)

 

- 자바스크립트 파일에 작성

   js 파일을 포함하는 script태그 안에 javascript 코드를 기술하면 실행 안됨.

<script type="text/javascript" src="js/common.js"></script>

- URL 부분에 작성

 

 

 

 

변수선언

- 숫자형, 논리형, 문자열 리터럴을 가진다. 

- 타입은 구분하지 않고 let, var 예약어를 사용한다. 

- let, var 예약어 없이도 선언할 수 있다. 

- javascript의 property는 동적으로 생성 가능 

- var로 변수 선언시 자동으로 window객체의 멤버 변수로 등록

- let으로 선언하면 window에 선언되지 않아 window에서 변수를 찾으면 undefined

 

상수선언

- const 예약어 사용 

- 한번 선언하면 값을 바꿀 수 없다. 

 

 

지역 변수와 전역 변수의 이름을 같을 때

 전역 변수에 접근하고자 할 때 : this.전역변수

var x; // 전역변수

 

function f() {

 

var x; // 지역변수

 

x = 1; // 지역변수 x에 1 저장

 

this.x = 100; // 전역변수 x에 100 저장

 

}

 

자바스크립트 함수 - window 객체에 소속된 함수가 된다.

function name(param,params) {

var a;

return a;

}

 

자바스크립트엔 OVERLOADING의 개념이 없어 

파라메타를 다르게 해도 함수 이름이 같으면 나중에 정의한 함수로 덮어진다.

 

 

 

자바스크립트 전역 함수

eval(exp) : exp의 자바스크립트 식을 계산하고 결과값을 반환 

parseInt(str) : 문자열을 정수로 반환

parseInt(str,radix) : 문자열을 radix진수로 해석하고 10진 정수로 반환

parseFloat(str) : 문자열을 실수로 반환

isFinite(value) : value가 숫자이면 true 반환

isNaN(value) : value가 숫자가 아니면 true 반

 

자바스크립트 객체 

 

구성

자바스크립트에서 객체는 프로퍼티 Properties로 구성된다. 

프로퍼티는 attribute와 function 프로퍼티가 있는데 

attribute는 자바의 변수, function은 자바의 메소드와 비슷하다. 

 

종류

코어객체

- 자바스크립트가 사용한 곳 어디서나 사용가능한 객체로 Array, Date, String, Math 등이 있다.

- new 키워드를 사용해 생성 가능하고 객체의 프로퍼티들에 접근 가능

   

  ㅁ Array

 배열 생성 

 var nums = [ 1, 1, 2, 3];

 var strs = [ '12f', '24', 'afs' ];

  nums[0] = 1; // 0번 인덱스부터 시작

  nums[3] = 3; //nums.length = 4

  nums[6] = 1; // nums 배열의 6번 인덱스를 추가한다. // nums.length=7

   //배열의 길이는 고정적이지 않고 원소 추가시 늘어난다. 

   //4번, 5번 인덱스를 건너띄고 6번 인덱스를 생성하면 4, 5번 인덱스는 undefined가 된다. 

 

 new Array(); //빈 배열 생성 

 new Array( 1, "2번" ); // 다양한 타입의 원소를 저장할 수 있다. 

// 마찬가지로 원소 추가시 증가 

 

배열의 길이는 사용자가 임의로 조정할 수 있고 기존의 길이보다 작은 길이로 초기화 하면 그 길이만큼의 

원소만 남고 나머지 원소는 삭제된다.

 

 ㅁDate

 new Date() : 현재시간 

 new Date(2021/01/30).getDate() : 30

 

 ㅁString

var str = new String("String 객체는 한번 생성되면 변경 불가")

String properties?

length, charAt(), replace(), slice(), concat(), split()

 str[0] == "S" //str 문자열을 배열로 보아 0번째 인덱스인 "S"문자열을 가져올 수 있다. 

 

// ==연산자는 값이 같을 때 true반환

// === 연산자는 값과 타입이 같을 때 true 반환

 

 

 

HTML DOM객체

- HTML 태그들을 객체화 한 것으로 HTML 문서의 내용과 모양을 제어하기 위한 목적

- 태그의 포함관계에 따라 부모자식 관계를 갖는 DOM 트리 생성하고 트리의 하나의 객체를 노드라고 한다.  

- 태그 하나당 DOM 객체 생성

- 트리의 ROOT 노드는 document

 

브라우저의 HTML rendering과정

- 브라우가 document 생성 -> HTML 태그를 읽고 DOM 트리에 객체 생성 , 화면에 출력 -> HTML 문서 로딩이 완료되면(</html>를 만나면 ) DOM 트리 완성 

- DOM 객체 변경시 브라우저는 해당 HTML 태그의 출력 모양을 바로 갱신 

 

<h1 name="header" style="color: aliceblue;" onclick="this.style.color='orange'">javascript core object[String]</h1><hr>

HTML 태그 요소 

<태그이름 속성="value" CSS="value" eventListener="value">콘텐츠 innerHTML(자식 포함)</태그이름>

 

DOM객체 활용하기 

 

document.getElementById("header");  // 고유 id로 찾은 객체는 하나

 

중복 가능한 속성으로 검색하여 배열로 반환

document.getElementsByName("header"); 

document.getElementsByTagName("h1"); 

document.getElementsByClass("h1"); 

 

++form태그에 접근하는 방법

document.formname  //form태그에 부여한 name

document.forms[0] //해당 document에 있는 form 태그 배열의 인덱스

 

submit function 만들기 

document.loginForm.method='GET';

document.loginForm.action='login_ultra_action.jsp';

document.loginForm.submit();

 

 

.innerHTML = "갱신할 HTML";

 

.focus(); 

 

현재 페이지를 지우고 다시 열고 닫기

document.open(); 

document.close();

새 창을 열고 닫

window.open();

window.close();

 

DOM 객체 동적 생성 

var pE=document.createElement("p");

pE.setAttribute("id","pId");

 

DOM 객체 삽입 

parentE.appendChild(pE); //parentE의 자식 객체의 마지막 노드로 삽입 

parentE.insertBefore(pE,pe); //parentE의 자식 객체인 pe의 앞에 삽

DOM 객체 삭제

parentE.removeChild(pE); 자식객체 삭제

 

 

 

BOM객체

- 브라우저를 제어하기 위한 객체 

- 브라우저마다 다르고 국제 표준이 없다.

 

공통 BOM 객체 

- window : 브라우저 윈도우 모양 제어

   브라우저가 새로운 웹 페이지 로드할 때 

   iframe 태그 하나당 하나의 window 객체 

   window.open("url"[,"windowName",  "style"] );

    windowName =>  _parent(부모페이지에 로드), _self(현재 윈도우에 로드)

                                 이미 동일한 이름이 있는 경우 동일한 이름의 윈도우에서 웹 페이지 로드

  window 객체 함수 

    setTimeout("code",time) / clearTimeout()

   - setTimeout() :      time 이후에 "code" 실행 

   - clearTimeout(setTimeout) : timeout 이전에 clearTimeout()을 만나면 해제 

 

    setInterval() / clearInterval() 

   - setInterval("code", time) :      time 이후에 "code" 실행하는 것을 반

   - clearInterval(setInterval) : setInterval()을 해제 

    

    moveBy( x,y )

    resizeBy( x, y )

    scrollBy( x, y )

    scrollTo( x, y )

    print()

    onbeforeprint(), onafterprint() 인쇄 전후 활용 가능 

 

- navigation : 다양한 정보 제공

 

     appVersion : 브라우저 플랫폼과 버전

     userAgent : 브라우저가 웹 서버로 데이터를 전송할 때, http 헤더 속의 user-agent 필드에 저장하는 문자열

                      웹 서버가 클라이언트 인식하기 위

     language : 브라우저 언

     online : 현재 작동중인지 

     plugins : 설치된 플러그인 정보

     cookieEnabled : 쿠키 사용 가능 여부 

     geolocation : 위치 정보를 제공

 

- history : 브라우저 윈도우에 로드한 url 리스트의 히스토리 관리

 

   length(히스토리 길이), back(), forward(), go(n)

 

- location : 브라우저 윈도에 로드된 html 페이지의 url 관리

 

   현재 윈도우에 새 페이지 열기

    window.location(.href) = "http://www.url.com";

    window.location.reload() //새로고침

    window.location.replace('new_page.jsp') //현재 페이지를 새로운 페이지로 대체

href = http(protocol):// [www.url.com(hostname):80(port)]host/search_view(pathName)/(#hash)

 

- screen : 스크린 장치 정보 제공 

 

 

 

 

 

 

사용자 객체 만들기 

 

1. 직접 

   - new Object() 

        var student = new Object();

        student.name = "이름";

        student.no = 1;

        student.toString = customFunction;

 

   - 리터럴 표기법

        var student = {

               name : "이름",

               no : 1,

               toString : function(){}

         };

 

2. 프로토타입 (자바의 클래스 역할)

     프로토타입 함수 (생성자 함수) 만들기

    function Student(name, no){

this.name = name;

this.no = no;

this.getNo = function(){return this.no;}

}

 

 

 

 

자바스크립트 template literal `

자바스크립트에서 `(backtick)을 사용하면

- 표현식을 사용해 자바스크립트의 변수를 사용할 수 있다.

- \n 없이도 줄바꿈이 된다. 

- '와 "를 자유롭게 사용할 수 있다. 

 

ex)

var a = '입니다.';

var b = `저는 '193' ${a}`;

   

 

 

 

 

참고 

https://www.w3.org/

W3C

https://developer.mozilla.org/

MDN Web Docs

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference

JavaScript 참고서 - JavaScript | MDN

 

 

 

 

http://www.w3schools.com/

W3Schools Online Web Tutorials