<script>
const 함수 = function() {
alert ('함수_01');
alert ('함수_02');
};
const sum = 0;
function 함수02(){
alert('함수02_01');
alert('함수02_02');
}
console.log(함수);
함수();
console.log(typeof(함수));
console.log(typeof(sum));
console.log(함수02);
함수02();
console.log(typeof(함수02));
</script>
<script>
// 함수 선언
function f(x) {
return x*x;
}
function f2(x) {
return 3*x*x+54*x+29
}
// 함수 호출
console.log (f(5));
alert(f(5) + f(10));
console.log (f2(1));
console.log (f2(5));
</script>
<script>
const callback = function() {
console.log( 'callback함수임.')
}
const callback2 = function () {
console.log ('callback2함수임.');
}
function callTenTimes(abc) {
for ( let i=0; i < 10; i++) {
console.log(i);
abc();
}
}
callTenTimes(callback);
callTenTimes(callback2);
callTenTimes(function() {
console.log('익명 함수를 바로 넣음.');
})
</script>
<script>
// 객체를 선언
const product = {
제품명 : '7D 건조 망고',
유형 : '당절임',
성분 : '망고, 설탕, 치자황색소',
원산지 : '필리핀'
};
// 객체를 출력
for (let i in product) {
console.log (i + ":" + product[i]);
};
</script>
<script>
const person = {
name: '홍길동',
eat: function(food){
console.log(this.name + '이 ' + food + '를 먹습니다. ')
}
}
person.eat('피자');
person.eat('김밥');
console.log(person.name);
</script>
<script>
window.onload = function(){
document.querySelector('h1').style.backgroundColor = 'red';
document.querySelector('h2').style.color = 'green';
}
</script>
</head>
<body>
<h1>Process - 1</h1>
<h2>Process - 2</h2>
</body>
</html>
<!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>
window.onload = function(){
document.querySelector('h1').style.backgroundColor = 'violet';
// document.querySelector('h2').style.color = 'green';
// document.getElementById('header').style.color = 'blue';
const header = document.getElementById('header');
header.style.color = 'red';
header.style.backgroundColor = 'blue';
header.innerHTML = 'From JavaScript';
const h2 = document.querySelector('h2');
h2.style.color = 'pink';
h2.style.backgroundColor = 'green';
h2.innerHTML = 'From JavaScript';
let output = '';
for (let i=0; i <10; i++){
output += '<h1>header - ' + i + '<h1>';
};
//document.body.textContent = output;
document.body.innerHTML = output;
};
</script>
</head>
<body>
<h1>Process - 1</h1>
<h2>Process - 2</h2>
<h1 id="header">Header</h1>
</body>
</html>
<!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>
window.onload=function(){
let output='';
for (let i=0; i<256; i++){
output += '<div></div>'
}
document.body.innerHTML = output;
const divs = document.querySelectorAll ('div');
for (let i=0; i<divs.length; i++){
const div = divs[i];
div.style.height = '2px';
div.style.background = 'rgb(' + i + ',' + i + ',' + i + ' )';
}
}
</script>
</head>
<body>
</body>
</html>
<!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>
window.onload = function(){
let image = document.getElementById('image');
image.src = 'http://placehold.it/300x200'
image.width = 300;
image.height = 200;
}
</script>
</head>
<body>
<img id="image">
</body>
</html>
<!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>
window.onload = function() {
// 속성을 지정.
document.body.setAttribute('data-custom', 'value 입니다.');
// 속성을 추출.
const data = document.body.getAttribute ('data-custom');
console.log(data);
const clock = document.getElementById('clock');
setInterval(function(){
const now = new Date();
clock.innerHTML = now.toString();
}, 1000)
}
</script>
</head>
<body>
<h1 id="clock"></h1>
</body>
</html>
<!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>
function buttonClick() {
alert('함수에서 실행.');
}
window.onload= function(){
const button = document.getElementById('button');
button.onclick = function(){
alert('click!!!!');
}
}
</script>
</head>
<body>
<button onclick="alert('CLICK!')">버튼</button>
<button onclick="buttonClick()">버튼</button>
<button id="button">버튼</button>
</body>
</html>
댓글남기기