웹프로그래밍기초 기말

6장

Javascript

• 1995년 넷스케이프 개발
• Netscape Navigator 2.0 브라우저에 최초 탑재
• 웹 프로그래밍 개념 창시
• 특징 : HTML문서에 내장, 스크립트언어(인터프리터실행, 컴파일 필요X), 단순(C언어구조사용, 배우기쉬움)

 

자바스크립트의 역할

• 사용자의 입력 및 계산
• 웹 페이지 내용 및 모양의 동적제어
• 브라우저 제어
• 웹 서버와의 통신
• 웹 애플리케이션 작성

 

자바스크립트 코드의 위치

• HTML 태그의 이벤트 리스너 속성에 작성
• <script></script>태그에 작성(head나 body 내 어디든가능)
• 자바스크립트 파일에 작성
• URL부분에 작성

 

자바스크립트 HTML콘텐츠를 웹페이지에 직접삽입

• document.write()
• document.writeln() -> 줄바꿈이아니라 빈칸 하나 출력
• prompt는 취소 누르면 null , 입력없이 확인누르면 ""

 

 

• prompt : null은 취소버튼,닫기버튼. 

 

식별자

• 자바스크립트 프로그램의 변수, 상수(리터럴), 함수의 이름
• 식별자 만드는 규칙
  • 첫 번째 문자 : 알파벳(A-Z, a-z) ,언더스코어(_), $문자만 사용가능
  • 두 번재 이상 문자 : 알파벳, 언더스코어(_), 0~9, $ 사용가능
  • 대소문자는 구분되어 다루어짐(myhome과 myHome)
  • 자바스크립트 예약어 사용 불가(false, for, if, null 등)

주석문

• // 한라인주석
• /* 여러라인 주석 */

 

데이터타입

• 숫자타입 : 정수 실수
• 논리타입 : 참, 거짓(true,false)
• 문자열 타입
• 객체 레퍼런스 타입 : 객체를 가리킴
• null : 값이 없음을 표시하는 특수 키워드, Null, NULL과는 다름
• 특징 : 문자타입없음, 문자열로 표현

 

 

변수

 

this

• 지역변수와 전역변수의 이름이 같을 때
  
  • 전역변수에 접근하고자 할 때  : this.전역변수(var 만가능 let불가능)

 

 

let의 특징

• var를 사용할 때의 코딩오류(변수재선언)를 줄이기 위해

 

상수

• 변하지 않는 값을 가지는 이름, const로 선언
  • const MAX=10;
• 특징 
  • 선언된 후 값 수정 불가
  • 상수 재선언 불가
  • 블록 범위에서만 사용

 

 

리터럴

 

 

문자열 리터럴

• 이중 인용 부호("")와 단일 인용부호('')모두 사용
• 문자열 내에 문자열
  • <p onmouseover = "document.body.style.color = 'brown' ">
  • " 문자를 그대로 사용하고자 할 경우 \"로 사용할 것

 

 

비트논리연산

 

비트시프트연산

• << : 최하위 비트 0 으로
• >> : 최상위비트는 이전최상위비트로
• >>> : 최상위비트 항상 0

 

문자열연산

 

 

If-else

• prompt , parseInt 중요

 

switch문

 

 

자바스크립트 전역함수

• eval()함수 : 자바스크립트 식을 계산하고 결과리턴
• parseInt() : 문자열을 정수로
• isNaN(value) : value가 숫자가 아니면 true 리턴

구구단 출력함수

 

---

7장

자바스크립트 객체구성

• 여러개의 프로퍼티와 메소드로 구성
  • 프로퍼티 : 객체의 고유한 속성(변수)
  • 메소드 : 함수

 

자바스크립트 객체 종류

• 자바스크립트는 객체기반언어(객체지향언어아님)
• 브라우저가 제공하는 자바스크립트 객체들
  • 코어객체(퓨준객체) : Array, Date, String, Math 타입 등
  • HTML DOM 객체 
  • 브라우저 객체 

 

코어 객체

• 생성 : new 키워드 이용 
  • let today = new Date();
  • let msg = new String("Hello"); 
• 객체 접근 : 객체와 멤버 사이에 점(.)연산자 이용
  • obj.프로퍼티 = 값; // 객체 obj의 프로퍼티 값 변경
  • 변수 = obj.프로퍼티 //객체 obj의 프로퍼티 값 알아내기
  • obj.메소드(매개변수 값들); // 객체 obj의 메소드 호출

 

