0.javascript 문법
2022. 8. 18. 17:50ㆍjavascript
2022.08.18.목
1.기본문법
-variable_content
<!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>
<!-- Internal 방식 -->
<script>
console.log("Hello");
</script>
<!-- External 방식 -->
<script src="variables_contents.js"></script>
</head>
<body>
<h1>JavaScript 변수와 상수(variables & constants)</h1>
</body>
</html>//한 줄 주석
/*
여러 줄 주석
*/
//JS 코드만 작성하는 부분
/*
javascript에서의 변수 키워드(keyword, 예약어)
var, let, const
변수 네이밍 규칙 : camelCase(Java와 동일)
let : 재할당 가능
const : 재할당 불가(Java의 final 키워드)
*/
//변수(variable)
let userName = 'Yoo'; //홑따옴표(single quote) 사용 가능
console.log(userName); //browser console에 출력하는 방식
userName = 'why'; //재할당(Reassign) 시에는 let 키워드를 다시 쓰지 않아도 됨
console.log(userName);
//상수(constant)
const allUsers = 20;
//allUsers = 5; //Uncaught TypeError: Assignment to constant variable.
//일단은 무조건 const로 변수를 만들고 작성
//작성 중에 특정 변수 재할당 필요할 시 그때 그 변수만 let으로 변경-data_types
<!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">
<script src="data_types.js"></script>
<title>Javascript 자료형(Javascript Data Types)</title>
</head>
<body>
<h1>Javascript 자료형(Javascript Data Types)</h1>
<hr />
<h2>숫자형(Integer)</h2>
<p>Numbers : 5, -10, 55.23(floating point)</p>
<h2>문자열(String)</h2>
<p>Strings(문자열, Text) : '안녕하세요', "Hi", `ごきげんよう`</p>
<p>String(문자열)은 <b>''(Single quote), ""(Double quote), ``(Backtick, ES2015~)</b>으로 표현 가능.</p>
</body>
</html>console.log(typeof 5);
console.log(typeof 5.5);
console.log('문자열');
const userName = 'yoo';
console.log('저는', userName, '입니다.');
console.log('저는 ' + userName + ' 입니다.');
console.log(`저는 ${userName} 입니다.`); //`(backtick, 백틱기호), template literal 방식-object
<!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">
<script src="object.js"></script>
<title>Javascript 객체(Javascript Object)</title>
<script src="object.js"></script>
</head>
<body>
<h1>Javascript 객체(Javascript Object)</h1>
<hr />
</body>
</html>/*
JS에서 원시 값(Primitive value)을 제외한 모든 것은 객체(Object)
기본적인 차이는 원시 값은 하나의 값만을 나타내지만,
객체는 다양한 타입의 값을 하나의 단위로 구성한 복합 자료 구조
원시 값은 변경 불가한 값(immutable value)
객체는 변경 가능한 값(mutable value)
객체는 프로퍼티(property, 속성)으로 구성된 집합
프로퍼티는 키(key)와 값(value)으로 구성됨
JS에서 사용할 수 있는 모든 값(number, string, object 등등)들은 프로퍼티의 값이 될 수 있음
함수는 일급 객체(first citizen)이기 때문에 값이 될 수 있고
따라서 객체의 프로퍼티가 될 수 있음
*/
//1.객체 생성 - 객체 리터럴 방식 '{ }'
const dog = {}; //비어있는 dog 객체
const cat = {
//property 나열
name: 'toto', //name property에 문자열 값 'toto' 할당
fruit: 'kiwi',
sing: function() { console.log("야옹~"); },
say: function() { console.log(`야옹! ${this.fruit}가 먹고싶어`); }
};
console.table(cat);
console.log(cat);
console.log(typeof cat); //cat은 ooo타입.(typeof, 템플릿 리터럴 활용)
console.log(cat.name); //cat객체의 프로터피에 접근(조회)
//프로퍼티를 동적으로 추가(존재하지 않는 프로퍼티에 값을 할당하면 추가됨)
cat.age = 2;
console.log(cat.age);
//프로퍼티 삭제(delete 연산자 활용)
delete cat.age;
console.log(cat);
//함수 호출 프로퍼티명 뒤에 ()작성
cat.sing();
//cat 객체의 프로퍼티로 say를 작성, 그 값은 함수
//출력문은 야옹! kiwi가 먹고싶어
cat.say();2.중급문법
-function
<!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">
<!-- <script src="function.js"></script> -->
<!-- <script src="arrow_function.js"></script> -->
<script defer src="callback.js"></script>
<title>Javascript 함수(Javascript function)</title>
</head>
<body>
<h1>Javascript 함수(Javascript function)</h1>
<hr />
<button>request</button>
</body>
</html>//JS에서는 함수 작성 방식이 여러 개, 함수 작성시 function 키워드 사용
//기본적인 함수 정의, 함수 선언문 방식
function add(a, b) { return a + b; }; //add라는 이름의 함수 작성, 파라미터 a, b
//함수 호출
console.log(add(2, 3));
//함수 역시 객체 타입의 값이기 때문에
//생성한 함수를 변수에 할당할 수 있음
//두 번째 함수 작성 방식 - 함수 표현식 방식
//(함수를 하나의 값으로써 변수에 할당)
const mtp = function(a, b) { return a * b; };
console.log(mtp); //mtp 변수에 들어있는 값이 무엇인지 출력
console.log(mtp(2, 3));
//ES6 문법 중 화살표 함수(arrow function)
//function 키워드를 사용하지 않고,
//화살표(arrow)를 사용하여 좀 더 간략하게 표현
//=> 화살표 기호
//a - b; : return 부분
const sub = (a, b) => a - b;
console.log(sub);
console.log(sub(2, 3));-arrow_function
/*
Arrow function
2015년(ES2015, ES6)에 발표된
ECMA Script specification(ES6)는
arrow function 추가
파이썬의 lambda function과 비슷
this 바인딩이 필요없고,
함수의 표현과 동작이 전반적으로 간략해진 형태
*/
//화살표 함수의 특징
//1.암묵적인 return
//return 키워드를 생략할 수 있는 경우
//함수 몸체의 구현 부가 한 줄 일때만 가능
const sum = (a, b) => a + b;
const sub = (a, b) => {
console.log('뺄셈입니다.');
return a - b;
};
console.log(sub(2, 3));
//객체를 리턴하는 경우,
//객체 그 자체를 반환할 때는 ()를 작성해야함.
//{} 의미 : 함수의 body, 객체 작성시 사용하는 {}
const div = (a, b) => ({ age : 2 })
console.log(div());
//파라미터가 1개일 경우 ()생략 가능
const square = x => x * x;
console.log(square(10));
//파라미터가 하나도 없는 경우 ()작성 필수
const greet = () => 'hello';
console.log(greet());
//return과 {}를 추가해서 byebye 출력하는 함수
const bye = () => { return console.log('byebye'); };-callback function
/*
callback
어떤 함수의 인자값(argument)으로 보내지는 함수를
callback function이라고 함
*/
//callback 함수 - 기본
function greeting(name) {
console.log('hello ' + name);
}
//어떤 함수 : processUserInput
function processUserInput(name, callbackFn) {
//callbackFn = function greeting(name) { ... };
callbackFn(name);
}
//어떤 함수 processUserInput의 인자 or 인수로 함수 greeting에 전달
processUserInput('yoo', greeting);
//함수 greeting이 콜백함수로 활용됨
const package = {
thing : '사과',
}
function waitCoupang(package, callback) {
console.log(`쿠팡에서 ${package.thing}이 도착했다.`);
callback();
}
function bringToNeighbor() {
console.log('옆집 아주머니에게 전달 완료!');
}
waitCoupang(package, bringToNeighbor);
const button = document.querySelector('button');
console.log(button); //프로퍼티 조회가 어려움
const buttonClickHandler = () => { console.log('button cliked'); };
//button object가 가지고 있는 메서드
button.addEventListener('click', buttonClickHandler);
//화살표 함수 그 자체를 인수로 전달
//button.addEventListener('click', () => { console.log('button cliked'); });-wep_api
<!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">
<script src="web_api.js"></script>
<title>Javascript Web_API</title>
</head>
<body>
<h1>Javascript Web_API</h1>
<hr />
<h2>Web API 개요</h2>
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a>
<h2>Window 객체</h2>
<p>Javascript의 최상위 객체(모든 객체가 소속된 객체), 전역 객체</p>
<a href="https://sahar-e-hassan.medium.com/javascript-window-object-afeb7dc8587f">Window object</a>
<h2>BOM(Browser Object Model)</h2>
<p>브라우저 객체 모델, 브라우저 자체에 대한 몇 가지 조작이 가능, 표준은 따로 없고 각 브라우저 벤더별로 서로 다른 구현 스펙을 가짐.</p>
<h2>DOM(Document Object Model)</h2>
<p>문서 객체 모델, 주로 HTML element의 조작을 통한 웹 페이지의 동적인 액션, 스타일링 등의 처리</p>
<h2>Javascript core(Object, Array, Function ...)</h2>
<p>Javascript 핵심 객체</p>
</body>
</html>//window 객체
console.log(window);
//console.log(window.alert('hi')); = alert('hi')
//window 생략 가능
//현재 윈도우의 너비값
console.log(window.innerWidth);
//BOM객체
//Location object, 현재 문서의 경로(URL)를 나타냄
console.log(location);
console.log(location.href);
//location.assign('https://www.naver.com');
//= location.href='https://www.naver.com';-dom_manipulation
<!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">
<script defer src="dom_manipulation.js"></script>
<title>Javascript DOM</title>
</head>
<body>
<header>
<h1 id="main-title">DOM(Document Object Model)이란?</h1>
</header>
<main>
<p>HTML, XML등을 조작하기 위한 API.</p>
<ul>
<li>Item1</li>
<li class="list-item">Item2</li>
<li class="list-item">Item3</li>
</ul>
</main>
</body>
</html>//DOM 객체
//MTML 문서에 대한 기본 정보만 출력
console.log(document);
//조금 더 자세한 프로퍼티 조회(directory)
console.dir(document);
console.log(window.document == document);
//DOM을 통한 HTML element 조작
//get(가져와) Element(HTML Tag를) byID(id값에 해당하는)
const h1 = document.getElementById('main-title'); //가져온 값 h1 변수에 할당
console.log(typeof h1); //object
console.dir(h1);
console.log(h1.innerText);
const li = document.getElementsByClassName('list-item');
console.log(typeof li)
console.log(Array.isArray(li)); //해당 객체가 array인지 확인, false
const li2 = document.querySelectorAll('.list-item');
console.log(typeof li2);
console.log(Array.isArray(li2)); //false
const fruits = ['apple', 'banana', 'kiwi'];
console.log(typeof fruits);
console.log(Array.isArray(fruits)); //true
//CSS Selector를 통한 조회, 선택자 기호 필수
console.log(document.querySelector('#main-title'));-event
<!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>
<script defer src="event_basic.js"></script>
</head>
<body>
<h1>Javascript 이벤트 추가, 제거</h1>
<hr>
<!-- 1.Event handler attribute 방식 -->
<h3>Event handler attribute 방식</h3>
<button onclick="display()">Click me!</button>
<script>
function display() {
console.log('button clicked');
}
</script>
<!-- 2.Event handler property 방식 -->
<h3>EventHandler property 방식</h3>
<button id="btn-ev-prop">Click me!</button>
<!-- 3.AddEventListner 방식 -->
<h3>AddEventListner 방식</h3>
<button id="btn-add-ev-lsnr">Click me!</button>
</body>
</html>//2.이벤트 핸들러 프로퍼티 방식 - HTML과 js분리
const evPropButton = document.getElementById('btn-ev-prop');
console.dir(evPropButton);
evPropButton.onclick = () => console.log('by event property');
console.dir(evPropButton);
console.log(evPropButton.onclick);
//3.addEventListner 방식
//- 이벤트 핸들러 프로퍼티에 영향을 미치지 않기 떄문에
//등록한 모든 이벤트가 호출됨
//on 접두사 생략
const addEvlsnrButton = document.getElementById('btn-add-ev-lsnr');
// console.log(addEvlsnrButton);
function buttonHandler() {
console.log('double clicked!');
}
function buttonHandler2() {
console.log('double clicked2!');
}
addEvlsnrButton.addEventListener('dblclick', buttonHandler);
addEvlsnrButton.addEventListener('dblclick', buttonHandler2);
addEvlsnrButton.addEventListener('click', () => console.log('button clicked'));
//이벤트 핸들러의 제거
//2.이벤트 핸들러 프로퍼티 방식
// evPropButton.onclick = null;
//3.addEventListner 방식
// addEvlsnrButton.removeEventListener('dblclick', buttonHandler);
//익명함수는 참조할 수가 없어서 제거 불가
// addEvlsnrButton.removeEventListener('click', ??);
'javascript' 카테고리의 다른 글
| 2.ES6/Promise (0) | 2022.09.13 |
|---|---|
| 1.동기, 비동기/ajax/json/node.js (1) | 2022.08.22 |