HTML에서 javascript 로드하기

inline

inline 방식은 태그에서 직접 자바스크립트를 기술하는 방식으로 정보와 제어가 섞이게 된다.

script

태그를 만들어 자바스크립트를 삽입하는 방식 : 정보와 제어를 분리

javascript를 외부 파일로 분리

• script파일은 브라우저에 의해서 캐쉬되기가 쉽다 -> 데이터를 줄인다

script 파일의 위치

script파일은 어디에 위치시키는 것이 좋은가 ?
순차적으로 body태그 끝에 script를 위치시키는 것이 더 바람직 하다

• head에 위치시키게 되면 스크립트를 모두 읽어 들일때 까지 웹브라우저는 기다리게 됨으로 사용자입장에서는 늦어지는 것으로 느끼게 된다
• 브라우저의 모든 element를 읽어 들이고 script를 바인딩 함으로 onload를 사용할 필요가 없다

  var hw = document.getElementById('hw');
  hw.addEventListener('click', function(){
      alert('Hello world');
    })

window 전역객체의 onload를 설정 : 페이지를 모두 읽어들인 후 할당된 function을 실행 한다

Object Model

웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.

• DOM(Document Object Model): 문서를 제어하는 중요한 객체
• BOM(Browser Object Model): 브라우저를 조작 하는 객체
• javascript Core

BOM(Browser Object Model)

전역객체 Window

모든 객체들은 window의 객체에 소속되어 있다

사용자와 커뮤니케이션 하기

• alert : 경고창을 띄우고 이후 응답을 할때 까지 대기를 한다
• confirm : 사용자가 확인(true), 취소(false)를 리턴한다
• prompt : 입력창을 띄운다. 사용자가 입력한 값을 리턴한다.

Location 객체 URL관리

현재 윈도우의 URL 알아내기

• location.toString
• locaiton.href : 좀 더 선호하는 방식

URL Parsing

• locaiton.protocol
• location.host
• location.port
• locaiton.pathname
• locaiton.search
• locaiton.hash

URL 변경하기

• location.href 의 값을 바꾸고 싶은 url로 할당하면 해당 페이지로 이동 한다
• location.reload : 현재 페이지를 다시 읽어들인다

Navigator 객체

• 브라우저의 정보를 제공하는 객체

• 브라우저의 특성에 맞게 대응해야 할때 사용: 오래된 브라우저를 위해서

• appName
• appVersion
• userAgent : 브라우저가 서버측에 전송하는 USER-AGENT HTTP 헤더의 내용
• platform : 브라우저가 동작하는 운영체제

기능 테스트

기능을 지원하는 지 테스트 하는 것이다. 해당 기능이 없다면 false를 리턴 한다
해당 기능 테스트를 통해 해당 기능을 지원하지 않는다면 사용자정의 함수로 해당 기능을 지원하도록 한다

창 제어

window.open : window.open(html파일)

• 두번째 인자 : 창의 이름
• _self : 현재창을 새로운 페이지로 이동 <a>태그와 동일한 효과
• _blank : 파일이름이 창의 이름이 된다
• 창의 이름 : 이후 창을 열때마다 앞에 열렸던 창이 바뀐다
• window.close

새 창의 접근

window함수를 실행 후 리턴하는 값을 객체로 받아 이 객체를 통해서 새 창을 조작 한다
보안 상의 이유로 실제 서버에서만 동작하고, 같은 도메인의 창에 대해서만 조작이 가능 하다

팝업 차단

보안
사용자의 명시적 행동에 의해서 window.open()을 할때에만 팝업 차단이 안되고 열릴 수 있다. 스크립트 안에서의 window.open은 팝업 차단이 된다

객체 지향 프로그래밍

• 객체란 : 성격이 비슷한 기능과 상태를 묶어놓은 것으로 재활용이 가능하게 한것이다.

문법과 설계

• 문법

• 설계 : 추상화 -> 현실의 복잡함을 관심사만 골라내어 단순화 시키는 것

