JS 개요
style
<style>
#box{
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>script 태그
외부 js 파일과 연결하는 태그
<script src="js/01_JS개요.js"></script>// 한 줄 주석
/* 범위 주석 */
// js파일은 <script> 태그 내부라고 생각하면 됨
function btnClick2(){
window.alert("external 알림창 출력!!");
}
function changeColor1(){
document.getElementById("box").style.backgroundColor="red";
}
function changeColor2(){
document.getElementById("box").style.backgroundColor="yellow";
}스크립트(script)언어
기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
별도의 소스코드를 컴파일하지 않고 인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행
→ 컴파일에 소요되는 시간이 없음
대신 프로그램 실행시간이 느림
짧은 소스코드 파일로 상호작용하도록 고안됨
자바스크립트(JS)란?
웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
== 웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어
- 인터프리트 방식 : 코드를 한 줄 한 줄씩 읽어가며 바로 실행하는 방식
ECMA Script 표준을 따른 대표적인 웹 기술이다.
자바스크립트 작성 방법
<ul>
<li>브라우저 콘솔에 직접 작성</li>
<li>html 내부에서 script 태그를 이용해서 작성(internal)</li>
<li>html 외부에 (.js)파일을 이용해 작성(external)</li>
<li>태그에 직접 JS 코드를 작성(inline)</li>
</ul>1) inline 방식
태그 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
[표현법]
<태그 on이벤트명 = "해당 요소에 해당 이벤트 발생 시 실행할 소스코드">
<!-- 소스코드가 소량일 경우 inline방식 많이 사용 -->
<!-- JS는 ""/'' 둘 다 문자열 리터럴 표기법으로 인식됨 -->
<button onclick="window.alert('inline알림창 출력')">알림창 출력</button>
<button onclick="console.log('inline 콘솔 출력!!')">콘솔출력</button>
2) internal 방식
현재 html 문서 내 script 태그 영억 안에 소스코드 작성
script 태그는 head 태그, body 태그든 다 작성 가능
<!-- 버튼이 클릭되었을 때 btnClick1()함수를 호출 -->
<button onclick="btnClick1()">알림창 출력</button>
<script>
// 자바스크립트 영역 주석
function btnClick1(){
window.alert("internal 알림창 출력 버튼")
}
</script>
3) external 방식
별도의 .js 파일로 소스코드를 작성해서 가져다가 사용하는 방법
<h2> 3) external 방식</h2>
<!-- external 방식은 js 파일을 연결해야 사용 가능(head, body태그 어디든 작성 가능) -->
<button onclick="btnClick2()">external 방식</button>
JS 테스트
<h3>JS 테스트</h3>
<div id="box"></div>
<button onclick="changeColor1()">red</button>
<button onclick="changeColor2()">yellow</button>
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_JS개요</title>
<script src="js/01_JS개요.js"></script>
<style>
#box{
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>JS 개요</h1>
<!--
* 웹은 크게 3요소
- html : 웹 문서의 큰 틀 (뼈대)
- css : 스타일(색상, 디자인, 간격, 배치 등)
- javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야 하는 동작들 처리
-->
<h3>스크립트(script)언어</h3>
<pre>
기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
별도의 소스코드를 컴파일하지 않고
인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행
-> 컴파일에 소요되는 시간이 없음
대신 프로그램 실행시간이 느림
짧은 소스코드 파일로 상호작용하도록 고안됨
</pre>
<h3>자바스크립트(JS)란?</h3>
<pre>
웹 브라우저에서 많이 사용하는
인터프리터 방식의 객체 지향 프로그래밍 언어
== 웹 브라우저에서 많이 사용되는
인터프리터 방식의 스크립트 언어
- 인터프리트 방식: 코드를 한 줄 한 줄씩 읽어가며 바로 실행하는 방식
ECMA Script 표준을 따른 대표적인 웹 기술이다.
</pre>
<hr>
<h2>자바스크립트 작성 방법</h2>
<ul>
<li>브라우저 콘솔에 직접 작성</li>
<li>html 내부에서 script 태그를 이용해서 작성(internal)</li>
<li>html 외부에 (.js)파일을 이용해 작성(external)</li>
<li>태그에 직접 JS 코드를 작성(inline)</li>
</ul>
<h2> 1) inline 방식</h2>
<pre>
태그 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
[표현법] <태그 on이벤트명 = "해당 요소에 해당 이벤트 발생 시 실행할 소스코드">
</pre>
<!-- 소스코드가 소량일 경우 inline방식 많이 사용 -->
<!-- JS는 ""/'' 둘 다 문자열 리터럴 표기법으로 인식됨 -->
<button onclick="window.alert('inline알림창 출력')">알림창 출력</button>
<button onclick="console.log('inline 콘솔 출력!!')">콘솔출력</button>
<h2> 2) internal 방식</h2>
<pre>
현재 html 문서 내 script 태그 영억 안에 소스코드 작성
script 태그는 head 태그, body 태그든 다 작성 가능
</pre>
<!-- 버튼이 클릭되었을 때 btnClick1()함수를 호출 -->
<button onclick="btnClick1()">알림창 출력</button>
<script>
// 자바스크립트 영역 주석
function btnClick1(){
window.alert("internal 알림창 출력 버튼")
}
</script>
<h2> 3) external 방식</h2>
<pre>
별도의 .js 파일로 소스코드를 작성해서 가져다가 사용하는 방법
</pre>
<!-- external 방식은 js 파일을 연결해야 사용 가능(head, body태그 어디든 작성 가능) -->
<button onclick="btnClick2()">external 방식</button>
<hr>
<h3>JS 테스트</h3>
<div id="box"></div>
<button onclick="changeColor1()">red</button>
<button onclick="changeColor2()">yellow</button>
</body>
</html>
Hello! My Name is oYJo