커버페이지
사용자와 상호작용하는 Web Page를 만들고 싶다.
사용자의 조작에 반응하자! -- > JAVASCRIPT
HTML -> JAVASCRIPT
JAVASCRIPT가 HTML을 제어할수 있어서 동적으로 바꿔줄수 있다.
교훈
1. 자바스크립트는 사용자와 상호 작용을 하는 언어이다.
2. 웹브라우져는 한번 화면에 출력되면 바꿀수 없다.
JAVA 코드에 따라서 Body의 디자인을 바꿀수 있다.ex) Night , Day 버튼
4.HTML과 JS의 만남 : 이벤트
<input type = button onclick 클릭했을때
<input type = text onchange 값이 변경되었을때
5.HTML과 JS의 만남 (콘솔)
검사 - conlsole 에서 즉석으로 실행 시킬수 있따
6.데이터타입 - 문자열과 숫자
indexof()
length()
trim()
1+1
2
"1" +"1"
"11"
제어할 태그 선택하기
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
프로그램, 프로그래밍, 프로그래머
조건,토글 기능(toggle),if()else(), 비교 연산자, boolean
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
리팩토링(refactoring)
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
라이브러리와 프래임워크
: 재사용하기 쉽게 정리해둔것 ? 땡겨와서 쓰는 느낌
: 만들고자하는것에 따라서, 반제품? 그 안에 들어가서 작성?
jQuery 라이브러리
$('a').css() 모든 a 태그에 대해서 css를 적용해라
UI vs API
document 객체 : 여러 매소드가 잇을거야. web 페이지에 자식태그추가 삭제 /
DOM은 document 객체 : web 페이지에 자식태그추가 삭제 /
웹브라우져 제어 : Window : 현재 웹페이지 주소, 화면크기 (자바스크릅트를이용햬) 새창 띄우기,
리로드 하지 않고 정보를 변경하고 싶으면 ajax 가 피료해
리로드 되어도 현재상태를 유지하고 싶다면, 사용자
인터넷이 끊겨도 동작
화상통신 webRTC
speech
3차원 그래필 게임 webGL
가상현실 webVR 등