• 부품화 : 재활용성, javascript의 method

• 은닉화, 캡슐화 : 사용자에게 안쪽을 감추고 사용법만 노출하여 사용하도록 한다.

• 인터페이스 : 설계시 규격을 만들어 규격에 맞으면 부품을 바꾸어 쓸수 있게 하는 것

생성자와 new

객체

prototype-based Programming
객체 만들기

  var o1 = {};
  o1.name = 'no_name';
  o1.introduce = function() {return name;}

  var o2 = {
    'name' : 'no_name',
    'introduce' : function() {
      return 'My name is '+name;
    }
  }

생성자

생성자 : 객체를 만드는 역할을 하는 함수

  function Person() {}
  var p = new Person();

java는 class 내에 생성자가 있다. 그러나 javascript는 함수만 존재한다. 생성자를 통해서 객체를 초기화 하고 만든다

  function Person(name) {
    this.name = name;
    this.introduce = function() {
      return 'My name is ' + this.name;
    }
  }

  var p = new Person('no_name');

전역객체

전역객체(Global Object)는 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티이다.
전역객체에 모든 객체들은 프로퍼티이다 웹브라우저 기반의 javascript는 window가 전역객체이다.
node.js 기반은 Global이 전역객체이다.

this

함수 안에서 사용되는 약속된 변수이며 값은 함수를 어떻게 호출하였느냐에 따라 달라진다.

메소드의 호출

this는 함수를 호출한 객체를 가르킨다.

생성자의 호출

생성자 안에서의 this는 생성자를 통해서 만든 객체를 가르킨다.

apply, call

함수 리터럴 : 생성자를 통해서 함수를 만드는 것은 불편함으로 함수를 간단하게 만드는 문법

  var sum = new Function('x','y','return x+y;');

• function은 객체로 다른 객체에 유연하게 붙여서 사용할 수 있다
• this는 apply를 통해서 호출하는 객체를 가르킨다.

상속(inheritance)

자식의 객체는 부모의 객체를 재활용 하면서 추가 기능이나 기존 기능을 수정하여 사용한다.

prototype : 상속하거나 받고자 하는 객체를 할당한다

prototype(원형)

function에 new를 붙이면 객체를 반환하는 생성자가 된다.
객체를 만들 때 그 객체가 가지고 있어야 하는 method 혹은 property 를 가질수 있도록 하기위해 생성자를 사용 한다. 객체의 원형 prototype는 java의 class와 같은 느낌이다. 즉 붕어빵 틀…

prototype chain : 각 함수의 prototype으로 연결되어 속성을 이어진것 해당 객체에 찾는 값이 없다면 해당 객체의 생성자의 prototype에서 찾게 된다.

주의 : 객채를 상속할 때 prototype에는 상속받고자하는 객체의 생성자로 new를 붙여 객체를 붙여 넣는다

표준 내장 객체의 확장

standard Built-in Object : 자바스크립트가 기본적으로 가지고 있는 객체

• Object
• Function
• Array
• String
• Boolean
• Number
• Math
• Date
• RegExp

표준 내장 객체 + 호스트환경 객체 + 사용자정의 객체

배열의 확장

내장 객체의 확장 : 내장객체의 prototype에 새로운 기능 function을 추가한다.

랜덤 값 얻기

  Math.floor((Math.random() * (얻고자하는값의 범위)))

floor 최대정수 반환

Object

Object 객체 : 아무것도 상속받지 않은 순수한 객체. 기본적인 저장단위

• 모든 객체는 Object를 상속받는다
• Object.method : Object.method 형태로 사용

• Object.prototype.method : 생성된 객체에서 사용, 모든 객체들이 상속받은 공통의 method

• Object 객체의 기능 확장 : Object의 prototype에 function을 추가한다

• Object 객체의 기능 확장의 위험성 : Object 객체를 확장하게 되면 모든 객체에 영향을 미친다

