JavaScript (1) _ 생활코딩

1. 배경

- HTML의 한계 : 정적

- 사용자와 동적으로 상호작용하는 웹페이지를 만들 필요성

- 웹브라우저는 한번 화면에 출력되면 자기자신을 바꿀 수 없음 --> javascript를 통해 변경해줌

 

2. HTML과 JavaScript의 만남

① <script> : 웹브라우저에게 JavaScript가 쓰일 것임을 알리는 태그

- doucment.write : 웹페이지에 글씨 출력할 때 쓰는 JavaScript 코드

<h1>JavaScript</h1>
<script>
 document.write(1+1); //2
</script>

<h1>HTML</h1>
1+1 //1+1

② event(사건)

: 웹브라우저 위에서 일어나는 일들. 이 중 몇가지(10~20) 이벤트를 정의하고 있음

--> event발생시 웹브라우저의 동작을 JavaScript가 구현

 

ex>onclick속성(무언가를 클릭)

- 속성값 : 반드시 JavaScript

- 속성값은 웹브라우저가 기억 & 위치하고 있는 태그에 사용자가 클릭시 해석하여 웹브라우저가 동작

ex> onchange, onkeydown

 

- 검색 예시 : Javascript key down event attribute

 

③ console(콘솔)

: 파일이 아니라 가볍게 코드를 실행(계산, 문자수 세기 등등)

- 열려있는 웹페이지를 대상으로 실행되게 됨

- (검사) - (콘솔) 단, element열린 상태에서 esc --> console열어줌

 

3. javaScript 문법 - 데이터 타입(자료형)

- 검색어 : javascript datatype

- 6가지 데이터 타입(number, string, boolean, null, undefined, symbol)  + 객체(object)

① number(숫자)

: 연산자로 연산 가능

(ex> + :이항연산자, 산술연산자)

산술연산자 : +, -, * , /

 

② string(문자열)

: " ", ' ' 형태의 문자열

- 유용한 명령들이 있음(properties, method)

검색어 - javascript string

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

String

(ex> .length : 문자열의 길이)

**문자열인가, 숫자인가에 따라 결과가 달라지므로 신경써야됨!!

 

4. JavaScript 문법 - 변수와 대입 연산자

- 변수(variable) : 값을 저장하는 공간(대입연산자를 이용해서 값 할당)

  --> 값의 변경에 유용함

  ex> var name = 'hjmoon';

- 상수(constant) : 바뀌지 않는 값

 

5. 웹브라우저 제어

예제(night, day 모드 만들기)에 필요한 지식

- CSS에 대한 약간의 지식 _ CSS정리 글 참고

https://esw-csmoon.tistory.com/entry/CSS-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9?category=1115247

- 속성을 주고자하는(제어할) 태그를 선택하여 웹브라우저에게 알려주는 방법!!

(검색 예시 : javascript select tag by css selector _ css selector관련 tag를 선택)

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

 

6. 프로그램, 프로그래밍, 프로그래머

- 컴퓨터 프로그래밍 언어 : 시간의 순서에 따라서 실행되야 하는 작업을 작성하는 것

- JavaScript = 컴퓨터 언어, 컴퓨터 "프로그래밍" 언어

사용자와 상호작용하기 위해 "시간의 순서"에 따라서 웹브라우저의 기능이 실행되야함!!!

- html = 컴퓨터 언어

웹페이지를 묘사하는 기능일 뿐

 

[어원]

- 프로그래밍 : 순서를 만드는 행위

- 프로그래머 : 순서를 만드는 사람

 

- 이후 조건에 따라 + 반복 + 복잡해진 순서의 단순화 + ...이 추가됨!!

(조건문, 반복문, 함수 등등)