JavaScript-기초개념

javascript 개요

• html은 정적으로 있는 문서같은거
• javascript는 동적으로 사용자의 반응에 작용하는거
• web은 html을 통해 만든 후에 javascript를 통해 사용자와 기능을 주고받을 수 있도록 한다.
• html(형식) + javascript(기능) = web!
• javascript는 정적인 html이 움직이게 하는 생명력같은것!
• javascript는 html을 제어하는 언어이다.
• javascript : 컴퓨터 언어이면서 프로그래밍 언어
• html, css : 컴퓨터 언어이지만 프로그래밍 언어는 아니다.

javascript를 html에 적용시키기

• script태그 이용하기

html한테 이제부터 javascript가 시작됩니다. 라는 걸 알려주는 코드가 바로

<script></script>

웹브라우저는 무조건 저 태그 안에 있는 것만 javascript로 인식한다. html과의 차이 →

    <h1>javascript</h1>
    <script type="text/javascript">
      document.write(1+1);
    </script>
    <h1>html</h1>
    1+1

위의 내용은 2가 출력되지만 밑에 1+1은 정말 1+1 자체가 출력된다.

• event의 종류 & 만들어내기

      <input type="button" name="" value="Hi" onclick=alert("Hi");>
      <input type="text" name="" value="입력하세요." onchange=alert("changed");>
      <input type="text" name="" value="" onkeydown=alert("keydown");>
      <input type="button" name="" value="night" onclick=document.querySelector('body').style.backgroundColor='black' ;>
      <input type="button" name="" value="day" onclick=document.querySelector('body').style.backgroundColor='white' ;>
  

→ 이런 식으로 onclick, onchange, onkeydown과 같은 html속성에는 뒤에 javascript속성값이 나옴.

• 콘솔창(F12)에서 javascript 구동시키기

웹페이지 하나 들어가서 F12누르면 콘솔창 뜨는데 그럼 그 콘솔창은 그 웹페이지대상으로 코드를 실행시킬 수 있음. 페북 댓글 작성자 중 3명을 추첨해 경품을 준다는 목적아래 3명 랜덤뽑기를 javascript 코드로 콘솔창에 실행시켜 뽑아낼 수 있다. 이처럼 javascript는 웹페이지를 개발할 때 쓰일 수 도 있지만 자신이 사용하는 웹페이지 상에서 자신의 목적에 맞게 ‘이용’할 수도 있다.

• javascript와 css 문법의 차이
  • javascript → onclick = document.write(); 그리고 alert(); 처럼 .과 ();과 =이 많이 쓰임. →backgroundColor = ‘blue’; 이런식으로 대문자 사용
  • css → style = “background-color:black; color:white;” 이처럼 =대신:을 씀 →background-color:blue; 이런 식으로 - 사용.
• 앞으로의 중요점
  • css에 대한 아주 간략한 이해
  • javascript를 이용해서 제어하고자하는 태그를 선택하는 방법→ 중요! (javascript로 body태그에 있는 스타일을 변경하는데 어떻게 그 스타일속성이 들어있는 body태그를 선택하는지에 대한 이야기이다.)

---

• javascript를 이용해서 제어하고자하는 태그를 선택

  onclick = "document.querySelector('body').style.backgroundColor='black';"
  

이게 가장 중요. 사용자와 상호작용해서 html css를 동적으로 변경시키는 과정.

자바와 자바스크립트의 차이점

특징	자바	자바스크립트
언어종류	소스파일을 컴파일하여 실행하는 컴파일 언어이다.	브라우저가 소스코드를 직접 해석하여 실행하는 인터프리트 언어이다. → 컴파일 필요없음.
실행방식	JVM 위에서 실행한다.	브라우저 위에서 실행한다.
작성위치	별도의 소스 파일에 작성	HTML파일 안에 삽입 가능
변수 선언	변수의 타입을 반드시 선언해야함.	변수의 타입을 선언하지 않아도 사용 가능