[JavaScript] 생활코딩 WEB2 - JavaScript 1~13

JavaScript : 사용자와 상호작용하여 반응하는 동적인 언어다.

 

 

 

onclick = "" -> 자바스크립트 코드를 onclick했을 때 ""안에 있는 내용들을 작동시키게 한다.

 

 

 

JavaScript : HTML위에서 동작하는 언어.

<script></script> : 스크립트 내에 있는 코드를 자바스크립트로 해석한다.

 

 

 

자바스크립트 : 계산기 기능처럼 동적으로 효과를 냄.

HTML : 문자 그대로 출력

document.write(); -> 웹페이지 상에서 글자를 출력하기 위해서 쓰는 태그이고,

<script> 태그를 통해 감싸주면 자바스크립트 코드라고 알려줄 수 있다.

 

 

---

 

이벤트

 

 

 

 

onclick="" -> onclick속성의 속성 값은 반드시 자바스크립트가 와야 한다.

-> onclick 속성 값은 웹 브라우저가 기억하고 있다가 onclick 속성이 위치하고 있는 태그의 사용자가 클릭했을 때, 자바스크립트 코드를 자바스크립트 문법에 따라 웹브라우저가 동작할 것이다.

=> 이벤트

 

 

 

이벤트의 종류

 

 

on으로 시작하는 속성들 -> 이벤트

웹 브라우저 위에서 일어나는 사건들 중에 기념할 만한 이벤트들을 이용해서 사용자와 상호작용하는 코드를 만들 수 있다.

 

 

---

HTML과 JS의 만남 (콘솔)

 

 

자바스크립트를 실행시키는 또 다른 방법.

웹페이지 -> 검사 -> 콘솔(console)

혹은 웹페이지 -> 검사 -> esc키를 누르면 코드 밑에 콘솔창을 열고닫을 수 있다.

 

글자 수 계산

텍스트를 복사해 콘솔페이지에 붙여 넣어준 뒤 alert('텍스트'.length)를 넣어주면 글자 수가 뜬다.

콘솔에서 실행시키는 자바스크립트는 해당 페이지 대상으로 실행된다.

 

그리고 한번 실행했던 코드를 위쪽 화살표키를 누르면 다시 화면에 나타난다.

-> 웹페이지, 자바스크립트를 이용한다 : 이미 만들어져 있는 웹사이트에서 내가 원하는 부분만 떼서 활용할 수 있다.

---

 

 

데이터 타입 - 문자열과 숫자

 

 

숫자라는 데이터 타입에서 중요한 것은 연산이다.

 

 

콘솔 창에서 1+1 를 입력하여 enter를 쳤을 때 2가 나오는 것을 보았을 때,

왼쪽의 있는 값과 오른쪽에 있는 값을 계산해서 하나의 값을 만든다.-> 이항연산자.

이항연산자 중에서 산수를 하기 때문에 산술연산자라고 부른다.(+ 외에도 -, *,/ 가 있다.)

 

 

 

문자열 (' ' , " ")

 

 

문자를 처리할 때 사용할 수 있는 명령들을 찾는 방법 구글링 -> javascript string(문자열)

 

toUpperCase() -> 소문자를 대문자로 바꿔주는 명령어

 

 

.indexOf('') -> 0 - 1 - 2 - 3 - 4 순으로 해당 글자가 어디에 있는지 알려주는 명령어.

.trim() -> 공백을 없애주는 명령어.

 

 

이해보단 익숙해지자.

숫자열과 문자열은 다른 데이터 타입이기 때문에 잘 구분해서 사용해야 한다.

 

 

 

---

 

 

 

변수와 대입 연산자

 

 x, y -> 변수 - 바뀔 수 있는 값. variable

 

=  -> 대입연산자

좌항과 우항을 결합해서 우항의 값을 만들어낸다.

 

 

1, 2 -> 상수 - 바뀌지 않는 값. constant

 

 

 

변수를 왜 쓰는가?

name = ' ';

shift + enter -> 실행을 유보하고 싶을때 사용한다. (그냥 enter를 치면 바로 실행됨)

"+name+" ->

var (variable의 약자) name -> var 붙여주기.

 

 

---

 

 

제어할 태그 선택하기

 

 

 

 

 

selector -> .myclass : 이 웹페이지에 있는 모든 태그 중에 태그 이름이 myclass인 태그를 선택하는 선택자.

 

 

document.querySelector('body').style.backgroundColor ='black'; -> 배경색

document.querySelector('body').style.color ='white'; -> 글자색

 

각각 day, night에 맞게 코드를 적어주면 된다.

 

코드에 맞게 다 적었는데  <h1> WEB </h1>부분과 <ol>부분의 색은 계속 안 바뀌는데 왜일까 궁금하다.

 

 

---

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

 

 

 

HTML - 컴퓨터 언어

JavaScript - 컴퓨터 언어 / 컴퓨터 프로그래밍 언어 - 시간의 순서에 따라 동작하게 함 (사용자와 상호작용)

 

프로그램 - 순서

 

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

 

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