자바스크립트 1

1.자바스크립트란

HTML로만 이루어진 웹 페이지는 이론상 사용자에게 보여지는 내용이 변경 될 수 없다.

자바스크립트는 그런 HTML을 변경하고 제어하는 언어이다.

 

초기의 웹은 HTML로만 이루어져있었고, 다른 페이지로 변경 하지 않으면 현재 보여지는 HTML의 화면을 변경 

할 수 없었다.

 

HTML 파일 내에 <script></script> 로 감싸주면 자바스크립트로 인식 된다.

 

 

2.개발자도구

단축키 : ctrl+shift+i 

 

*element탭

element탭이 활성화 된 상태에서 esc누르면 콘솔 on/off

html 원문을 보여주고 커서on 하면 페이지의 어떤 부분을 가리키는지 하이라이트 표시 해 준다

 

 

*console탭

debug 문자열출력, 테스트용코드 빠르게 확인, 계산기로 사용 등 

 

 

3.CSS

<h2 style="color:aliceblue; background-color:beige">JAVA SCRIPT</h2>

style 속성을 통해 css를 웹페이지에 삽입 할 수 있다.

 

4.기능이 없는 태그

문자열에 css 속성값을 주기 위해서는 태그 뒤에 style 속성을 붙여줘야 하고 문자열의 특정 부분의 css 컨트롤을 하기 위해 style을 붙이기 위한 기능 없는 태그가 필요하다.

 

dev 줄바꿈이 되는 어떤 기능도 없는 태그

span 줄바꿈이 안 되는 어떤 기능도 없는 태그

 

5.Style 태그

Style을 속성으로 사용하면 태그뒤에 붙어서 해당 태그 내의 내용에 영향을 미치지만, Style태그를 이용해서 HTML전체에

영향을 끼치는 방법이 있다.

 

        <style>

            .myturn{

                font-weight: bold;

                color:blue

            }

        </style>

myturn 이라는 클래스를 찾아서 css를 모두 바꿔준다

 

        <style>

            #yourturn{

                font-size: x-large;

            }

        </style>

yourturn 이라는 id를 찾아서 css를 모두 바꿔준다

        <style>

            span{

                font-style: oblique;

            }

        </style>

span 태그를 찾아서 css를 모두 바꿔준다

 

우선 순위는 

ID > CLASS > TAG

 

6.선택자

id : 유일한 식별을위한 선택자

class : 그룹짓기위한 선택자

 

7.조건문+함수

<input type="button" value="day" onclick="

        ToggleButton()

        ">

        <script>

            function ToggleButton()

            {

                if(document.querySelector('body').style.backgroundColor=='black')

                    document.querySelector('body').style.backgroundColor='white';

                else

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

            }

        </script>

onclick 뒤에 자바스크립트 문법이 오고, 바로 문법을 써 줘도 되지만, 자바스크립트 범위안에 함수를 만들고 만들어준 함수를 넣어주는 방법도 있다.

 

클릭시 함수파라미터를 아래처럼 넘겨 줄 수 있다.

        <input id="nightday" type="button" value="day" onclick="

        ToggleButton(this)

 

function ToggleButton(param1)

 {

                //alert(param1);

 }

 

8.주석

HTML 

<!--

comment

-->

 

자바스크립트

/*

comment

*/ 

// comment

 

 

 

 

출처

 

생활코딩 자바스크립트

https://opentutorials.org/course/3085

 

자바스크립트 레퍼런스 사이트

https://www.w3schools.com/jsref/event_onkeydown.asp

 

자바스크립트 모질라

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

 

 

생활코딩 ~19 까지의 내용