• o.hasOwnProperty(name) : 상속받은 property가 아닌 직접 정의된 property를 체크하는 함수

데이터 타입

원시 데이터 타입 과 객체 데이터 타입

원시 데이터 타입

• 숫자 -> Number
• 문자열 -> String
• 불리언 -> Boolean
• null -> X
• undefined -> X

레퍼 객체

’.’ : Object access Operator

wrapper Object : 원시데이터 타입을 객체로 감싸는 역할을 하는 객체 자동 객체화

  var str = 'coding';
  str.prop = 'everybody';
  console.log(str.prop); // undefined

참조

복제

전자화된 시스템에서 복제는 현실에서의 복사보다 비용이 적게 발생 한다.
값 자체를 동일하게 메모리에 할당하는 것

참조

복제와 참조의 차이점 : 참조는 윈도우의 바로가기의 개념과 비슷하다.
객체값을 가리키는 변수를 다른 변수에 할당하게 되면 해당 변수도 그 객체를 가리키게된다.

함수와 참조

함수에 원시데이터를 넘겼을 때 : 함수내에서 해당 값을 변경해도 영향이 없다
함수에 객체를 넘겼을 때 : 함수 안에서 넘겨받은 객체의 property 값을 변경하게 되면 객체의 값도 변경되게 된다

함수지향

유효범위

• 전역변수 와 지역변수의 차이점
  • 전역변수 : 함수 밖에서 선언된 변수, 해당 코드 전역에서 접근이 가능하다.
  • 지역변수 : 함수 안에서 선언된 변수, 선언된 함수 내에서만 접근이 가능하다.

    • 지역변수 : let 으로 선언
    • 상수 : const 로 선언

전역변수의 사용

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.
익명함수 : 모듈화 기법으로 자주 사용됨.

유효범위 대상(함수)

자바스크립트는 함수에 대한 유효범위만을 제공한다.
함수안에서 선언한 변수만이 지역 변수이다.

정적 유효범위

자바스크립트는 함수거 선언된 시점에서의 유효범위를 갖는다.
-> 사용(호출)될 때가 아닌 정의될 때의 전역변수에 접근하게 된다.

값으로서의 함수 first class citizen

• 변수에 저장할 수 있다.
• 다른함수의 인자로도 전달될 수 있다.
• 함수의 리턴값으로도 사용할 수 있다.
• 배열에 저장할 수 있다.

콜백

인자로 받은 함수에 따라 함수의 동작이 변경되는 것을 콜백이라고 한다.
내장 객체 vs 사용자정의 객체

• 처리의 위임
• 비동기 처리

Ajax(asynchronous javascript and xml)

클로저

내부함수가 외부함수의 context에 접근할 수 있는 것

내부함수

• 함수 안에 함수를 선언하면 응집성이 높아진다
• 내부 함수는 외부함수의 지역변수에 접근할 수 있다.
• 외부 함수의 실행이 끝나도 내부함수는 외부함수의 변수에 접근할 수 있다.
• class와 비슷하게 만들어 객체가 private 값 을 가질 수 있도록 한다.
• 외부함수는 class 처럼 내부함수는 method로 동작한다.
• 변수에 외부 함수에서 리턴하는 내부함수를 담은 객체를 담는다.
• 내부함수를 객체에 저장하고 다시 재정의 하면 재정의 된 값들은 앞에서 저장된 내부변수에 영향을 미치지 않는다.
  -> function이 객체로 각각 메모리에 저장됨으로 추측된다.

arguments

• 매개변수 : parameter 선언할 때
• 인자 : argument 실제 호출되어 넘겨지는 값
• arguments : javascript에서 지정된 유사배열의 값으로 사용자들이 전달한 인자값

매개변수의 수

• arguments.length : 실제 전달받은 인자의 수
• 함수.length : 선언시 인자의 수
• 활용 : 두 length를 비교하여 다를때 의도하지 않은 입력임으로 에러나 경고를 띄운다.

함수의 호출

javascript에서 함수는 일종의 객체이다. 함수 호출 방법

