FrontEnd/javaScript

javaScript - JS(javaScript)기초 (사용 방법 및 기본 문법 및 출력)

혀니D 2017. 6. 20. 15:31

javaScript - JS(javaScript)기초

(사용 방법 및 기본 문법 및 출력)




Hello World

JavaScript 코드 "Hello World"를 작성해보세요.

1
2
3
4
5
6
7
8
9
<script>
function greetMe() {
    alert('Hello' + youName);
}
 
greetMe('World');
</script>
 
 
cs


사용방법


1. script 태그를 이용하여 태그 내부에 직접 작성하는 방법

1
2
3
4
<script>
  var hyeon = document.getElementById('hyeon');
  hyeon.style.color ='red';
</script>
cs



2. script 태그의 src 속성에 별도의 js 파일을
경로를 입력하여 플러그인 하는 방법

1
<script src = "./hyeon.js"></script>
cs



3. script 태그의 사용 위치는 head 내부 또는 body 종료태그 직전에 사용

1
2
<!DOCTYPE html></script>
<script src = "./hyeon.js"></script>
cs



4. head에 사용할 때 문서로드에 대한 명령이 필요

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 1. 모든 콘텐츠 로드된후 실행
    window.onload = function(){
        var hyeoni = document.getElementById('hyeoni');
        console.log(t);
    } 
    
    // 2. 선언해서 사용
    const load = () => {
        console.log("실행될 코드");
    } 
    window.onload = load;
</script>
 
cs



5. 요소가 모드 생선된 후인 종료 body 직전에 입력

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<body>
    <div id="wrap">
     // TAG들...
    </div>
    <script>
        var hyeon = document.getElementById('hyeon');
          hyeon.style.color ='red'
    </script>
</body>
cs




기본 문법


1. 메소드를 이용한 명령에 필요한 조건은 ()안에 작정하고 인자라 부르며, 

여러개의 인자가 필요한 경우 콤마( , )로 연결

1
2
3
4
5
<script>
    function hyeon (인자, 인자) {
        // 코드
    }
</script>

cs



2. 여러 단어의 조합인 경우 CamelCase(낙타) 기법으로 작성

1
2
3
4
5
<script>
    function developerHyeon () {
        // 코드
    }
</script>
cs



주석


주석은 화면상에 표시되지 않고 소스상에서만 확인 가능하며,

문서의 수정사항이나 태그의 설명 등의 목적으로 사용.

실무에서 많이 사용


1
2
3
4
5
6
// 한줄 주석
 
/*
    여러줄 주석
    여러행으로 입력
*/
cs