[2020-여름 WEB] 5주차

5주차_웹이론_21기_송희원.pdf

0.13MB

 

1. script 태그

HTML에서 script태그 안에 JaveScript 문법을 사용하기로 약속했기 때문에 script태그 안에 있는 내용을 JaveScript 문법으로 해석한다.

 

<script>
  document.write(‘Hello world!’);
</script>

 

 

 

 

 

2. event

HTML은 웹페이지를 동적으로 만들 수 없다. 사용자와 상호작용을 하는 동적인 웹페이지를 만들기 위해서는 event를 만들어야 한다.

이 이벤트는 on~속성으로 만들 수 있다. (ex. onclick)

ex)

 

<input type=”button” value=”hi” onclick=”alert(hi);”>

 

위 코드는 hi버튼을 누르면 hi라는 메시지가 뜨도록 동작한다.

ex)

 

<input type=”text” onchange=”alert(changed);”>

 

위 코드는 text창에 입력된 내용이 변경되면 change라는 메시지가 뜨도록 동작한다.

ex)

 

<input type=”text” onchange=”alert(changed);”>

 

위 코드는 keydown하면 key down!이라는 메시지가 뜨도록 동작한다.

 

 

 

 

 

3. console

간단한 정보처리 작업을 할 때 콘솔창의 띄워서 작업할 수 있다.

우클릭으로 검사창에 들어가서 콘솔을 선택하면 콘솔창이 뜬다.

콘솔창에서는 다양한 작업을 할 수 있다.

 

  ① 단어수 세기

strign.length는 문자열의 글자수를 알려주는 기능을 한다.

  ② 산술연산

계산기처럼 산술연산이 가능하다.

  ③ 랜덤추첨

github에서 ‘페이스북 그룹 추정’이라는 소스를 사용하면 게시글에 댓글을 단 사람을 랜덤으로 추첨할 수 있다.

 

 

 

 

 

4. 데이터 타입

데이터에는 데이터 타입이 존재한다. 웹브라우저 콘솔창에 1+1라고 치면 2가 출력되지만, ‘1+1’이라고 치면 1+1이 출력된다.

이처럼 데이터에는 데이터 종류에 따른 데이터 타입이 존재한다.

작은 따옴표나 큰 따옴표안에 있는 문자들은 문자열로 인식된다.

따라서 따옴표 안에 숫자나 계산식을 입력하더라도 연산 결과가 나오지 않고, 입력한 문자 그대로 출력하게 된다.

cf)

string.toUpperCase()는 문자열에 있는 소문자를 모두 대문자로 바꿔주는 기능을 한다.

string.indexOf()는 찾고자 하는 문자가 몇 번째 인덱스에 있는지 알려주는 기능을 한다.

string.trim()은 문자열에 존재하는 공백을 없애는 기능을 한다.

 

 

 

 

 

5. 변수와 대입 연산자

변수는 데이터를 저장할 수 있는 저장공간이다.

예를 들어 x=100; y=50;이라고 했을 때 x+y를 출력하면 150이 출력된다.

여기서 x=100;은 100이라는 데이터가 x라는 변수에 대입된 것이고, y=50;은 50이라는 데이터가 y라는 변수에 대입된 것이다.

‘=’는 대입연산자로 우항에 있는 값을 좌항에 대입시켜주는 역할을 한다.

만약 y를 y=1;으로 변경한다면 x+y의 값은 51로 변경될 것이다.

y=1; 이 코드로 인해 y에 50이라는 숫자 대신 1이라는 숫자가 대입되었기 때문이다.

변수를 사용하면 중복되는 데이터를 한번에 편리하게 나타낼 수 있다.

ex)

“JavaScript is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript.”

 

다음 문자열에서 JavaScript라는 단어가 중복되어 나오고 있다. 이때, 변수를 이용하면 JavaScript를 한번에 나타낼 수 있다.

 

var name = “JavaScript”;

name+” is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. “+name+”is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about “+name+”.”

 

 

 

 

 

6. 제어할 태그 선택하기

사용자와 상호작용하는 웹페이지를 만들기 위해 JavaScript를 이용한다.

이때 JavaScript가 웹페이지를 동작시킬 태그를 지정해야 한다.

태그를 지정하고 난 후에는 원하는 기능을 동작하도록 코드를 작성해야 한다.

예를 들어 웹페이지에 야간모드 기능을 만들려고 한다. 그래서 야간모드 버튼을 생성하고, 버튼을 누르면 야간모드 기능을 동작 시키려고 한다.

이와 같은 웹페이지 기능을 만들기 위해서는 다음과 같은 코드를 작성해야 한다.

 

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

 

document.querySelector는 원하는 태그를 선택하는 역할을 한다.

웹페이지에 야간모드 효과를 주기위해서는 배경색을 바꿔야 하므로 body태그를 선택했다.

그리고 원하는 효과를 주기 위해서 .style.property를 사용했다.

야간모드는 배경색이 검은색, 글자색이 흰색으로 바뀌므로 속성을 backgroundColor=’black’; color=’white’;로 지정했다.