[Javascript] 1_개요, inline, internal, external

✍script 언어

: 응용 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 제어하는 용도의 언어

ex) 브라우저(응용프로그램)을 제어하는 Javascript

특징

별도의 소스코드의 컴파일을 진행하지 않고 인터프리터(Interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행한다.

인터프리터(Interpreter)

소스코드 컴파일을 하지 않고 바로 수행한다
컴파일에 소요되는 시간이 없지만, 프로그램 수행에 시간이 소요된다.

✍ JS (Javascript)

: 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어

- ECMA Script 표준을 따르는 대표적인 웹 기술이다.
(ECMA : European Computer Manufacturers Association)

특징

JS는 우리가 알고있는 프로그래밍 언어의 기본 규칙이 적용되지 않는 경우가 많다. ex) 변수 자료형, 전역/지역(var, 클로저), HTML/CSS를 다루는 명령어

예제

<button type="button" onclick="">버튼1</button>

type="button"은 아무것도 아닌 모양만 있는 버튼이된다.

onclick : 해당 요소가 클릭 되었을 때

alert('버튼1이 클릭되었습니다.')

alert는 알리다는 의미로 ' '안에 있는 내용을 버튼을 클릭했을 때 팝업창으로 해당 문구가 뜬다.

script 태그

body 영역에 작성하고 javascript를 작성하는 영역이다.

<body>
	<button type="button" onclick="changeBg();">제목 배경색 바꾸기1</button>   
    <button type="button" id="btn1">제목 배경색 바꾸기2</button>

    <script>
        // Javascript를 작성하는 영역
        function changeBg(){
            document.getElementById("title1").style.backgroundColor = "black";
        }  /* 고전 방식 */

        document.querySelector("#btn1").addEventListener("click", () => {
            document.getElementById("title1").style.backgroundColor = "pink";
        }) /* 최신 방식 */
        
    </script>
</body>

최신 방식 해석

document 문서 연산자를 .을 통해 하위연산을 불러오는데

html에 문서에서 쿼리셀렉은 css방식으로 요소를 선택하는데 클릭이 되었을때 이벤트리스너를 추가한다

- 문서에서 아이디가 title1인 것의 스타일을 backgroubdColor를 핑크로 바꾼다

inline 방식

: 태그에 직접 간단한 코드를 작성하여 실행하는 방법

form태그 내부에 작성된 버튼이 아닌 경우 type지정이 무의미하다.

form 태그 안에 있는데 타입을 지정하지않으면 자동으로 submit type으로 지정되는데 form 태그가 없다면 그냥 버튼이다

⭐ console.log

: console에 출력 꼭 알아두기!

<button onclick="alert('버튼이 클릭되었습니다!!')">경고(알림창) 출력!</button>
<button onclick="console.log('개발자도구 console에 출력');"> console에 출력</button>
<br><br>
<div id="test1" onclick="console.log('div 버튼이 클릭되었습니다.')">div Button</div>

internal 방식

: HTML 문서 내부에(internal) script 태그를 선언하여 JS 코드를 작성하는 방식

script 태그는 head, body 태그에 작성할 수 있다.

함수(function == 기능(java의 method와 비슷))

// 함수는 선언, 정의, 호출 세 가지로 구분된다.

function 함수명(매개변수) --> 함수 선언 기본 형식

예제 1) 매개변수 없는 함수

<body>
	<button onclick="testFn();">함수 호출 버튼</button>
                    <!-- 함수 호출 -->
</body>
<script>
  function testFn(){ //함수 선언
     //함수 정의
     for(let i=0; i<10; i++){
         console.log(i);
      }
   }
</script>

예제 2) 매개변수 있는 함수

<body>
	<button onclick="add(10,20);">더하기 버튼</button>
</body>
<script>
    //매개 변수가 있는 함수 (자료형은 쓰지 않는다)
    function add(num1, num2){
    	alert("두 수의 합 : " + (num1+num2) );
    }

</script>

external 방식

: 외부에 별도로 자바스크립트 코드만을 작성하는 파일

*.js 파일을 생성하여 연결하는 방법

internal 방식

<body>
    <button onclick="sample1();">sample1 함수 호출</button>
    <button onclick="sample2();">sample2 함수 호출</button>

    <script src="js/02_JS작성방식.js"></script>
</body>

➡ css는 <head> 태그에서 link를 통해 연결했다면 js는 보통 script 태그는 body태그 제일 마지막 부분에 작성한다.

➡ external 방식으로 js 파일 연결

external 방식

// <script>태그 내부라고 생각하고 작성하면 된다.

function sample1(){
    alert("sample1 함수가 호출된다.")
}

function sample2(){
    console.log("sample2 함수가 호출된다.")
}

저작자표시 비영리 변경금지 (새창열림)

'Frontend > JavaScript' 카테고리의 다른 글

[Javascript] 07 이벤트, 이벤트리스너,이벤트핸들러 /인라인·고전·표준모델 (0)	2021.11.16
[Javascript] 문자열,숫자,형변환,연산자 (0)	2021.11.15
[Javascript] 변수 선언 , 자료형 (0)	2021.11.11
[Javascript] 요소접근방법 (0)	2021.11.08
[Javascript] 데이터 입출력 (0)	2021.11.05

✍script 언어

✍ JS (Javascript)

'Frontend > JavaScript' 카테고리의 다른 글

티스토리툴바