티스토리 뷰
[수업의목적]
자바스크립트는 사용자와 상호작용(night,day)
ex) <input type = 'button' value = 'night' on.click="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">
[html과 js의 만남]
1. script 태그
-> <script> 태그를 줘야한다.
ex) <script> docutment.write(1+a); </script>
--> a 에 따라 결과가 매번 바뀐다.
2. event
: 웹 브라우저 위에서 일어나는 사건(onclick,onchange,onkeydown, ... )
ex) <input type ="button" value="hi" onclick="alert('hi')">
ex) <input type ="text" onchange="alert('changed')">
--> onclick 의 속성값으로는 자바스크립트 코드가 와야하고, onclick 속성값은 웹브라우저가 기억하고 있다가 호출해주는 역할을 한다.
3. 콘솔
ex) alert("sdfasfdasfasfasdf".length)
[CSS 기초]
-> 태그안에 style 속성 쓴다.(html 은 style 속성안에 css 속성이 온다고 정의해놨음)
1. style 사용하여 개별적으로 수정
<h2 style="background-color:coral; color:powderblue" >JavaScript</h2>
2. span class 사용하여 일괄 수정
<style>
.spanclass1{
font-weight:bold;
}
</style>
<span class="spanclass1"> Paragraph2 </span>
--> spanclass1 이름의 span에 다 적용될 것.
3. css 선택자(id)
<style> #first { color = "green"; } </style>
<p> <span id="first" class="spanclass1">Paragraph</span>
--> class가 포괄적이고, id선택자가 덜 포괄적이므로 id가 마지막에 적용 된다고 생각하면 된다.
4. span 태그
<style> span{ color : blue; } </style>
-> 모든 span 태그에 적용되는 것. 하지만 가장 포괄적이므로 첫번쨰로 적용됨
5. css 선택자로 특정 tag 불러오기
var a = document.querySelector('body' or '#myid' or '.myclass')
-> body 태그나, id값이 myid인것, class이름이 myclass 인것이 a에 저장
[조건문]
[반복문]
[함수]
nightdayHandler(매개변수이름) 주고
원하는 버튼 등에서 nightdayHandler(this) 로 호출 할 수 있음.
[객체]
[파일로 쪼개기]
여러 페이지에 공통된 코드들이 많다면 code.js 파일로 만들고,
페이지들에 <script="code.js"></script> 삽입하면 된다.
[라이브러리]
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
[UI & API]
UI : 유저가 조작할 수 있는 인터페이스
API : Application Programming Interface
-> 어플리케이션을 만들기 위한 조작장치들
[웹 관련된 객체 & api]
document 객체 : 태그에 관련된 객체
DOM 객체 : document 객체를 포함한 객체
window 객체 : 웹 브라우저 자체를 조작할 수 있는 객체
(새창,현재열려있는 url주소, 화면크기등 알려고 할때)
ajax : 웹 페이지 reload 없이 정보를 변경할 수 있는 기술
cookie : reload 가 되어도 현재상태를 유지하고 싶을 대 사용기술
offline web application, webRTC(화상통신), speech api(음성인식)
3차원 게임(webGL), webVR(가상현실)
a.html
javascript 인프런 정리.docx