배열

• 여러개의 원소들을 연속적으로 저장, 전체를 하나의 단위로 다루는 데이터 구조
• 배열만드는 방법 : [] , Array 객체로 배열 만들기

 

Array로 배열만들기

 

배열의 원소 개수, length프로퍼티

 

 

배열의 특징

• 배열은 Array객체([]로 생성해도 Array객체로 다루어짐)
• 배열에 여러 타입의 데이터 섞여 저장 가능

 

Array 객체의 메소드 활용

• concat : 연결, join : 중간에 삽입, reverse : 거꾸로하는데 원본도 거꾸로, slice(a,b) : a인덱스부터 b-1인덱스까지 toString() : 원소 사이에 ","를 넣어 문자열 생성

 

Date객체

• 시간정보를 담는 객체 
• 현재 시간 정보 : let now = new Date(); // 현재 날짜와 시간(시,분,초)값으로 초기화된 객체 생성

 

 

 

String객체

• 문자열을 담기 위한 객체 
  • let hello = new String("Hello");
  • let hello = "Hello";
• String 객체는 일단 생성되면 수정 불가능

• 문자열 길이 .length 사용
• 문자열을 배열처럼 사용 : []연산자 사용하여 각 문자 접근
• String객체의 메소드
  • substr(a,b) : a부터시작해서 a+b까지 
  • trim() : 공백제거
  • split(" ") : 문자열을 " " 공백으로 자름 
  • String은 메소드 실행후 변함없는거 같음

 

Math객체

• 수학계산을 위한 프로퍼티와 메소드 제공
• new Math()로 객체를 생성하지 않음

 

객체만들기

• new Object()로 객체 만들기

 

 

• 리터럴 표기법 : 중괄호를 이용, 가장많이사용

 

프로토타입

• 객체의 모양을 가진 틀 
• Array, Date, String : 자바스크립트에서 제공하는 프로토타입
• 객체 생성시 'new 프로토타입' 이용
  • let week = new Array(7); //Array는 프로토타입임
  • let hello = new String("hello"); //String은 프로토타입임

---

8장

HTML DOM(간단히 DOM)

• 웹 페이지에 작성된 HTML 태그 당 객체(DOM 객체 생성)
• 목적 : HTML 태그가 출력된 모양이나 콘텐츠를 제어하기 위해 

 

DOM트리

• HTML태그의 포함관계에 따라 DOM 객체의 트리(tree)생성
• DOM트리는 부모 자식 관계

DOM객체

• DOM트리의 한 노드
• HTML 태그 당 하나의 DOM객체 생성

DOM트리의 특징

• DOM 트리 루트는 document 객체
• DOM 객체의 종류는 HTML 태그 종류만큼
• HTML 태그 당 DOM 객체가 하나씩 생성
• HTML 태그의 포함관계에 따라 DOM 트리의 부모자식관계

 

HTML태그

• 엘리먼트(element)로도 불림
• 5가지요소로구성 : 엘리먼트이름, 속성, css3스타일, 이벤트리스너, 콘텐츠

 

DOM객체의 구성요소

• 프로퍼티 : HTML 태그의 속성(attribute) 반영
• 메소드 : DOM객체의 멤버 함수로서, HTML 태그 제어 가능
• 컬렉션 : 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합적 정보
• 이벤트리스너 : HTML태그에 작성된 이벤트리스너 반영, 약 70여개의 이벤트리스너를 가질 수 있음
• CSS3 스타일 : HTML태그에 설정된 스타일 시트 정보를 반영

 

DOM객체다루기

 

this

 

document객체

 

document.write()와 document.writeln()

• HTML 페이지 로딩과정
  • 1: 브라우저는 HTML 페이지 로드 전 빈 상태 document 생성
  • 2: 브라우저는 HTML 페이지를 위에서 아래로 해석
  • 3: HTML 태그들은 document 객체에 담아간다(DOM 객체 생성)
  • 4:  </html>태그를 만나면 document 객체를 완성하고 닫는다. 

 

document의 열기와 닫기

• document.open() : 현재 브라우저에 출력된 HTML 콘텐츠를 지우고 새로운 HTML 페이지 시작. 
• document.close() : 현재 브라우저에 출력된 HTML 페이지 완성, 더 이상 document.write()할 수 없음

 

 

문서의동적구성

 

 

---