• func()
• func.call
• func.apply : native code (브라우저의 내장된 코드이므로 보여줄 수 없다)

  func.apply(null, [1,2]);
  
  function sum() {
    var _sum = 0;
    for(name in this) { //여기서 this는 apply에서 전달받는 객체이다
      _sum += this[name];
    }
    return _sum;
  }
  
  var o1={v1:10, v2:20, v3:30};
  sum.apply(o1); // -> o1.sum
  

  javascript에서의 함수는 독립적인 객체로 apply이나 call을 통해서 다른 객체에 붙여서 사용할 수 있다.

javascript의 실행 환경

• 웹브라우저
• node.js
• 구글 스프레드시트

typeof 객체 : 데이터 타입 왜 데이터 타입을 숫자와 문자로만 설명했을 까 ?
-> javascript의 데이터 타입 찾아보기

문자열.length() : 문자열 길이
문자열.indexof(“문자”) : 문자열에서의 문자 위치

변수
변수 선언 : var 변수명

주석 :

  // 한줄 주석
  /*
    여러줄 주석
  */

조건문

비교 연산자
== : 동등 연산자 타입이 아닌 의미하는 값이 같다면 같다고 취급한다
=== : 일치 연산자 데이터 타입까지 엄격히 검사한다

prompt : 입력창을 띄움 브라우저 환경

논리연산자

• && : AND
• || : OR

boolean 대체제

• ’’ : 빈문자열은 false
• 0 : false
• undefined : false
• null : false
• NaN : false

반복문(loop / iterate)

• while : 조건문이 false가 될때까지 반복

  while(조건문) {
  반복 실행 코드
  }
  

• for

  for() {
  
  }
  

i++ 과 ++i의 차이점 : i++은 해당 라인을 실행 후 덧셈 연산이 일어난다. ++i는 먼저 덧셈연산이 일어나고 해당 라인이 실행된다.

break와 continue

break : 해당 반복문을 중단하고 반복문을 탈출한다.
continue : continue 이후 명령라인을 실행하지 않고 반복문 윗쪽으로가서 반복문을 실행한다.

함수 (function)

함수는 재사용성을 올려준다.
javascript는 함수지향 언어이다.

function 함수명() {
  return ;
}

입력과 출력 :
argument와 parameter의 차이점은 ?

• 매개변수 : parameter
• 인자 : argument 전달되는 값 자체

익명 함수 : 정의와 호출을 같이 한다. 일회성 호출을 위해서 사용한다.

(function () {

})();

배열

연관된 데이터를 모아서 통으로 관리하기 위한 데이터 타입니다.
index는 0부터 시작 한다.

  var test = ["test1", "test2", "test3"];

배열 조작

• 추가 : 배열.push(입력값);
• 여러개의 값을 입력할때 : 배열.concat(배열);
• 배열 앞쪽에 값을 추가하고 싶을 때 : 배열.unshift(입력값);
• 배열 중간에 값을 추가하고 싶을 때 : 배열.splice(index, howmany, 입력값, 입력값…);
• 제일 앞의 값을 제거 : 배열.shift();
• 제일 뒤의 값을 제거 : 배열.pop();
• 정렬
  • 배열.reverse();
  • 배열.sort();

객체(Object)

데이터를 담아내는 그릇

  Object {키: 값, 키: 값, 키: 값}
  var test = {};
  var test1 = new Object();
  오브젝트.키
  오브젝트[키]

객체조작

반복문

 for(key in 배열) {
   key , 배열[key]
 }

this : 함수가 속해있는 객체

모듈

자주 사용되는 코드를 별도의 파일로 분리 재 사용성을 높임
필요한 로직만을 로드해서 메모리 낭비를 줄일 수 있다
다운로드된 모듈을 다른곳에서 사용할 수 있어 네트워크 트래픽을 줄일 수 있다.

