์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Absolute
- AGI
- ai
- AI agents
- AI engineer
- AI researcher
- ajax
- algorithm
- Algorithms
- aliases
- Array ๊ฐ์ฒด
- ASI
- bayes' theorem
- Bit
- Blur
- BOM
- bootstrap
- canva
- challenges
- ChatGPT
- Today
- In Total
A Joyful AI Research Journey๐ณ๐
[14] 230116 Ch. 8 ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด: 12. ํจ์, 13. ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ถ๋ ฅ [K-๋์งํธ ํธ๋ ์ด๋ 14์ผ] ๋ณธ๋ฌธ
[14] 230116 Ch. 8 ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด: 12. ํจ์, 13. ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ถ๋ ฅ [K-๋์งํธ ํธ๋ ์ด๋ 14์ผ]
yjyuwisely 2023. 1. 16. 12:49230116 Mon 14th class
Ch. 8 ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด
Ch. 9 ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด (์ฃผ์ ๋ณ๋ก ๋ฌถ๊ธฐ ์ํด ์๊ธ๋ก ๊ธ ๋ด์ฉ ์ฎ๊น)
์ง๋: p. 317 ~ (๊ต์ฌ: HTML5 + CSS3 + JavaScript๋ก ๋ฐฐ์ฐ๋ ์นํ๋ก๊ทธ๋๋ฐ ๊ธฐ์ด, ์ ์: ์ฒ์ธ๊ตญ)
์ค๋ ๋ฐฐ์ด ๊ฒ ์ค ๊ธฐ์ตํ ๊ฒ์ ์ ๋ฆฌํ๋ค.
์ง๋ ์์ ๋ ๋ฐฐ์ด ๊ฒ ์ค ๋ค์ ๊ธฐ์ตํ ๊ฒ
ex) "demo"์์์ innerHTML๋ x๋ก ์ค์ ๋๋ค.
document.getElementById("demo").innerHTML = x;
- getElementById() ํจ์๋ ํด๋น๋๋ id์ ์์์ ์ ๊ทผํ๋ ํจ์๋ค.
ex) <ํน์ ํ๊ทธ id = "aaa"> ๋ผ๋ ๋ถ๋ถ์ด ์์ ๋
document.getElementById("aaa")๋ผ๊ณ ํ๋ค๋ฉด <ํน์ ํ๊ทธ id = "aaa">๋ผ๋ ๋ถ๋ถ์ ์ ๊ทผํ ์ ์๋ค.
getElementById()๋ฅผ ์ด์ฉํด์ <ํน์ ํ๊ทธ id = "aaa">์ ์ฌ๋ฌ ํน์ฑ๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฐ๊ฟ ์ ์๋ค.
document.getElementById()
: ์ง์ ๋ ์ ์ผํ ID๋ฅผ ๊ฐ์ง ์์(element)๋ฅผ ์ฐพ๋ ํจ์
element = document.getElementById(id)
: id : ์ ๊ทผํ๊ฑฐ๋ ์กฐ์ํ๊ณ ์ ์ํ๋ ์์์ id๋ฅผ ์
๋ ฅํ๋ค.
์์) Click me!๋ฅผ ํด๋ฆญํ๋ฉด getValue()๋ฅผ ํธ์ถํ๋ค.
getElementById()ํจ์๋ฅผ ์ด์ฉํด myHeader ์์์ ์ ๊ทผํ๋ค.
๊ทธ ๋ค์ myHeader์ ์์ ์์ ๋ด์ฉ์ innerHTML๋ก ์ป์ด์์ alert()ํจ์๋ฅผ ์ด์ฉํด์ ์ถ๋ ฅํ๋ค.
์์)
<script>
function getValue(){
//getElementById๋ก ID๊ฐ myHeader์ธ ์์(element)๋ฅผ ๋ฐํํ๋ค.
var x = document.getElementById("myHeader");
//alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id = "myHeader" onclick="getValue()"> Click me! </h1>
</body>
๊ฒฐ๊ณผ)
์ฐธ๊ณ : http://jynote.net/entry/Javascript-documentgetElementById
- ์ํฐํค ํจ๊ณผ: "\n" ์ฌ์ฉํ๋ค.
ex)
document.getElementById("result").value += dan+" X "+ i + " = " + dan*i + "\n";
"<br>" ์ฌ์ฉํ๋ค.
๋ฐฑ์ฌ๋์ฌ ํค: \ (ํค๋ณด๋์์ ํ๊ธ ์ํ ํค ๋๋ฅธ๋ค.)
- ๋ฐฐ์ด์ [ ... ]์ ๊ฐ์ด ๋๊ดํธ๋ฅผ ์ฌ์ฉํ๋ค.
๊ฐ์ฒด๋ {...}์ ๊ฐ์ด ์ค๊ดํธ๋ก ์ ์ธํ๋ค.
- ๋ฆฌํฐ๋ด์ ๋ณ์์ ๊ฐ์ด ๋ณํ์ง ์๋ ๋ฐ์ดํฐ(๋ฉ๋ชจ๋ฆฌ ์์น ์์ ๊ฐ)๋ฅผ ์๋ฏธํ๋ค.
- ์์ฑ์: ๊ฐ์ฒด๊ฐ ์์ฑ๋ ๋๋ง๋ค ์คํ๋๋ ๋ฉ์๋
A constructor is a special method of a class or structure in object-oriented programming that initializes a newly created object of that type. Whenever an object is created, the constructor is called automatically.
Ch. 8 ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด
์ฑ ์ ๋ชฉ์ฐจ
-์๋ฐ์คํฌ๋ฆฝํธ์ ์๊ฐ
-์๋ฐ์คํฌ๋ฆฝํธ์ ์ฉ๋
-์๋ฐ์คํฌ๋ฆฝํธ์ ์์น
-๋ฌธ์ฅ
-๋ณ์
-์๋ฃํ
-์ฐ์ฐ์
-์ซ์์ ๋ฌธ์์ด ์ฌ์ด์ ๋ณํ
-์กฐ๊ฑด๋ฌธ
-๋ฐ๋ณต๋ฌธ
-๋ฐฐ์ด
-ํจ์
-์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ถ๋ ฅ
1. ํจ์ p. 317
ํจ์๋ ์ด๋ฆ์ ๊ฐ์ง๋ฉฐ ์
๋ ฅ์ ๋ฐ์์ ํน์ ํ ์์
์ ์คํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค.
ํจ์์ ์ฝ๋๋ ์ธ๋ถ์์ ํธ์ถํ์ ๋๋ง ์คํ๋๋ค.
(ํจ์๋ ์
๋ ฅ์ ๋ฐ์์ ํน์ ํ ์์
์ ์ํํ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ ๋ธ๋ ๋ฐ์ค์ ๊ฐ๋ค.)
function ํจ์์ด๋ฆ () { ํจ์ ๋ชธ์ฒด } |
function: ํค์๋ function์ผ๋ก ํจ์๊ฐ ์์๋๋ค.
ํจ์์ด๋ฆ: ๋ํ์ฒด๋ก ํ๊ธฐํ๋ค. (ex. myNewCar: ์๋ฌธ์(์ฒซ๊ธ์), ๋๋ฌธ์(๋๋จธ์ง ๋จ์ด์ ์ฒซ๊ธ์))
์์)
<script>
//ํจ์(showDialog) ์ ์ธ
function showDialog(){
alert("์๋
ํ์ธ์.");
}
</script>
</head>
<body>
<button onclick="showDialog()" >Try it!</button>
</body>
๊ฒฐ๊ณผ)
1.1 ๋งค๊ฐ ๋ณ์(Parameter)์ ์ธ์(Argument)
- ๋งค๊ฐ๋ณ์(Parameter)
: ํจ์๋ฅผ ์ ์ธํ ๋ ์ธ์๋ฅผ ๋ฐ์ ๋ณ์๋ก ์ ์ธํด์ผ ํ๋ค. (์ธ์)
์ํ: ๋ ๊ฐ ์ด์์ ๋ณ์ ์ฌ์ด์์ ํจ์ ๊ด๊ณ๋ฅผ ์ ํ๊ธฐ ์ํ์ฌ ์ฐ์ด๋ ๋ ๋ค๋ฅธ ํ๋์ ๋ณ์.
ex) a, b
ex) function name(paramter1, parameter2)
- ์ธ์(Argument): ํจ์๋ฅผ ํธ์ถํ ๋ ์ด๋ค ๊ฐ์ ํจ์๋ก ์ ๋ฌํ ์ ์๋ค. ์ธ์๋ ํจ์ ๋ด๋ถ์์ ์ฌ์ฉ๋ ์ ์๋ค. ์ฝค๋ง๋ก ๊ตฌ๋ถํ๊ธฐ๋ง ํ๋ฉด ์ผ๋ง๋ ์ง ๋ง์ ์ธ์๋ฅผ ๋ณด๋ผ ์ ์๋ค.
ex) ์ซ์ 1, 2
ex) name(argument1, argument2)
์์)
<script>
//ํจ์ ์ ์ธ - ๋งค๊ฐ ๋ณ์ (์ธ์)
function greeting(name, position){
alert(name + " " + position + "๋์ ํ์ํฉ๋๋ค.");
}
</script>
</head>
<body>
<!-- ํจ์ ํธ์ถ - ์ธ์ -->
<button onclick = "greeting('ํ๊ธธ๋','๋ถ์ฅ')"> ๋๋ฌ๋ณด์ธ์ </button>
</body>
๊ฒฐ๊ณผ)
1.2 ๋ฌด๋ช ํจ์(Anonymous function)
ํจ์์ ์ด๋ฆ์ ์ฃผ์ง ์๊ณ ๋ง๋ค์ด์ ํ๋ฒ๋ง ์ฌ์ฉํ๋ ํจ์์ด๋ค. ex) ์ด๋ฒคํธ ์ฒ๋ฆฌ ํจ์์ ์ฃผ๋ก ๋ง์ด ์ฌ์ฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์ ํจ์๋ ๊ฐ์ฒด์ฒ๋ผ ์ทจ๊ธ๋๋ค. ์ฆ ๋ณ์์ ์ ์ฅ๋์๋ค๊ฐ ๋์ค์ ํธ์ถ๋ ์ ์๋ค.
์์)
<script>
var greeting1=function(name, position){
alert(name + " " + position + "๋์ ํ์ํฉ๋๋ค.");
}
</script>
</head>
<body>
<!-- ํจ์ ํธ์ถ - ์ธ์ -->
<button onclick = "greeting1('ํ๊ธธ๋','๋ถ์ฅ')"> ๋๋ฌ๋ณด์ธ์ </button>
</body>
๊ฒฐ๊ณผ)
1.3 ํจ์์ ๋ฐํ๊ฐ (return)
ํจ์ ๋ด๋ถ์์ return ๋ฌธ์ฅ์ ์ฌ์ฉํ๋ฉด ๊ฐ์ ๋ฐํํ ์ ์๋ค.
return ๋ฌธ์ฅ์ ์ฌ์ฉํ๋ฉด ํจ์๊ฐ ์คํ์ ์ค์งํ๊ณ ์ง์ ๋ ๊ฐ์ ํธ์ถํ ๊ณณ์ผ๋ก ๋ฐํํ๊ณ ํจ์๋ฅผ ์ข
๋ฃํ๋ค.
๋ฐํ๋ ๊ฐ์ ์ด๋์ ์ ์ฅํ์ง ์๊ณ ๋ฐ๋ก ์์์ ์ฌ์ฉํด๋ ๋๋ค.
"para1" ์์์ innerHTML๋ ํจ์ "sub()"์ด ๋ฐํํ ๊ฐ์ธ 1๋ก ์ค์ ๋๋ค.
document.getElementById("para1").innerHTML = sub();
์์1) value๋ 1๊ฐ์ ๊ฐ์ง๋๋ฐ ํจ์ sub()์ด ๋ฐํํ ๊ฐ์ด๋ค.
var value = sub(); //ํจ์ ํธ์ถ
function sub()
{
var x;
x = 1;
return x;
}
์์2) return ์์ด alert(x); ์ฌ์ฉ
<script>
function sub(){
var x;
x=1;
alert(x);
}
</script>
</head>
<body>
<button onclick="sub()"> x๊ฐ์ ์ฌ๊ธฐ์ ์๋ฆผ </button>
๊ฒฐ๊ณผ)
์์2.1) return x;๋ฅผ ์ฌ์ฉ. <button onclick="alert(sub())">๋ก ๋ฐ๊พผ๋ค.
<script>
function sub(){
var x;
x=1;
return x;
}
</script>
</head>
<body>
<button onclick="alert(sub())"> x๊ฐ์ ์ฌ๊ธฐ์ ์๋ฆผ </button>
๊ฒฐ๊ณผ)
1.4 ์ง์ญ ๋ณ์(Local variable), ์ ์ญ ๋ณ์(Global variable)
1.4.1 ์ง์ญ ๋ณ์(Local variable)
ํจ์ ์์์ ์ ์ธ๋ ๋ณ์๋ก ํจ์ ์์์๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๋ค. ๋ค๋ฅธ ํจ์์์๋ ๋๊ฐ์ ์ด๋ฆ์ผ๋ก ์ ์ธ์ด ๊ฐ๋ฅํ๋ค.
์ง์ญ๋ณ์๋ ํจ์๊ฐ ์ข
๋ฃ๋๋ฉด ์๋์ ์ผ๋ก ์๋ฉธ๋๋ค. ๋์ ํจ์ ์ ์ธ, ํธ์ถ๋ก๋ ๊ฐ๋ฅํ๋ค.
์์)
for (var i=0; i<5; i++){
var sum = 0;
sum = sum + i;
document.write(i+"<br>");
}
document.write(sum);
๊ฒฐ๊ณผ) 0 = 0 + 4 ๋ก sum์ด 4๋ก ๋์จ๋ค.
์์2)
const๋ ๋ณ์ ์ฌ์ ์ธ, ๋ณ์ ์ฌํ ๋น ๋ชจ๋ ๋ถ๊ฐ๋ฅํ๋ค. ๋ณ์๋ฅผ ์ ์ธํ ๋ ์ด๊ธฐ๊ฐ์ ํจ๊ป ์ค์ ํด์ผ ํ๋ค. (๋ณ์๋ง ์ ์ธํ๋ฉด syntax error ๋ฐ์)
๋ฐ๋ฉด, let์ ๋ณ์์ ์ฌํ ๋น(์ด๋ฏธ ์ ์ธํ ๋ณ์๋ช
์ ๋ค์ ์ ์ธ)์ด ๊ฐ๋ฅํ๋ค. (var์ let์ ๊ฒฝ์ฐ์๋ ๋จผ์ ๋ณ์๋ฅผ ์ ์ธํ๊ณ ํ์ ๊ฐ์ ํ ๋นํ๋ ๊ฒ์ด ๊ฐ๋ฅํ๋ค.)
๋ณ์ ์ ์ธ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก const๋ฅผ ์ฌ์ฉํ๊ณ , ์ฌํ ๋น(update)์ด ํ์ํ ๊ฒฝ์ฐ์ ํ์ ํด let์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
(์ฌํ ๋น(update)์ ํ์ฌ ๋ณ์์ ์ ์ฅ๋ ๊ฐ์ ๋ฒ๋ฆฌ๊ณ ์๋ก์ด ๊ฐ์ ์ ์ฅํ๋ ๊ฒ์ด๋ค.)
(์ฌ์ ์ธ(re-declaration)์ ์ด๋ฏธ ์ ์ธํ ๋ณ์๋ช
์ ๋ค์ ์ ์ธํ๋ ๊ฒ์ด๋ค.)
for (let i=0; i<5; i++){
let sum = 0;
sum = sum + i;
document.write(i+"<br>");
}
document.write(sum); //sum์ ์ง์ญ ๋ณ์์ฌ์ ์๋ฉธ๋๋ค.
๊ฒฐ๊ณผ) sum์ ์ง์ญ ๋ณ์์ฌ์ ์๋ฉธ๋๋ค. ๊ทธ๋์ ๊ฒฐ๊ณผ๊ฐ ์๋ค.
์์3)
var num = "Hello World (์ ์ญ ๋ณ์)"
function print(){
var num = "Hello World (์ง์ญ ๋ณ์)<br>" //์ง์ญ ๋ณ์์ฌ์ ๋ฐ์ผ๋ก ๋์ค๋ ์๊ฐ ์๋ฉธ๋๋ค.
document.write(num);
}
print(); //์ง์ญ ๋ณ์์ ๊ฐ์ด ๋์จ๋ค.
document.write(num); //์ ์ญ ๋ณ์์ ๊ฐ์ด ๋์จ๋ค.
๊ฒฐ๊ณผ)
1.4.2 ์ ์ญ ๋ณ์(Global variable)
ํจ์ ์ธ๋ถ์์ ์ ์ธ๋ ๋ณ์๋ก ์น ํ์ด์ง ์์ ๋ชจ๋ ์คํฌ๋ฆฝํธ์ ๋ชจ๋ ํจ์๋ ์ ์ญ ๋ณ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
์ฌ์ฉ์๊ฐ ์น ํ์ด์ง๋ฅผ ๋ซ์ผ๋ฉด ์๋ฉธ๋๋ค.
์์)
var sum = 0;
for (var i=0; i<5; i++){
sum = sum + i;
document.write(i+"<br>");
}
document.write(sum);
๊ฒฐ๊ณผ)
์์2)
let sum = 0;
for (let i=0; i<5; i++){
sum = sum + i
document.write(i+"<br>");
}
document.write(sum);
๊ฒฐ๊ณผ)
2. ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ถ๋ ฅ p.322
2.1 alert() ํจ์
์ฌ์ฉ์์๊ฒ ๊ฒฝ๊ณ ๋ฅผ ํ๋ ์๋์ฐ๋ฅผ ํ๋ฉด์ ๋์ฐ๋ ํจ์์ด๋ค. ์ถ๋ ฅ์ ํ์ํ ๋๋ ์ฌ์ฉํ๋ค.
๊ฒฝ๊ณ ์๋์ฐ๊ฐ ๋ํ๋๋ฉด ์ฌ์ฉ์๊ฐ ๊ฒฝ๊ณ ์๋์ฐ๋ฅผ ์ ๊ฑฐํ ๋๊น์ง ๋ค์ ์์
์ด ์งํ๋์ง ์๋๋ค.
์์)
alert("์ด๊ฒ์ด alert()์
๋๋ค.");
๊ฒฐ๊ณผ)
2.2 confirm() ํจ์
์ฌ์ฉ์์๊ฒ ์ด๋ค ์ฌํญ์ ์๋ ค์ฃผ๊ณ ํ์ธ์ด๋ ์ทจ์๋ฅผ ์๊ตฌํ๋ ์๋์ฐ๋ฅผ ํ๋ฉด์ ๋์ด๋ค. ์ฌ์ฉ์๊ฐ ํ์ธ์ ํด๋ฆญํ๋ฉด true๋ฅผ ๋ฐํํ๊ณ ๊ทธ๋ ์ง ์์ผ๋ฉด false๋ฅผ ๋ฐํํ๋ค.
์์)
var user = confirm("confirm()์ ์ฌ์ฉ์์ ๋ต๋ณ์ ์ ๋ฌํฉ๋๋ค.");
๊ฒฐ๊ณผ)
//๋ง์ฝ์ ํ์ธ์ ํด๋ฆญํ๋ฉด if (user){ //๊ฒ์๋ฌผ์ ์ญ์ ํ๋ค. }else{//๊ทธ๋ ์ง ์์ผ๋ฉด(์ทจ์) //๊ฒ์๋ฌผ ์ญ์ ๋ฅผ ์ทจ์ํ๋ค. }*/ |
2.3 prompt() ํจ์
์ฌ์ฉ์์๊ฒ ์ด๋ค ์ฌํญ์ ์๋ ค์ฃผ๊ณ ์ฌ์ฉ์๊ฐ ๋ต๋ณ์ ์
๋ ฅํ ์ ์๋ ์๋์ฐ๋ฅผ ํ๋ฉด์ ๋์ด๋ค.
์ฌ์ฉ์๊ฐ ์
๋ ฅํ ๋ด์ฉ์ ๋ฌธ์์ด๋ก ๋ฐํํ๋ค.
์์) prompt("๋น์นธ ์์ ๋จ๋ ๋ฌธ์ฅ", "๋น์นธ์ ๋จ๋ ๋ฌธ์ฅ") ๋๋ฒ์งธ ๋ถ๋ถ์ ์๋ต ๊ฐ๋ฅํ๋ค.
<script>
var age = prompt("๋์ด๋ฅผ ์
๋ ฅํ์ธ์.", "๋ง๋์ด๋ก ์
๋ ฅํฉ๋๋ค.");
</script>
๊ฒฐ๊ณผ)
์์) ๊ตฌ๊ตฌ๋จ ๊ตฌํ๊ธฐ
์ฝ๋)
<script>
//for๋ฌธ์ ์ด์ฉํ์ฌ ๊ตฌ๊ตฌ๋จ์ ์ถ๋ ฅํ๋ ํจ์ gugudan ๋ง๋ค๊ธฐ.
//ex) ํจ์ ์ธ์๋ก ์ซ์ 2๊ฐ ์ ๋ฌ๋๋ฉด 2๋จ์ ์ถ๋ ฅํ๋ค.
function gugudan(){ //gugudanํจ์ start
var dan = document.getElementById("dan").value;
for (var i = 1 ; i <10 ; i++){
document.getElementById("result").value += dan+" X "+ i + " = " + dan*i + "\n";
}
}//gugudanํจ์ end
</script>
</head>
<body>
<h3>๊ตฌ๊ตฌ๋จ ์
๋ ฅ ๊ฒฐ๊ณผ ๋ณด๊ธฐ</h3>
๋จ ์
๋ ฅ: <input type="text" id="dan">
<input type="button" value="๋จ๊ตฌํ๊ธฐ" onclick="gugudan()"><br><br>
<textarea id="result" rows = "20" cols ="40">
</textarea>
</body>
๊ฒฐ๊ณผ)
textarea#result{text-align:center;} ์ฐ๋ฉด ํ
์คํธ๊ฐ ์ค์ ์ ๋ ฌ๋๋ค.
๊ฒฐ๊ณผ)
๊ธฐํ)
๊ฐ๋ฐ์ ๋๊ตฌ - Console ๋๋ฅด๋ฉด ์ด๋ค ์ฝ๋ ์ค์์ ๋ฌธ์ ๊ฐ ์๋์ง ์๋ ค์ค๋ค. ์ค๋ฅ๊ฐ ๋ฌ์ ๋ ์ ํ์ฉํ๊ธฐ.