Javascript (JS)
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.
1. 자바스크립트는 HTML의 '내용'을 변경할수 있습니다
2. 자바스크립트는 HTML의 '속성'을 변경할수 있습니다.
3. 자바스크립트는 HTML의 '스타일'을 변경할수 있습니다.
Javascript 문법
var firstVar = 10; // Camel Case 방식
function my_first_func { // Underscore Case 방식
var firstLocalVar = 20; // Camel Case 방식
}
주석
1. 한 줄 주석 : // 주석문
2. 여러 줄 주석 : /* 주석문 */
Javascript 기본적인 것들
변수 선언
var 변수이름;
변수이름 = "원하는 내용";
Example
var name = "정현수";
const name = "정현수";
let name = "정현수";var는 예전부터 문법에 존재하던 변수!
let, const는 새로 생겨남
var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 납니다.
var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.
var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).
var의 경우 버그 발생과 메모리 누수의 위험 등이 있기 때문에 var말고 let, const를 사용하시는 것이 좋습니다.
연산자
타입
const one = "one";
const two = 2;
var three;
var four = true;
console.log(typeof(one));
console.log(typeof(two));
console.log(typeof(three));
console.log(typeof(four));
Javascript 함수
함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다.
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다.
function addNum(x, y) {
return x + y;
}
document.write(addNum(2, 3));
Javascript DOM
문서 객체 모델(DOM)이란?
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.
- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
Document 객체
Document 객체는 웹 페이지 그 자체를 의미합니다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다.
Document 메소드
Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공합니다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
HTML 요소의 선택
HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같습니다.
메소드설명
|
document.getElementsByTagName(태그이름) |
해당 태그 이름의 요소를 모두 선택함. |
|
document.getElementById(아이디) |
해당 아이디의 요소를 선택함. |
|
document.getElementsByClassName(클래스이름) |
해당 클래스에 속한 요소를 모두 선택함. |
| document.getElementByName(name속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함. |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함. |
HTML 요소의 생성
새로운 HTML 요소를 생성하기 위해 제공되는 메소드는 다음과 같습니다.
메소드설명
|
document.createElement(HTML요소) |
지정된 HTML 요소를 생성함. |
| document.write(텍스트) | HTML 출력 스트림을 통해 텍스트를 출력함. |
HTML 이벤트 핸들러 추가
HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같습니다.
메소드설명
|
document.getElementById(아이디).onclick = function(){ 실행할 코드 } |
마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함. |
DOM 요소의 선택
1. HTML 태그 이름(tag name)을 이용한 선택 getElementsByTagName()
2. 아이디(id)를 이용한 선택 getElementById()
3. 클래스(class)를 이용한 선택 getElementsByClassName()
4. name 속성(attribute)을 이용한 선택 getElementByName()
5. CSS 선택자(selector)를 이용한 선택 querySelectorAll()
6. HTML 객체 집합(object collection)을 이용한 선택
var title = document.title; // <title> 요소를 선택함.
document.write(title);
var str = document.getElementById("text"); // 아이디가 "str"인 요소를 선택함.
function changeRedColor() {
str.style.color = "red";
} // 해당 요소의 글자색을 빨간색으로 변경함.
function changeBlackColor() {
str.style.color = "black";
} // 해당 요소의 글자색을 검정색으로 변경함.
Javascript 사용법 두 가지
1. HTML안에서 스크립트를 생성할 수 있다.
<div id="date"></div>
<button onclick="printDate()">버튼을 클릭해보자</button>
<!-- 이렇게도 선언할 수 있다. -->
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
버튼을 클릭하면
현재의 시간이 뜬다.
2. 외부에서 스크립트를 생성해서 HTML에서 부를 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Home Page</title>
<link rel="stylesheet" type="text/css" href="myhomepage.css">
</head>
<body>
<div id="box1">박스 아이디1</div>
<div id="box2">박스 아이디2</div>
<button onclick="onClickButton()">박스 1의 색을 바꾸자!</button>
<button id="box2click">박스 2의 글을 추가하자!</button>
<div id="date"></div>
<button onclick="printDate()">버튼을 클릭해보자</button>
<!-- 이렇게도 선언할 수 있다. -->
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
<div script={}>클릭해보세요</div>
</body>
<script src="myhomepage.js"></script>
</html>
// html에서 호출 가능
function onClickButton(){
// ID가 box1인 오브젝트를 HTML에서 가져온다.
const box1 = document.getElementById("box1");
// 가져온 box1의 스타일(백그라운드컬러)를 빨강으로 변경!
box1.style.backgroundColor = "red";
}
// ID가 box2click 이라는 오브젝트를
// 가져와서 "button" 이라는 변수에 담는다.
const button = document.getElementById("box2click");
// button 변수를 클릭했을 때 함수를 실행한다.
button.onclick = function(){
// box2 라는 변수는 HTML에서 ID가 box2라는 오브젝트를 가져온다.
const box2 = document.getElementById("box2");
// text 라는 변수는 p 태그를 만든다.
const text = document.createElement("p");
// text의 HTML은 "안녕하세요 저는 p 에요" 라는 TEXT를 가진다.
text.innerHTML="안녕하세요 저는 p 에요";
// text라는 변수를 box2의 자식으로 붙인다.
box2.appendChild(text);
}
각각을 클릭했을 때 변한다.
자바스크립트로 만든 간단한 더하기 버튼
<div id="add">
숫자를 입력해보세요</br>
숫자 1 <input id="number1" type="number" required/>
숫자 2 <input id="number2" type="number" required/>
<button id="addButton">더하기</button>
<p><span id="number1Input">숫자 1</span> + <span id="number2Input">숫자 2</span> = <span id="answer"></span></p>
</div>const addButton = document.getElementById("addButton");
addButton.onclick = function() {
let number1 = document.getElementById("number1").value;
let number2 = document.getElementById("number2").value;
const answerInput = document.getElementById("answer");
const number1Input = document.getElementById("number1Input");
const number2Input = document.getElementById("number2Input");
let answer = Number(number1) + Number(number2);
number1Input.innerHTML = Number(number1);
number2Input.innerHTML = Number(number2);
answerInput.innerHTML = answer;
}
전체 코드
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Home Page</title>
<link rel="stylesheet" type="text/css" href="myhomepage.css">
</head>
<body>
<div id="box1">박스 아이디1</div>
<div id="box2">박스 아이디2</div>
<button onclick="onClickButton()">박스 1의 색을 바꾸자!</button>
<button id="box2click">박스 2의 글을 추가하자!</button>
<div id="date"></div>
<button onclick="printDate()">버튼을 클릭해보자</button>
<!-- 이렇게도 선언할 수 있다. -->
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
<!-- required를 적어주면 숫자만 적게 가능 -->
<div id="add">
숫자를 입력해보세요</br>
숫자 1 <input id="number1" type="number" required/>
숫자 2 <input id="number2" type="number" required/>
<button id="addButton">더하기</button>
<p><span id="number1Input">숫자 1</span> + <span id="number2Input">숫자 2</span> = <span id="answer"></span></p>
</div>
</body>
<script src="myhomepage.js"></script>
</html>Javascript
const one = "one";
const two = 2;
var three;
var four = true;
console.log(typeof(one));
console.log(typeof(two));
console.log(typeof(three));
console.log(typeof(four));
// html에서 호출 가능
function onClickButton(){
// ID가 box1인 오브젝트를 HTML에서 가져온다.
const box1 = document.getElementById("box1");
// 가져온 box1의 스타일(백그라운드컬러)를 빨강으로 변경!
box1.style.backgroundColor = "red";
}
// ID가 box2click 이라는 오브젝트를
// 가져와서 "button" 이라는 변수에 담는다.
const button = document.getElementById("box2click");
// button 변수를 클릭했을 때 함수를 실행한다.
button.onclick = function(){
// box2 라는 변수는 HTML에서 ID가 box2라는 오브젝트를 가져온다.
const box2 = document.getElementById("box2");
// text 라는 변수는 p 태그를 만든다.
const text = document.createElement("p");
// text의 HTML은 "안녕하세요 저는 p 에요" 라는 TEXT를 가진다.
text.innerHTML="안녕하세요 저는 p 에요";
// text라는 변수를 box2의 자식으로 붙인다.
box2.appendChild(text);
}
const addButton = document.getElementById("addButton");
addButton.onclick = function() {
let number1 = document.getElementById("number1").value;
let number2 = document.getElementById("number2").value;
const answerInput = document.getElementById("answer");
const number1Input = document.getElementById("number1Input");
const number2Input = document.getElementById("number2Input");
let answer = Number(number1) + Number(number2);
number1Input.innerHTML = Number(number1);
number2Input.innerHTML = Number(number2);
answerInput.innerHTML = answer;
}CSS
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
div {
/* 테두리 굵기, 선 모양, 색상 */
border: 1px solid rgb(189, 84, 84);
/* div안의 text들은 가운데 정렬을 해라! */
text-align: center;
/* margin을 위에서 부터 시계방향으로 10, 20, 30, 40px 씩 준다. */
/* margin: 10px 20px 30px 40px; */
margin: 15px;
padding : 20px;
font-family: 'Black Han Sans', sans-serif;
}
button:hover {
background-color: black;
color: white;
}
button {
margin: 10px auto;
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
}
#add {
text-align: center;
}
input {
margin: 10px auto;
background-color: #f6ff4b;
border: none;
color: rgb(0, 0, 0);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
}참고
tcpschool.com/javascript/js_dom_concept
'대내 활동 > 웹프로그래밍 상상튜터링' 카테고리의 다른 글
| 웹 프로그래밍 멘토멘티 프로그램 5회차 (0) | 2020.09.20 |
|---|---|
| 웹 프로그래밍 멘토멘티 프로그램 4회차 (0) | 2020.09.12 |
| 웹 프로그래밍 멘토멘티 프로그램 2회차 (2) | 2020.08.30 |
| 웹 프로그래밍 상상튜터링 프로그램 1회차 (0) | 2020.08.25 |