note: 기본적으로 javascript의 변수는 전역변수 이다. 전역변수임을 방지하기 위해서 클로저를 사용한다. 왜 클로저가 필요할 까 ? 모듈화를 만들게 되면 다른 사람의 모듈도 가져다 사용할 수 있다. 그럼으로 변수의 중복이 발생하여 버그를 발생할 수 있다. 이를 방지하기 위해서 클로저를 사용한다.

모듈화

<script src="xxxx.js"></script>

라이브러리

UI와 API 그리고 문서보는 법

API : Application Programming Interface

레퍼런스와 튜토리얼

• 자바스크립트 자체의 API:
  • ecma 레퍼런스
• 자바스크립트가 동작하는 호스트환경의 API

정규표현식

생활코딩-정규표현식

컴파일

• 정규표현식 리터럴

  var pattern = /a/;
  

• 정규표현식 객체 생성자

  var pattern = new RegExp('a');
  

• 정규표현식의 작업들 : 추출, 치환, 테스트
• 정규표현식 메소드 실행
  • RegExp.exec(); 패턴에 맞는 문자열을 추출
  • RegExp.test(); 찾는 패턴이 있다면 true, 없다면 false
• 문자열 메소드 실행
  • match(pattern) : 추출
  • replace(pattern, ‘치환하고자하는 문자’) : 치환
• 옵션
  • i : 대소문자를 구분하지 않는다.

    var pattern = /a/i;
    

  • g : 검색된 모든 결과를 리턴한다.

    var patter = /a/g;
    

• 캡처 : 그룹을 지정하고 그룹을 가져와 사용하는 것을 캡쳐라 한다.

  var pattern = /(\w+)\s(\w+)/;
  var str = "coding everybody";
  var result = str.replace(pattern, "$2, $1");
  

• 치환

CSS 소개

HTML에서 디자인 요소를 분리하여 CSS에 담음

스타일을 적용하는 방법

1. inlien 방식

    <h1 sytle="color:red">Hello World</h1>
   

2. sytle 태그 사용

    <style>
        h2 {
            color: red;
        }
    </style>
   

3. css 파일 : .css 파일로 디자인 요소를 분리하여 재사용성을 높임

선택자

선택자와 선언

• 선택자 : 스타일을 꾸밀 대상
• 선언 : 선택자를 어떻게 꾸밀것인가 속성을 정의

선택자의 종류

• 태그 선택자 : HTML 태그 {}
• 아이디 선택자 : #아이디 {}
• 클래스 선택자 : .클래스이름 {}
  아이디는 중복을 허용하지 않음으로 동일한 효과를 주어야 하는 경우 class로 부여하여 사용한다.

    <sytle>
        #id{
            font-size = 10px;
        }
    </style>
  

부모 자식 선택자

• 부모 > 자식 : 으로 하면 해당 선택자의 바로 밑의 자식 선택자에 해당하는 것만 적용이 된다.
• 선택자, 선택자 : 동일한 효과를 줘야하는 선택자들이 있을 경우 위와 같이 ‘,’ 로 구분 하여 작성한다.

가상 클래스 선택자

javascript 에서도 선택자(select)를 기반으로 제어의 대상을 결정한다.

fontsize

• rem : 사용자가 웹브라우저 설정에서 폰트 크기를 변경할 수 있다

color

• color : 색상 이름
• RGB (Red, Green, Blue)
• HEX : 16진수로 표현

text-align

• center
• right , left
• justify : 텍스트가 많을 경우 양쪽에 균등하게 분배

font

• font-family : 폰트를 ,로 구분하여 여러개를 적으면 폰트가 없을 경우 다음 폰- 들을 표현해 준다.
  • serif : 장식이 있는 영문 폰트
  • sans serif : 장식이 없는 영문 폰트
  • monospace : 고정폭 폰트
• font-weight : bold
• line-height : 줄간격 숫자를 넣으면 몇배의 의미
• font : 한번에 여러 속성을 줄

    font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
  

웹폰트

참고 : Lorem ipsum : 의미없는 text