강좌 : 유튜브 생활코딩

3. WEB2-JavaScript

• JavaScript는 사용자와 상호적용을 하는 언어이다
• JavaScript는 HTML을 제어하는 언어이다
• JavaScript는 동적이어서 1+1 = 2라고 출력할 수 있다

++ 웹브라우저는 한번 화면에 출력되면 자기자신을 바꿀수 없다 하지만 JavaScript를 이용하면 JavaScript code에 따라서 디자인을 변경할 수 있다

✍JavaScript 태그

<script> </script>

• javascript를 사용할땐 이 사이에서 이용
• script 태그는 html문법이면서 동시에 이 사이에 있는것은 script라는 것을 알려주는 의미

---

✍event

• 웹브라우저에서 일어나는 일들을 사건(event)이라고 한다
• event 속성의 값으로는 반드시 javascript가 와야 한다
• event 속성의 속성값은 웹브라우저가 기억하고 있다가 이 event가 위치하고 있는 태그에 어떤 이벤트가 일어났을때 기억하고 있던 자바스크립트 코드를 자바스크립트 문법에 따라 해석해서 거기 적혀있는데로 웹브라우저가 동작한다

버튼만들기

<input type="button">

버튼에 이름적기

<input type="button" value="hi">

버튼을 눌렀을 때 경고창 뜨게 만들기

<input type="button">

글씨칸 만들기

<input type="text">

---

✍콘솔

• 파일을 만들지 않아도 웹페이지에서 자바스크립트 코드를 즉석에서 실행할 수 있다
• 마우스 우클릭 → 검사(inspect) → 콘솔창

문자열의 문자의 개수를 알려주는 코드

.length
→ alert('문자열'.length) : 경고창으로 글자수를 알려준다

---

✍데이터타입(자료형)

문자열과 숫자

• 산술연산자 : + - * /
• 숫자 : 1 + 1 = 2
• 문자 : "1" + "1" = "11"

.toUpperCase() : 소문자를 대문자로 변환
.indexOf() : 글자의 위치
→ 'Hello world'.indexOf('o') = 4 : 'o' 는 글자의 4번째에 위치
.trim() : 공백제거

---

✍변수와 대입 연산자

• 변수(variavle) : 바뀔수 있는 어떤 값
• 상수(constant) : 바뀌지 않는 값

var x = 1;

x : 변수 → 변수를 사용할땐 var을 붙여서 사용할것 관례적으로 사용
= : 대입 연산자 → 오른쪽 항의 값을 왼쪽의 변수에 대입한다라는 의미