1104) html css 시험.

---

intro.

• 회사에서 java를 많이 사용하는 이유는 유지보수가 용이하기 때문임.
• JavaScript는 프론트 백 모두 웹프로그래밍에 사용됨.
• python은 머신러닝, 데이터 사이언스에 사용됨.

JavaScript

: (ecma script)

• Java처럼 컴파일 할 필요 없음.
  -> JS는 브라우저가 즉시 기계어로 변환 함.

• JavaScript는 처음에 쉽게 배울 수 있음.
  -> java문법을 사용함.

• html과 css를 동적으로 변화시킬 수 있음.
  -> 새로운 html나 css의 element를 생성 삭제 수정할 수 있음.

• Es5는 기존에 코딩된 js 버전임.
  Es6는 최신 버전으로 권장하는 js 버전임.

JS basic

<h2>What Can JavaScript Do?</h2>  
<p id="demo"></p>
    
<!-- 
<p id="demo">JavaScript can change HTML content.</p> 
-->

<!-- 
onclick     ; 클릭하면 value 값을 웹브라우저에 실행하는 attribute.
-->
<button type="button" 
   onclick='document.getElementById("demo").innerHTML = "run JavaScript!"'>
	Click me!</button>

<button type="button" 
   onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>
  	Click Me!</button>

getElementById('id명')
: id를에 JS code를 실행함.

innerHTML
: 지정된 html element에 html value를 입력함.

<button onclick="document.getElementById('bulb').src='../imgs/pic_bulbon.gif'">
        on</button>

<img id="bulb" src="../imgs/pic_bulboff.gif" alt="bulb off" width="100px">

<button onclick="document.getElementById('bulb').src='../imgs/pic_bulboff.gif'">
        off</button>

src = '이미지 위치'
: 해당 위치의 이미지를 해당 html element로 보냄.

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'" >
        font size UP!</button>

.style.style속성='속성값'
: 해당 html element의 style값을 변경함.

-> 브라우저 dev-tool 콘솔에서 확인하면 style파일안에 style속성들이 들어있음. 그래서 .style로 상위 파일을 확실하게 표시해야함.

script tag

: <script> </script>

웹브라우저가 html 파일 실행 순서

1. head 태그에서 선언된 style과 script로 선언된 내용을 해석해서 갖고 있음.
   => 단, body에 html element의 객체가 생성되기 전에
   js로 객체 필드값을 변경하면 효과 없어짐.
   

2. body 태그에서 html element들을 순서대로 생성해 메모리에 올림.

3. body 태그 안에 작성된 js 코드를 html elemnet가 생성된 경우 적용함.

4. 웹브라우저 화면에 css, js 내용을 적용해 결과를 보여줌.

• script 태그 안에서 js 코딩 할 수 있음.
  => script 태그는 head, body 어디서든 사용 가능함.(body의 맨 마지막에 선언 권장)
  +) external file(외부파일)로 선언하여 사용 가능.
  

JS output

document.write()
: document.write() 사용 권장하지 않음.
: button에 document.write()를 사용하면 결과를 출력하면서 html모든 내용을 날려버림.

window.alert()
: 아래 window.alert()은 요즘은 사용하지 않는 방식.
: window.alert()은 웹브라우저가 html element를 display하기 전에 실행함.

window.print()
: window.print()는 웹페이지 전체를 출력하는 팝업화면이 나옴.

console.log
: JS code의 디버깅용으로 많이 사용함.
: 웹페이지에서는 결과가 보이지 않고, 웹브라우저 console에서 보여짐.

.innerHTML
:
.innerText
:

JS data type

• 변수명을 선언할 때, var let const등 키워드를 사용하지 않아도 선언 가능.
  

data type
var	Declares a variable
let	Declares a block variable
const	Declares a block constant

--> 꼭 알고 있어야함.

var 선언 사용 : var은 Es5(2009년)에 출시

• 중복 허용, 선언된 변수에 다른 선언 가능.

let 선언 사용 : let은 Es6(2015년)에 출시

• 중복 허용 x, 선언된 변수에 다른 선언 가능.

const 선언 사용 : const은 Es6(2015년)에 출시

• 중복 허용 x, 선언된 변수에 다른 선언시 error 발생.