javascript란?

javascript 는 사용자의 행동에 반응하고, 움직임을 만드는 역할의 인터프리터 언어로서 c 언어와 마찬가지로 위에서

순차적으로 실행된다.

따라서 작성 순서에 유의해 줘야한다.

 

선언은 바디와 헤드 두군데에서 선언이 가능하고, html 태그를 사용하고 싶다면 바디에 하는 것이 좋다.

<script type="text/javascript"> </script>

<script type="text/javascript" src="js/3.js"> </script> //경로설정시 스크립트 안의 태그는 작동되지 않음. 

---

변수-

변수는 변할수있는 값으로, c언어와 역할이 비슷하다 . 하지만 여기서의 변수는 자료형이 안의 값에 따라서 달라진다.

자료형은 크게 5가지가 있다.

 

string (문자형) " "

number ( 숫자형 )

boolean ( 논리형 )

문자열

null

 

cosol.log() 는 괄호 안의 값을 개발자 콘솔에서 볼 수 있게 한다.

변수의 자료형을 확인하는 방법은 개발자 콘솔에서 consol.log(typeof 변수)를 쓰면 된다.

 

변수에는 논리형으로 true 와 false 도 집어넣을수 있다.

z=false;

---

연산자-

연산자란? 연산을 해주는 것으로

덧셈(+) , 뺄셈 , 곱셈 , 나눗셈

증가 (++) , 감소(--) , 나머지(%) , 할당 (+= , -= , *= , /= , %=)

이 있다. 이를 모두 산술 연산자라고 한다.

 

증감 연산자의 연산은 두가지가 있다.

 

전위 연산자와 후위연산자가 있는데,

전위연산자는 ++x 먼저 1 증가하고  후위연산자는 x++ 원래 값을 할당하고 나중에 증가한다.

즉 넘겨주고 값이 변한다 y=x++ -> y==x  , x==x+1

 

비교연산자

비교 (==) 엄격한 비교 (===) 같지 않음(!=) 엄격한 같지 않음 (!==) 크고작음 (>, <, >=, <=)

 

그냥 비교는 자료만 확인하나

염격한 비교는 타입까지 비교한다.

 

삼항 연산자

조건 ? A : B 는 조건에 맞으면 A 아니면 B 를 출력하는 삼항 연산자의 작성형태이다.

 

퀴즈! 

var x=10,y="10";
var z;
console.log(z = x == y ? 10 : 11);
console.log(z = x === y ? 10 : 11);

== 를 썼을때와 === 를 썼을때의 z 의 값은>?

 

논리 연산자

부정 ! 

and &&

or ||

 

if (조건 ){

}
else if ( 조건 ){

}
else{

}

 

for 

 

while

 

---

객체

 

객체란? object 로 물체를 객체라 하고 질감, 재질 등 물체의 특징을 속성(프로퍼티)이라 한다.

또한 물체의 특정 행동을 method 메서드 라고 한다. 

 

var 객체명 = {키 : 값, 키 : 값.....};  선언시 키는 객체의 속성이 된다.

 

객체를 사용하는 방법은 ㅁ

객체.메서드();   메서드 실행

객체.프로퍼티;  속성을 가져옴(get)

객체.프로퍼티=값;   속성을 변경 (set)

---

DOM 객체

웹 페이지 자체를 객체로 인식 

 

DOM 메서드 : HTML 엘리먼트 인식 

DOM 프로퍼티 : HTML 엘리먼트 조작

 

DOM 객체는 gerElement 와 innerHTML 로 프로퍼티가 구성되어있다.

getElementByid(" X ") id가 X 인 것을 받음

getElementsByClassName(" X ") classname이 x인 것을 받음

getElemantsByTagName(" X ") 태그의 이름이 x인 것을 받음.

getElementsName(" X ") name이 X 인 것을 받음 

querySelectorAll(" X ") X의 값을 받음

ex)

querySelectorAll("div#name > p#num1 ").innerHTML = "p 입니다"   :  div 의 아래 p 태그의 num1 을 p 입니다로 바꿈

ex) 

getElementByid(" X ").innerHTML="h1 태그입니다.";   :  <X> </X> 사이에 h1 태그입니다를 집어넣음.

 

getElementsByClassName("  ")[0].innerHTML

 

s 가 붙는 경우의 속성을 불러오려면 배열처럼[ ]안에 class가 몇번인지 번호를 써 줘야한다. 

---

BOM 객체

 

웹브라우저 자체를 객체로 인식

창 열기 , 창 닫기를 할수있음

window : BOM 에서 최상위

매서드

open(" ")

close(" ")

confirm(" ")  :  메세지 창을 띄움

alart(" ") : 경고창을 띄움

setInterval(" ")  : 타이머 만드는데 사용가능 //실시간 새로고침같은 느낌....?

innerWidth  : 가로픽셀의 크기

innerHeight  : 세로 픽셀의 크기 (위의 창 제외)

outerHeight  : 세로 픽셀의 크기 (위의 창까지)  // 브라우저 크기에 따라 달라지게 만들 수 있음.

 

 

하위 객체 

Screen

Location

History

Navigator

Timing

Cookies

Popup Alert

 

함수

스크립트 안에 function 을 사용해서 선언하고 안에 코드를 작성한다

<script>function 함수명( 매개변수 ) { }</script> 와 같이 사용한다

 

C언어와 마찬가지로 ; 로 코드를 끝냈음을 알리고, 지역 변수를 선언할 수가 있습니다.

만약 funtion 의 밖에 사용한다면 script 안에서 전역변수를 사용할 수 있습니다.

 

익명함수란 

함수를 변수에 넣어서 사용하는 것으로 변수의 이름으로 함수를 실행할 수 있습니다.

var 변수명 = function(매개변수){}; 와 같이 사용한다

---

이벤트

 

이벤트란 웹 페이지에서 발생하는 모든 사용자의 액션

 

이벤트 핸들러

onclick : 클릭했을때

onmouseover  <-> onfocus 서로 대응 : 마우스가 올라갈떄

onmouseout  <->  onblur 서로대응 : 마우스가 내려갈때

 

이벤트 핸들러 등록하는 법

1 속성으로 등록 

 

2 html DOM

DOM 객체 탐색으로 등록 

 

3 addEventListener() 매서드

메서드를 통해 이벤트 등록

 

DOM 탐색 과 속성등록 방식은 이벤트 중복 등록이 불가하다

 

---

이벤트 활용 

 

this 사용자 자기자신을 가르킴

div#value div 태그의 value 값을 가르킴

setAttribute("class", "over")  :  class 의 값을 over 로 바꿈