[WEB 기초] DAY6 Javascript1

Html은 정적인 page를 만드는 언어.

Css 는 페이지의 style 속성으로 디자인적 요소를 넣어주는 언어

 

Javascript로 Html을 제어하여 페이지를 Dynamic하게 만들 수 있는 Programming 언어

따라서 사용자와 상호작용하는 페이지를 만들 수 있다.

 

 

HTML과 Javascipt의 만남

- <script> tag

<script>
	documnet.write(1+1);
</script>
<h1>1+1</h1>

html은 정적이기 때문에 "1+1" 이라는 문자가 그대로 나오지만 javascript는 1+1을 계산해서 2로 출력된다.

 

- event

<input type="button" value="click" onclick="alert('Button Clicked!!')"> 
<input type="text" onchange="alert('Context changed!')"> 

어떤 "event" 가 일어났을 때 어떤 자바스크립트가 실행되도록 한다.

대표할만한 event 들이 html 속성으로 정의되어있다.

 

 

Console을 통해 javascript 실행해보기

 

Script를 작성하지 않고도 개발자도구의 Console에 Javascript 코드를 입력해서 확인해 볼 수 있다. 

Console을 통해 javascript 코드를 입력하면 '현재 페이지' 에 대해서 명령이 수행된다.

필요에 따라 javascript 로 웹페이지의 정보들을 유용하게 활용할 수 있다. ( 당첨자 추첨 등.)

 

 

DataType

Javascript 에는 7개의 기본 Data type 이 있다.

Boolean, Null, Undefined, Number, String, Symbol 의 6개의 primitive, 그리고 Object 가 있다. 

- Boolean : 논리값을 나타내며 true / false 중 하나의 값을 가질 수 있다.  * 비교연산자 (===)

- Null : Null 타입은 딱 한 가지 값, null 을 가질 수 있다.

- Undefined : 값을 할당하지 않은 변수는 undefined 값을 가진다.

- Number : 숫자의 자료형

  0은 +0과 -0 으로 나타낼 수 있다. 무한대는 Infinity 로 나타난다.

-String : 문자열

문자열 Properties 와 Methods

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

-> 여기서 더 많은 String Methods를 확인할 수 있다.

Symbol : 유일하고 변경 불가능한 (immutable) 기본값 (primitive value) 이다

 

 

 

Variable : 변수 선언

var x =1
var name= "jj"

 

HTML tag를 제어하는 javascript

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

<input type="button" value="night" onclick="
  document.querySelector('body').style.backgroundColor='black';
  document.querySelector('body').style.color='white';
  document.querySelector('.title').style.color='white';
">

 

 style을 수정할 때 주의할 점 :  css style 속성의 이름을 그대로 사용하지 않는다. 위의 그림에서와 같이 css 속성에서는 border-bottom-color : white 이렇게 표기되지만 javascript로 제어할때는  borderBottomColor="white" 이런식으로 사용해야 한다. (Camel 표기법)

 

 

 

 

 

학습자료 :

opentutorials.org/course/3085

WEB2 - JavaScript - 생활코딩

developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN