복습

자바스크립트의 가장 중요한 점은 변수!
자바스크립트에도 버전이 있음.

• version :
  ES5
  ES6
  많은 부분이 5기반으로 이뤄져있음
  DOM을 할 때는 5와 6가 다른 점이 조금 있어서 5, 6의 다른 점도 배울 것.

변수 선언 방법

• ES5
  var 변수명 = 값;
  var 변수명;
  => 이렇게 할 경우 값이 안들어가서 undefined
  변수명 = 값;
  
  
• ES6
  let 변수명 = 값;
  const 상수명 = 값;
  => 상수라서 값 꼭 설정해놔야 함.

변수 종류

• 전역변수
  • function 외부에 선언한 모든 변수
  • function 내부에 선언한 "전역변수명=값" | "let 전역변수명=값"
    
    
• 지역변수(펑션내부에 var 붙어있는거)
  • function 내부에 선언한 "var 지역변수명" | "let 지역변수명"

내장객체

• 객체 구성 : 속성(property), 메서드(operation), event handler

• tree 구조
  //괄호안에 있는건 내장객체

  • Window(window) :최상위객체, window 생략 가능

  • Document(document)
    => document.write("body tag 내부에 올 수 있는 모든 것 - 동적화면구성가능");

  • Form : <form action="" method="" name="폼이름" id="form-id-name">
    => 입력항목 name="" id="" : <input type="text" name="" id="입력항목-id-name">
    name 은 서버에 전달하는 키 역할
    id는 dom/js에서 lookup하기 위한 속성
    문서에 있는 태그들을 오브젝트해주는 api를 dom이라고 하는 것.
    식별하기 위해서 name이라는 속성도 쓰고 id란 속성도 쓴다.
    하나의 문서에 여러개 폼이 올 수 있고 폼 안에 여러개 입력 항목이 올 수 있고, 계층적인 구조를 갖고 있다.
    하나 안에 여러개 폼이 있으면 식별하기 위해 name이라는 속성을 사용하는 것. id도 식별하는 속성이라 보통 name과 id의 이름을 같게 함.
    

  • Image

  • Location(location)

  • ....

내장함수

• Window(window)의 내장함수

• alert() : 확인 선택, 뭔가 반드시 확인해야 할 때 경고창 띄우는 것

• confirm() : 확인, 취소 선택

• prompt() : 사용자의 입력데이터를 가져올 수 있는 것

• isNaN() : 숫자데이터가 아니면 true 반환

• parseInt() : 정수형으로 변환

• parseFloat() : 실수형으로 변환

• eval() : 문자형 형식의 수식을 수식으로 변환, json 객체 변환
  

타입체킹

• typeof 데이터

• typeof (데이터)
  
  

사용자 정의 함수

• 모듈화 개념의 함수

• 생성자 함수(Host Object / User Object)

• 익명항수(이름이 없는 함수 : anonymous function => event handling)

• 선언방법 :
  반환타입없음-> function 함수명([arg1, arg2, argx]){
  반환타입따로없음
  [return;][return value;]
  }

• 호출방법 :
  함수명();
  함수명(data1, datax)
  변수명 = 함수명();
  
  

자바스크립트 선언방법

1. 내부파일

     <script type="text/javascript">
       // 코드 작성
     </script>
     

2. 외부파일

     <script type="text/javascript" src="외부파일.js"></script>
   => 외부파일이 정상 연결됐는지 확인 먼저 해보기 
     : 외부파일.js
     alert("외부파일.js 로드")

---

오늘 배울 내용

• 내장 객체 : Array
• Host Object(User Object) : 사용자 정의객체
• DOM(Document Object Model) :
• 문서(html) tag, attribute(element, node) 객체화 시켜서 접근 API
• Event Handling
  
  

내장 객체 : Array

• 다형성(어떤거든 담을 수 있다), 자동확장
• 생성방법 :

1. JS Array 객체 사용하여 배열 생성하는 방법
   var array = new Array();
   var array = new Array(length); // 배열의 크기를 지정할 수도 있음
   var array = new Array(1, 2, 10, 100, "hello", new Date());
   

2. JSON(JavaScript Object Notation)표기법으로 배열 생성하는 방법
(자바로 생각하면 map과 같음)
var array = [value1, valuex];
- 배열요소 접근 :
배열명[index] (인덱스번호를 통해 접근)
index 시작 : 0번 부터 시작

- 배열크기 : 배열명.length

함수명 등 이름 지정시 주의사항

• 사용자 정의 함수명과 내장함수명 동일한 경우 (충돌문제)
  
  

Host Object(User Object) : 사용자 정의객체

• this : 현재 객체를 지칭하는 참조변수, 자동 생성 제공
  
