용어정리
DOM(Document Object Model)
- 문서 객체 모델 => 웹페이지 문서 내의 모든 엘리먼트들을 정의하고 접근하는 방법을 제공
함수(function)
- method or procedure 등으로 불리며 특정 동작을 수행하는 일정 코드의 부분
native javascript
- 기본 문법으로만 사용되는 자바스크립트
log
- 프로그램의 흐름을 확인하기 위해 남기는 기록, 개발 전 가장 먼저 설계되어야 함
compile
- 소스코드를 기계가 이해할수 있도록 기계어로 번역하는 과정
모든 언어는 컴파일 과정을 거치게 되어 있음
인터프리터(interpreter) 언어
- 실시간 : javascript, php, asp, python
- 비실시간 : C, C++, Java, Go
자바스크립트
- 웹페이지를 동적으로 작동하게 만들기 위해 고안된 언어
기본구조
- 인라인 추가 방식
<div onclick=”javascript:alert(‘1’)”>
<div 이벤트=”javascript:자바스크립트함수();”- 내부 선언 방식
<script>
const NUM = 10; // 지역 상수 선언
// 변수 설정1
// number type
var i = 10; // 변수 선언과 동시에 값을 초기화
i = 20;
console.log(i);
// 변수 설정2
let j = 5; // 지역변수 선언과 동시에 값을 초기화
j = 70;
console.log(j);
/* 자바처럼 넓은 범위를 주석처리 하는 방식 */
let name = '윤수병'; //string type
let age = 29;
let result = name + '는' + age +'살입니다.';
result = `${name}는 ${age}살입니다.`
console.log(result); // 로그 처리
//자바 for문
let items = [1,2,3,4];
for (let index = 0; index < items.length; index++) {
console.log(items[index]);
}
function myFunc(num) {
console.log(num);
}
//Object, Json
let person = {
name: '윤수병',
age: 29
}
console.log(person);
</script>- 외부선언(import) 방식
<script src="script.js"></script>
로그처리
console.log(result); // 로그 처리- 코드 실행 결과를 확인 가능
- 개발자모드(F12) 에서 확인 가능
- 웹페이지의 개발자모드 콘솔에서 직접입력하여 코드의 실행결과를 즉시확인 가능
형식선언
- var num = 1; : 숫자 형식 선언
- var text = 'abcd'; : 텍스트 형식 선언
- 변수 선언에 관대함
연산
<script>
var num = 1; //숫자 형식 선언
var num2 = 2;
console.log(num + num2);
console.log(num - num2);
console.log(num * num2); //곱하기 연산
console.log(num / num2); //나누기연산
console.log(num % num2); //나머지연산
</script>
텍스트 병합
<script>
var num = ‘나는’;
var num2 = ‘ 개발자입니다. ’;
console.log(num + num2);
</script>- 문자형 변수 간의 덧셈은 문자간의 병합을 의미
typeof 변수의 타입을 확인
<script>
var num = 1;
var num2 = ‘ 개발자입니다. ’;
var num3 = ‘0’;
var test = num1 + num2
var test2 = num3 + num1
console.log(typeof num);
console.log(typeof num2); - console.log 대신 웹페이지의 개발자모드 콘솔창에서 직접 입력하여 확인 가능
함수 선언 및 실행
<script>
function test(i) {
console.log(i);
return 0;
}
test(1);
</script>경고창 실행
<script>
alert(`${name}님 안녕하세요`);
</script>- 변수 name 값을 받아 해당 문장이 경고창에 출력됨
물어보기 창
<script>
confirm(‘Hi?');
</script>외부입력 창
<script>
var text = prompt(‘안녕 하실래요?');
console.log(text);
</script>조건문 if / else if / else
<script>
if (조건1) {
console.log(출력);
} else if (조건2) {
console.log(출력);
} else {
조건외의 결과를 출력
console.log(출력);
}
</script>- '===' 과 '=='의 차이
- '===' 은 엄격한 변수간의 비교
- '==' 은 1과 '1'을 동일하게 인식
반복문 for
<script>
//자바 for문
let items = [1,2,3,4];
for (let index = 0; index < items.length; index++) {
console.log(items[index]);
}
</script>Object, Json
<script>
let person = {
name: '윤수병',
age: 29
}
</script>DOM 조작
html 코드를 자바스크립트로 & selector
css 코드를 자바스크립트로
<!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>Document</title>
</head>
<body onload="init()">
<style>
.small-text {
font-size: small; // 스타일 태그 내부에 폰트 사이즈 조절 클래스 생성
}
.big-text {
font-size: xx-large;
}
#box { // id = 'box' 인 div에 대한 설정을 표현
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<!-- #target => div의 id 간단식 -->
<div id="target" class='small-text'>Hello</div>
<button onclick="changeStyle()">스타일 변경</button>
<button onclick="changeClass()">클래스 변경</button>
<button id="my_button">코드로 이벤트 연결</button>
<!-- ul>li.item*4 -->
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<div id="box" onmouseover="onMouseOver()" onmouseleave="onMouseLeave()"></div>
<script>
function onMouseOver() {
console.log('mouseover');
}
function onMouseLeave() {
console.log('mouseleave');
}
function changeStyle() {
let $target = document.getElementById('target'); // html을 자바스크립트로
$target.style.color = 'blue'
}
function changeClass() {
let $target = document.getElementById('target');
$target.className = 'big-text' // css를 자바스크립트로
}
function init() {
console.log('init!!!');
//이벤트 작성
let $button = document.getElementById('my_button');
$button.addEventListener('click', function (){
console.log('Click!!!');
});
}
// DOM 객체에 접근
let $target = document.getElementById('target');
// css의 셀렉터 그대로 활용할 수 있다
// document.querySelector('#target')
// document.querySelectorAll('.small-text')
// document.querySelectorAll('button')
// document.write('Hello World<br>');
// document.write('Hello World');
console.log('body 완료!!!');
</script>
</body>
</html>-
id가 target인 엘리먼트의 값을 식별자($target)에 입력
-
$ : 식별자, 객체의 이름
-
$target.style.color = 'blue' : 그 객체의 텍스트 색상을 파랑으로 변경
-
$target.className = 'big-text' : 객체의 클래스 이름을 변경
-
#id이름 : 특정 id 이름을 가진 것에 대한 스타일을 지정 가능
-
onmouseover="onMouseOver()"
: 해당 영역에 마우스를 갖다대거나 떠날때의 명령을 입력 가능 -
document.getElementById(“test”).innerHTML = "HI"
: test id를 가진 것의 값을 HI로 변경
이벤트 예시
<button onclick=”alert(‘클릭함’)” />
<select onchange=”alert(‘선택됨’)”
<div onmouseover=”alert(‘마우스 들어옴’)”
<div onmouseout=”alert(‘마우스 나감’)”
<body onload=”alert(‘load’)”
<textarea onkeydown=”alert(‘키보드 입력됨’)”
배운 건 써 먹자