[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 함수가 호출된다.")
}