• 클래스 구성요소 : 멤버변수(속성), 메서드(기능)
• 패키지 선언방법
  - top패키지명 = {}
  - top패키지명.sub패키지명 = {}
• 사용자 객체 정의 방법
  - 클래스이름 : 대문자시작
  

1. function 클래스이름(매개변수명1, 매개변수명x) {
   // 1-1) 멤버변수 선언 및 초기화 수행
   this.멤버변수명1 = 매개변수명1;
   this.멤버변수명x = 매개변수명x;

   // 1-2) 멤버메서드를 바인딩(연결 선언) (주의사항.바인딩메서드명만 표기해야함. 즉, 멤버메서드명(); 이렇게 하면 안됨)
   this.멤버메서드명 = 멤버메서드명;
   this.set멤버변수명1 = set멤버변수명1;
   }
   
   
   멤버메서드 선언 방법
   // 1-2) 멤버메서드 함수 선언 : 클래스와 바인딩이 되면 클래스의 멤버변수를 this로 접근 가능
   function toString() {
   return this.멤버변수명1 + ", " + this.멤버변수명x;
   }
   function set멤버변수명1(매개변수1) {
   this. set멤버변수명1 = 매개변수명1;
   }

   // 1-3) prototype 속성 이용해서 함수 선언 : 클래스에 멤버메서드 바인딩 별도로 하지 않아도 됨

• 형식 : 클래스명.prototype.멤버메서드명 = function() { // 메서드 수행문 } // 1-4) prototype + JSON 형식을 이용한 멤버메서드 선언 방법, 다중 메서드 선언시 편리함.
  - JSON 기본형식 : {key1:value, key2:value}
  - 형식 : 클래스명.prototype = {
  멤버메서드명: function(매개변수명) { // 수행문 },
  멤버메서드명: function(매개변수명) { // 수행문 },
  멤버메서드명: function(매개변수명) { // 수행문 }
  }
  
  

DOM(Document Object Model) API

• ML(Markup Language)
  - html
  - xml
• element 형식
  1. <tag attr="value" >body contents</tag>
  2. <tag attr="value" />
• Node
  - Element
  - Attr
  - Text
  - NodeList
  
  

DOM 객체 가져오기

• ES5 기반
  • id 이용방법 :
    => document.getElementById("id-name");
    => 반환타입이 Node
    
  • class 이용방법
    => document.getElementsByClassName("class-name");
    => 반환타입이 NodeList (Array, 배열인 것임)
    
  • tag 이용방법
    => document.getElementsByTagName("Tag-name");
    => 반환타입이 NodeList (Array, 배열인 것임)
    
    

Element 주요 속성

• innerHTML
  - set 변경 : element 내부에 있는 내용을 변경
  • get : html 조회
    
• innerText
  - set : element 내부에 있는 plain-text
  - get :
  
  

이벤트 처리

1. Event : 울고 있을 때, 졸고 있을 때
   • 버튼 클릭했을 때, 이미지에 마우스가 갔을 때, 윈도우가 로드 됐을 때
   • click, hover, load, ...
     
2. Event Source : 김기범, 김민수
   • 버튼(Button), 이미지(Image), 윈도우(Window), ...
     
3. Event Handler : 왜우냐... 왜그래.. 처리, 자라.. 야.. 일어나
   - on이벤트
   - //여기서 함수는 onClick했을때 수행할 함수
   - onClick=function() { // 수행문; } //이런식으로 ..
   
   

Form 객체 DOM 가져오기

• name 이용방법
  • document.폼이름;
  • var formElement = document.sampleForm;
    
• id 이용방법
  • document.getElementById("폼id명");
  • var formElement = document.getElementById("sampleForm");
    
• 예시 :
  <form name="sampleForm" id="sampleForm"></form>
  
  

Form 객체의 입력항목 DOM 가져오기

• name 이용방법

  • document.폼이름.입력항목;
  • var inputElement = document.sampleForm.memberId;
  • 입력데이터 가져오기 : inputElement.value;

• id 이용방법

  • var inputElement = document.getElementById("sampleForm");
  • 입력데이터 가져오기 : inputElement.value;

• 예시 :
  <form name="sampleForm" id="sampleForm">
<input type="text" name="memberId" id="memberId">
</form>
  
  
  

엘리먼트 스타일 적용하기

1. style 이용방법
   • 엘리먼트객체,style.propertyName = "new-value";
   • propertyName 지정하는 규칙
     => 단일언어는 그대로 사용 : color, width, height...
     => 합성어는 소문자+대문자시작 : background-color -> backgroundColor
     
2. css에 선언해두고, class 이용방법
   • 엘리먼트객체.className = "new-class-name new-class-name2"
     예시)
     <h1 class='title color bold'>