0_javascript_(이론)

JavaScript

@@Javascript 개요

@Script 언어란?

기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 사용되는 언어

매우 빠르게 배우고, 소스코드 길이가 짧다.

@javascript란?

웹 브라우저에서 많이 사용하는 인터프린터 방식의 객체지향 프로그래밍 언어

ECMA 스크립트 표준을 따르는 대표적인 웹 기술

@@자바스크립트 작성 방법

소스코드는 함수 단위로 작성하고, 이벤트 속성을 사용하여 구동되게함

이벤트 속성은 태그마다 차이가 있음

on이벤트명 = "실행할 함수명([전달값])"

@internal 방식@

script 태그 영역에 작성해서 실행되게 하는 방식

head, body태그에 작성 가능

@external 방식@

별도의 js파일로 코드를 작성하여 가져다 사용하는 방법

@@데이터 입출력@@

#script 태그에 type 생략시 기본값으로 type="text/javascript"

#문자열 비교는 == 으로함

#자바스크립트 반복문

for(var i in list){

}

인덱스값을 가져옴

#.checked : 체크된거접근

~~~~~~~~~~~~~~~~출력~~~~~~~~~~~~`~~

@window.alter()

경고창으로 데이터 출력

# script 태그의 내용이 fuction으로 감싸져 있지 않으면 html 페이지 로딩 과정에서 실행됨

@document.write()

html 문서에 출력

#html 문서가 완전히 로드 된 후 document.write() 호출되면 기존에 html에 작성되어있떤

내용을 모두 삭제하고 출력됨 (덮어쓰기)

@innerHTML

자바스크립트에서 태그 요소의 값을 읽거나 변경할 때 사용하는 속성

@window.console.log()

개발자도구 콘솔화면에 출력

~~~~~~~~~~~~~~~~~~~~~~입력~~~~~~~~~~~~~~~~~~~~

@window.confirm

어떤질문에 대한 true/false 결과를 얻을때 사용

확인 = true, 취소 = false

@window.propmt()

텍스트 필드와 확인/취소 버튼이 있는 대화상자출력

확인 = text, 취소 = null

~~~~~~~~~~~~~~~~태그접근~~~~~~~~~~~~~~~~~~~~

@ 아이디 접근

document.getElementById();

@ 클래스 접근

document.getElementsByClassName();

@태그명 접근

document.getElementsByTagName();

@name속성접근

document.getElementsByName();

@@@04. 변수와 자료형@@@

@head 영역 script태그

페이지 로딩이 완료되기 전에 작성되어야할 script를 작성하는 용도 (설정관련)

페이지 로딩을 방해하지 않도록 가벼운 script 작성

@body 영역 script 태그

일반적으로 기능을 작성하는 script

페이지 로딩이 완료된 상태에서 스크립트가 실행되는 시점에 로딩됨

@전역 변수, 지역 변수

변수명; // 전역 변수(global)

var 변수명; //전역 변수(global)

fuction 함수명() {

    변수명; //전역 변수(global)

    var 변수명; //지역 변수(local)

}

# 전역변수 선언 시 자동으로 window객체의 필드로 추가됨

// window객체.onload필드에 = function자료형 넣음

# window.onload=fuction(){}

페이지 로드가 완료된 후 페이지 전체를 다시 읽어드림

그 내용을 토대로 함수를 진행

# window 객체

웹 브라우저에서 제공하는 창(window)자체를 나타내는 객체 (생략가능)

@@ 자료형

자바스크립트는 별도로 변수의 자료형을 지정하지 않음

-> 변수에 저장되는 값(리터럴)에 의해 자료형 결정

@자바스크립트의 자료형

string(문자열), number(숫자), boolean(논리값), object(객체), function(함수), undefined(정의되지않음, 초기값이없는변수)

@자바스크립트에서는 배열은 오브젝트타입

ex) var hobby = ["영화", "음악", "낮잠"];

@★★★자바스크립트 객체★★★

ex) var user = {

    name : "홍길동",

    age : 20,

    id : "user01"

}

@fuction

ex) var tf = fuction testFunction(num1, num2){

    var sum = num1 + num2;

    alter(sum);

}

@undefined

ex) var noValue;

@undefined와 null의 차이점

- undefined : 변수 생성 시 초기값이 없는상태

- null : 의도적으로 변수가 참조하고 있는 값이 없다는걸 알리는 상태

@typeof = 값의 자료형을 확인하는 연산자

ex) typeof name

@@@05. 문자열 / 숫자@@@

@문자열

" " 또는 ' ' 사이에 묶여 있는 리터럴

자바스크립트 내장 객체 String이 존재

-> 문자열과 관련된 기본적인 메소드(함수)를 제공함

toUpperCase(), toLowerCase(), indexOf("?"), lastIndexOf("?"), charAt(?),

subString(?, str.length), split("?");

#배열을 변수에 담아서 배열명으로 출력하면 다나옴

@숫자

정수, 부동소수점, Infinity, Nan 리터럴

Math라는 자바스크립트 내장 객체가 존재하며 수학, 산수와 관련된 기본적인 메소드(함수)를 제공함

abs, random, round, floor, ceil, infinity : 무한, Nan : 없음

@@@ 06. 데이터 형변환 @@@

@강제 형변환

자바스크립트에서 문자열 -> 숫자 형변환시

parseInt(), parseFloat() 내장 함수 + Number() 내장 객체를 이용하여 강제 형변환 가능

@@@ 07. 연산자 @@@

@@연산자

==, != 연산자와 ===, !== 연산자

@동등 연산자 (=-, !=)

자료형에 관계 없이 값 자체만 일치하면 true

아니면 false 반환

@ 동일(일치) 연산자(===, !==)

자료형과 값이 모두 일치하면 true, 아니면 false

1 == true //true

1 == "true" //false

0 == "" //true

"0" == "" //false

null == undefined // true