생활코딩 강의
<HTML과 JS의 만남>
1) script태그
<script>document.write(1+a);</script>-> a에 따라 결과가 매번 달라짐
2) event이벤트
:웹 브라우저 위에서 일어나는 사건(onclick, onchange, onkeydown..)
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">-> onclick의 속성값으로는 자바스크립트가 와야하고, onclick의 속성값은 웹브라우저가 기억하고 있다가 호출해주는 역할
3) console콘솔
alert("sdfasdfgewefdagqewf".length)<CSS 기초>
태그 안에 style속성 쓰기(html은 style속성 안에 css속성이 온다고 정의함)
1) style사용하여 개별적으로 수정
<h2 style="background-color:coral;colr: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에 저장!
<조건문>
<body> <h2 style="background-color:coral; color:powderblue"></h2> <input type="button" value="dark mode" onclick=" var target = document.querySelector('body'); if(this.value === 'dark mode') { target.style.backgroundColor='black'; target.style.color='white'; this.value='white mode'; } else { target.style.backgroundColor='white'; target.style.color='black'; this.value='dark mode'; } ">
<반복문>
<p> <ul> <script> var i = 0; while(i++<5) document.write('<li>'+i+'</li>') </script> </ul> </p>
<함수>
nightdayHandler(매개변수이름)주고
원하는 버튼 등에서 nightdayHandler(this)로 호출할 수 있다
<객체>
var coworkers = { "programmer" : "seoha", "designer" : "minzy", "dba" : "seoha2" }; coworkers["data analysts"] = "seoha3"; for(var key in coworkers) { document.write(key + " : " + coworkers[key] + '<br>'); }
<파일로 쪼개기>
여러 페이지에 공통된 코드들이 많다면 code.js파일로 만들고,
페이지들에 <script="code.js"></script>삽입하기
<라이브러리>
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> var i = 0; while(i++<5) document.write('<li>'+i+'</li>') $('li').css('color','red'); // jQuery 사용하여 글자색 변경 // $ : 모든 li태그를 css함수의 color값을 red로 처리
<UI&API>
UI : 유저가 조작할 수 있는 인터페이스
API: Application Programming Interface
-> 어플리케이션을 만들기 위한 조작장치들
