728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트개요</title>
</head>
<body>
<!--
* 웹의 3대 요소
- HTML : 웹 문서의 큰 틀(뼈대)
- CSS : 스타일 (색상, 테두리, 디자인 등등)
- JavaScript : 웹 문서 상에 이벤트가 발생했을 때 실행해야할 동작들 처리(동적인 효과)
(자바라는 언어와는 아예 연관이 없다)
-->
<h1>자바스크립트 개요</h1>
<h3>1. 스크립트 언어란?</h3>
<p>
프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도<br>
매우 매우 빠르게 배우고 짧은 소스코드로 상호작용 되도록 고안됨
</p>
<br>
<h3>2. 자바스크립트란?</h3>
<p>
웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어<br>
- 자바 : 컴파일 방식 => 컴파일을 거치고 나서 실행 된다.<br>
- 자바스크립트 : 인터프리터방식 => 컴파일을 거치지 않고 곧바로 실행이 된다.<br>
(브라우저에서 html문서가 로딩 될 때 코드를 한줄씩 읽어내는 방식)<br>
</p>
<!--
자바는 컴파일방식
컴파일 방식은 코드 상에 문법적인 문제가 있다면 바로바로 빨간줄로 알려줌
자바스크립트는 인터프리터 방식
실행되면서 소스코드를 한줄씩 읽어내면서 바로 실행(실시간으로 텍스트를 분석해서 실행됨)
코드상에 문법적인 문제가 있다면 바로 알려주지 않고 실행시점에서 알려줌
자바에 비해 오류찾기가 힘들 수도있다.
-->
<br>
<h3>3. 장단점</h3>
<h4>* 장점</h4>
<ul>
<li>요소에 이벤트가 발생했을 때 코드를 한줄씩 읽어 나가면서 수행되기 때문에 수행속도가 빠름</li>
<li>간단한 코드 작성으로 초보자가 접하기 쉬운 언어(단순한 구조)
예) 접근제한자 X , 반환형 X, 변수선언시 자료형 X
</li>
</ul>
<h4>* 단점</h4>
<ul>
<li>웹에 특화된 기술 => 내부에서 제공되는 기능이 제한적임</li>
<li>HTML 내에 소스코드를 작성하게되면 외부에 공개됨 => 보안에 취약점이 있다</li>
</ul>
<h3>4. 자바스크립트 소스코드 작성 위치에 따른 종류</h3>
<ol>
<li>inline(인라인) : 이벤트를 부여하고자 하는 요소 내에 간단한소스코드를 작성해서 실행되게 하는 방법</li>
<li>internal(내부) : 현재 html문서 내에 script태그 영역에 소스코드를 작성해서 실행되게 하는 방법</li>
<li>external(외부) : 소스코드들을 별도의 .js파일로 작성해서 가져다가 실행되게 하는 방법</li>
</ol>
<h4>1) inline(인라인) 방식</h4>
<p>
태그 내에 직접적으로 실행할 간단한 소스코드를 작성해서 실행시킴
주로 실행해야 되는 소스코드가 매우 소량일 경우 사용<br>
[표현법]<br>
<태그명 이벤트속성="해당 요소에 이벤트가 발생했을때 실행할 js코드">
</p>
<!-- 버튼이 클릭(클릭이벤트)되는 순간 알람창 띄워보기 -->
<button onclick="window.alert('버튼클릭!!')">알림창 출력</button>
<button onclick="debugger; console.log('ㅎㅎ'); window.alert('버튼클릭!!');">콘솔창 출력</button>
<!-- 콘솔창(개발자 도구 탭) : 주로 디버깅할 용도 -->
<br>
<h4>2) internal(내부) 방식</h4>
<p>
script태그 영역에 함수단위로 소스코드를 작성해놓고<br>
어떤요소에 어떤 이벤트 발생 시 해당 함수를 호출함으로써 실행시키는 방식<br>
- script태그는 head, body태그 내에 다 작성 가능<br>
</p>
<!-- 인라인방식 + 내부방식-->
<button onclick="abc();">알림창 출력</button>
<!-- 순수 내부 방식으로 이벤트 부여-->
<button id="btn">콘솔창 출력</button>
<script>
// 자바스크립트 소스코드를 기술할 수 있는 영역
/*
여러줄 주석 => 주석은 자바와 동일
*/
// 선언적 함수. => function 선언하고, 함수명 작성한 함수
function abc(){
// 해당 함수를 호출시 실행할 코드를 기술
window.alert("인라인 방식 + 내부방식");
}
// 이벤트를 적용시키고자 하는 요소객체를 가지고 오기 + 가지고온 요소를 변수에 담기
const btn = document.getElementById("btn");// id값이 btn인 요소(element)를 가지고오는 구문 (<button id="btn">콘솔창 출력</button>)
// 선택된 요소의 이벤트 속성에 접근해서 해당 이벤트가 발생했을때 실행할 함수를 대입.
// btn.onclick = abc;
btn.onclick = function (){ /* 익명함수 (이름이 없는 함수) */
console.log("순수 내부방식으로 실행됨");
abc(); // 함수 내부에서 미리 정의된 선언적 함수 호출 가능.
}
</script>
<br>
<h4 onclick="window.alert('h4태그 클릭됨!')">3) external (외부) 방식</h4>
<p>
별도의 .js파일로 소스코드를 작성하고 해당 html에 가져가다 실행하는 방법
</p>
<button onclick="test();">알림창 출력하기</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="resources/js/sample.js"></script>
<!--
내가 가져다쓸 외부(external) js파일
파일을 script태그의 src속성으로 연결시켜준다.
* CSS파일같은경우
link태그의 href 속성으로 연결시켜주었음.
-->
</body>
</html>
728x90
반응형
LIST
'JavaScript > JavaScript' 카테고리의 다른 글
| JavaScript 자바스크립트 배열 선언 초기화,배열 반복문,배열 변형(indexOf,concat,reverse,sort,push,pop,unshift,shift,slice,splice,join,toString,foreach,includes,find, filter,map) (1) | 2023.05.30 |
|---|---|
| JavaScript 자바스크립트 문자열과 숫자(인덱스,강제형변환,덧셈) (0) | 2023.05.30 |
| JavaScript 자바스크립트 변수(전역변수/지역변수)와 자료형 (0) | 2023.05.29 |
| JavaScript 자바스크립트 요소 가져오기 (0) | 2023.05.29 |
| JavaScript 자바스크립트 데이터 입출력 (0) | 2023.05.27 |
