0812 HTML5 & JavaScript 수업
0812 수업
index.html
설명 : 메인 인덱스 역할을 한다. ES6(ECMAScript 6)와 관련된 다양한 예제 파일로 이동할 수 있는 링크가 포함되어 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
<body>
<h1>ES6 Features and Examples</h1>
<ul>
<li><a href="arrowfunction.html">Arrow Functions</a></li>
<li><a href="let.html">Let vs Var</a></li>
<li><a href="moduledemo1.html">Modules Example 1</a></li>
<!-- More links to other files -->
</ul>
</body>
arrowfunction.html
ES6에서 도입된 화살표 함수를 다룬다. 화살표 함수의 간결한 문법과 this 키워드와의 관계를 설명하고 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
<body>
<h1>Arrow Functions in ES6</h1>
<button onclick="showArrowFunction()">Click me</button>
<script>
const showArrowFunction = () => {
alert("This is an arrow function!");
};
</script>
</body>
defaultfunctionparameter.html
ES6의 기본 함수 매개변수(Default Function Parameters)를 설명한다. 매개변수에 기본값을 설정하여 함수 호출 시 값을 전달하지 않아도 기본값이 사용되는 예제를 보여준다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
<body>
<h1>Default Function Parameters in ES6</h1>
<button onclick="greet()">Greet</button>
<script>
function greet(name = "Guest") {
alert(`Hello, ${name}!`);
}
</script>
</body>
destructuring.html
ES6의 구조 분해 할당(Destructuring Assignment)을 다룬다. 배열이나 객체의 값을 쉽게 추출하여 변수에 할당하는 방법을 설명하고 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
<body>
<h1>Destructuring Assignment in ES6</h1>
<button onclick="showDestructuring()">Show Destructuring</button>
<script>
function showDestructuring() {
const [a, b] = [1, 2];
const {name, age} = {name: "John", age: 30};
alert(`Array Destructuring: ${a}, ${b}\nObject Destructuring: ${name}, ${age}`);
}
</script>
</body>
es6extension.html
ES6에서 확장된 기능들을 다룬다. 클래스 상속, 템플릿 리터럴, 화살표 함수와 같은 다양한 새로운 기능을 설명한다.
주요 코드:
1
2
3
4
<body>
<h1>ES6 Extensions</h1>
<p>ES6 introduced many new features like classes, arrow functions, and template literals.</p>
</body>
let.html
let과 var의 차이점을 다룬다. 블록 스코프를 가진 let과 함수 스코프를 가진 var의 차이점을 예제를 통해 설명하고 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<h1>Let vs Var in ES6</h1>
<button onclick="testLetVar()">Test Let and Var</button>
<script>
function testLetVar() {
let x = 10;
if (true) {
let x = 20; // block scope
alert(`Inside block: ${x}`);
}
alert(`Outside block: ${x}`);
}
</script>
</body>
moduledemo1.html ~ moduledemo4.html
ES6 모듈 시스템을 다루는 시리즈 파일들이다. 각 파일에서는 자바스크립트 모듈을 가져오고, 내보내는 방법을 설명하고 있다.
주요 코드 (moduledemo1.html 예시):
1
2
3
4
5
6
7
<body>
<h1>ES6 Modules Example 1</h1>
<script type="module">
import { greet } from './js/module.js';
greet();
</script>
</body>
restparameter.html 및 restparameter1.html
ES6의 나머지 매개변수(Rest Parameters)를 다룬다. 함수의 매개변수로 전달된 값들을 배열로 처리하는 방법을 설명하고 있다.
주요 코드 (restparameter.html 예시):
1
2
3
4
5
6
7
8
9
10
11
<body>
<h1>Rest Parameters in ES6</h1>
<button onclick="sum(1, 2, 3, 4)">Calculate Sum</button>
<script>
function sum(...numbers) {
let total = numbers.reduce((a, b) => a + b);
alert(`Sum: ${total}`);
}
</script>
</body>
spreadoperator.html 및 spreadoperator2.html
ES6의 전개 연산자(Spread Operator)를 다룬다. 배열이나 객체를 쉽게 복사하거나 결합하는 방법을 설명하고 있다.
주요 코드 (spreadoperator.html 예시):
1
2
3
4
5
6
7
8
9
10
11
12
<body>
<h1>Spread Operator in ES6</h1>
<button onclick="useSpread()">Use Spread Operator</button>
<script>
function useSpread() {
let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
alert(`New Array: ${newArr}`);
}
</script>
</body>
templateliteral.html
ES6의 템플릿 리터럴(Template Literals)을 다룬다. 백틱(`)을 사용해 문자열을 쉽게 연결하고 변수를 포함하는 방법을 설명하고 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
<body>
<h1>Template Literals in ES6</h1>
<button onclick="showTemplateLiteral()">Show Message</button>
<script>
function showTemplateLiteral() {
let name = "John";
let message = `Hello, ${name}! Welcome to ES6.`;
alert(message);
}
</script>
</body>
js/*.js 및 js/*.mjs
각 자바스크립트 파일은 HTML 파일에서 사용되는 로직과 모듈을 포함하고 있다. 예를 들어, module.js 파일에서는 모듈로 내보내는 함수나 변수를 정의하고, main.mjs 파일에서는 모듈을 가져와서 사용하는 방법을 설명하고 있다.
주요 코드 (example.js 예시):
1
2
3
export function greet() {
alert("Hello from the module!");
}