[Day 5] Ⅲ. JacvaScript 1
1. JavaScript 소개
- JavaScript란? 주기적으로 바뀌는 화면, 능동적인 지도, 2D/3D 그래픽, 동영상 등 웹페이지에서 볼 수 있는 정보들을 조금 더 복잡하고 알맞게 표시됨이 가능해지는 것.
- 웹 기술 계층 구조
1. HTML: 웹 페이지 상에서 문단, 제목, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 마크업 언어.
2. CSS: 배경색, 폰트, 컨텐츠의 레이아웃 등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일규칙 언어.
3. JavaScript: 동적으로 컨텐츠를 바꾸고 멀티미디어를 다루어 웹 페이지를 꾸며주도록 하는 프로그래밍 언어.
- 간단한 예제 살펴보기
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>JavaScript label example</title>
<style>
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<p>Player 1: Chris</p>
<script>
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}
</script>
</body>
</html>예제 출처: https://github.com/theun0524/theun0524.github.io/tree/javascript-intro-1
- JavaScript는 어떤 일을 할 수 있나?
1. 변수에 값 저장, 문자열 결합
<script>
let name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
</script>- 새로운 이름을 만들고자 name이라는 변수에 'Enter new name'이라는 값 저장.
- Player 1이라는 이름을 name이라는 변수와 결합.
2. 웹 페이지 상의 이벤트에 따라 응답하는 기능
<script>
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
</script>- 버튼이 클릭되었을 때 코드가 실행되고, 글이 바뀌는 동작 만듦.
3. 자바스크립트 기반 API(Application Programming Interface)를 통한 기능 확장
(코어 자바스크립트 언어 기반의 기능성)
- 브라우저 내장 API: 웹 브라우저에 설치된 API.
Document Object Model(DOM) API - 동적으로 페이지의 스타일 지정. HTML/CSS 조정
Geolovation, Canvas, WebGL API - Geo: 지리적인 정보 검색, Can, Web: 2D, 3D그래픽
Audio and Video API - 음악, 비디오 등의 멀티미디어를 활용
- 써드파티 API: 인터넷에서 개인적으로 정보와 코드를 얻어서 프로그래밍하는 것.
Twitter API - 웹 사이트에 가장 최근의 트윗을 보여주게 함.
Google Maps API - 웹 사이트에 원하는 지도를 넣고 작동하게 함.
- 웹 페이지에서 JavaScript의 역할
- 웹 페이지와 자바 스크립트
1. Browser 보안성: Browser Tab
- 각 탭이 대부분의 경우 독립적이고 한 브라우저가 다른 브라우저의 코드 수정 불가
2. 실행 순서: 위에서 아래로
- 순서에 주의하여 코드 작성해야 함.
3. Interpreter와 Compiler: Interpreter
- 코드가 위에서 아래로 순차적으로 변환이 되며, 그 즉시 나타남.
- 브라우저에서 동작하기 전에 다른 방식으로 코드를 바꿀 이유가 없음.
※ Compiler 언어는 브라우저에서 동작하기 전에 다른 방식으로 코드를 바꿔야 함. (ex: C, C++)
4. Sever측 코드와 Client측 코드
- Sever측 코드: 서버에서 작동되고 결과가 사용자의 브라우저에 표시.
데이터베이스로부터 데이터를 던지는 등 동적으로 새로운 컨텐츠를 만듦.
(ex: Php, Phyton, Ruby, Asp.net, Node.js)
- Client측 코드: 사용자의 컴퓨터에서 작동, 표시되는 코드, 다운로드->표시.
새로운 HTML표를 만들어서 서버에서 요청한 데이터를 뿌려서 사용자에게 보임.
(ex: 자바스크립트 모듈)
- Html 내부에 코드로 JavaScript 추가하기
1. 코드 입력
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Apply JavaScript example</title>
</head>
<body>
<button>Click me</button>
<script>
function createParagraph() {
var para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', createParagraph)
}
</script>
</body>
</html>
2. 미리보기
- Html 내부에 파일로 JavaScript 추가하기 (코드를 만드는 입장에서 구성하기 좋고, 재사용 가능)
1. 'index.html' 코드 입력
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Apply JavaScript example</title>
</head>
<body>
<button>Click me</button>
<script src='scripts/sctipt.js'></script>
</body>
</html>
2. 'script.js' 코드 입력
function createParagraph() {
var para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', createParagraph)
}
3. 미리보기
- 주석
1. // 주석: 1줄의 주석문 구성 가능
// I am comment
2. /* 주석 */: 여러 줄의 주석문 구성 가능
/*
I am also
a comment
*/
3. 주석문 사용의 예
// create a new paragraph and append it to the bottom of the HTML body.
function createParagraph() {
var para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
/*
1. Get references to all the buttons on the page and sort them in an array.
2. Loop through all the buttons and add a click event listener to each one.
When any button is pressed, the createParagraph() function will be run.
*/
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', createParagraph)'STUDY > CODING' 카테고리의 다른 글
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 7 (0) | 2019.08.26 |
|---|---|
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 6 (0) | 2019.08.25 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 4 (0) | 2019.08.23 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 3 (0) | 2019.08.23 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 2 (0) | 2019.08.21 |
