1. JavaScript(자바스크립트)란?
: 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
- 객체 지향이란?
: 우리가 실생활에서 쓰는 모든 것을 '객체'라고 한다.
: 객체 지향 프로그래밍은 프로그램 구현에 필요한 객체를 파악하고 각각의 객체의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말한다.1) 스크립트(Script)언어
: 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
- 스크립트 언어의 특징
: 별도의 컴파일을 진행하지 않고 인터프리(interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행
- 장점 : 컴파일에 소요되는 시간이 없음
- 단점 : 대신 프로그램 실행 시간이 느림2) 자바스크립트 작성 방법
- 브라우저 콘솔에 직접 작성하는 방법
- 태그에 직접 JS 코드를 작성하는 방법(inline)
- html 내부에 Script 태그를 이용하여 작성하는 방법(internal)
- html 외부에 파일(.js>를 이용하여 작성하는 방법(external)
2. 자바스크립트 작성 방법 예제
1) inline
: 태그에 직접 JS 코드를 작성하는 방법
<button type="button" onclick="alert('inline 버튼이 클릭되었습니다.')">inline 방식으로 만든 버튼</button>inline 방식으로 만든 버튼
* button 태그의 type
- 기본 : submit
- reset, button(다른 이벤트와 함께 사용하는 의미없는 type)
* onclick 이벤트
: 클릭이 되었을 때! ~을 실행해라
ex)
-> 버튼을 클릭했을때 팝업창을 띄어라!
-> 팝업창에는 '실행내용'이 뜨게 해라~2) internal
: html 내부에 태그를 이용하여 작성하는 방법
<body>
<button type="button" onclick="btnClick1()">internal 방식1</button>
<!--onclick 이벤트에 "btnClick1()"함수 이름을 주고 해당 함수이름을 script로 불러간다.-->
<button type="button" id="btn2">internal 방식 2</button>
<!--이벤트는 주지 않고 id값을 주어 id값을 불러간다.-->
<script>
//()안에는 매개변수가 들어 올 수 있다.
function btnClick1(){
alert("internal 버튼이 클릭되었습니다.") }
//id "btn2"인 요소가 클릭 되었을 때 기능 수행(고전)
//function() 익명함수(이름이 없는 함수)
function.getElementById("btn2").onclick = function(){
alert("internal 버튼 2번이 클릭되었습니다."); }
</script>
</body>3)external
: html 외부에 자바 파일(.js)을 이용하여 작성하는 방법
<head>
<style>
#box{
width : 200px;
height : 200px;
border : 1px solid black;
}
</style>
</head>
<body>
<button type="button" onclick="btnClick3()">external 방식</button>
<div id="box"></div>
<button type="button" onclick="changeColor1()">red</button>
<button type="button" onclick="changeColor2()">yellow</button>
<!-- 외부파일 js파일 추가 방법-->
<script src="/JS/01_js개요.js"></script>
</body>// <script></script> 내부라고 생각하기
function btnClick3(){
alert("external 버튼이 클릭되었습니다.");
}
//함수 changeColor1을 실행할 때,
//<div id="box"></div>를 가져와서
//style.backgroundColor='red'로 바꿔라!
function changeColor1(){
document.getElementById("box").style.backgroundColor='red'; }
function changeColor2(){
document.getElementById("box").style.backgroundColor ='yellow'; }
javascript 개요 꼭! 기억하기
1. js를 사용할 때는 4가지 방법이 있다.
- 웹 브라우저 consol에 직접 적기
- inline 방식으로 태그에 직접 js코드 적기
- internal 방식 : html 내부에 <script>를 적어 js코드 적어주기
- external 방식 : html 외부에 자바 파일(.js)를 만들어 사용하기
2. html에서 js로 호출하는 방법
- 태그내 이벤트에 함수명()을 적어 <script> 내부에서 불러오기
ex) function 이벤트 함수명(){
함수를 적용됐을때 실행할 내용 }
- id값을 주어 <script>내부로 불러오기
ex)document.getElementById("아이디").이벤트 = function(){
해당 아이디의 함수가 적용됐을 때, 실행할 내용}