๐กJava Script ๊ธฐ์ด ๋ฌธ๋ฒ
<body>
...
<script> // ์ด๊ณ ๋ซ๋ ํ๊ทธ, ์ฌ๊ธฐ์๋ถํฐ Java Script ์ฝ๋
document.write('ํ๊ณ ์ถ์ ๋ง');
</script>
์ธ๋ฏธํด๋ก : ; // ํ๋์ ๋ช ๋ น์ด ๋๋จ
ex) document.write('์๋ '); // Java Script๋ ์ ์ฐํ ์ธ์ด๋ผ์ ์ธ๋ฏธ์ฝ๋ก ์ ๋ถ์ด์ง ์์๋ ์ ์๋ํจ. but, ์ค ๋ฐ๊ฟ ํ์
- ์ฃผ์ : // , /* */
- ๋ณ์ (var)
: ๋ฐ์ดํฐ๋ฅผ ์ด๋ฆํ๊ฐ ์๋ ์์์ ๋ด์์ค
var ๋ณ์์ด๋ฆ = ๊ฐ; -> var num = 10; // ๋ณ์์ด๋ฆ = ์์์ด๋ฆ, ๊ฐ = ๋ฃ๊ณ ์ถ์ ๋ฐ์ดํฐ
- ๋ฐ์ดํฐ ์๋ฃํ
๋ฌธ์์ด (string) : '์๋ ', "์๋ "
์ ์ (int) : -1, 0, 1
์ค์ (float) : 0.25
๋ถ (bool) : true or false
#1 ๋ก๋ ๋ฒํธ ์ถ์ฒจ๊ธฐ
//๋ก๋ ์ถ์ฒจ ๋ฒํธ ๋ง๋ค๊ธฐ (์ค๋ณต ์๋จ, 1๋ถํฐ 45๊น์ง ์ซ์๋ง)
<script>
var lotto = [];
while (lotto.length < 6) { // ๋ก๋ ๋ฐฐ์ด์ ๊ธธ์ด๊ฐ 6์ด ๋ ๋๊น์ง ๋ฐ๋ณต
var num = parseInt(Math.random() * 45 + 1); // 1~45 ๋ฒ์์ ์ ์๋ฅผ num์ ๋ด๊ธฐ
if (lotto.indexOf(num) == -1) { // ๋ฝ์๋ ์ซ์์ ๊ฒน์น๋๊ฒ ์์ ๋
lotto.push(num); // ๋ก๋๋ผ๋ ๋ฐฐ์ด์ num์ ๋ฃ๋๋ค!
}
}
lotto.sort((a,b)=>a-b); // ๋ณด๊ธฐ ์ข๊ฒ ์ค๋ฆ์ฐจ์ ์ ๋ ฌํ๊ธฐ!
document.write("<div class='ball ball1'>" + lotto[0] + "</div>");
document.write("<div class='ball ball2'>" + lotto[1] + "</div>");
document.write("<div class='ball ball3'>" + lotto[2] + "</div>");
document.write("<div class='ball ball4'>" + lotto[3] + "</div>");
document.write("<div class='ball ball5'>" + lotto[4] + "</div>");
document.write("<div class='ball ball6'>" + lotto[5] + "</div>");
</script>Math.random() // ์์์ ์ค์ ํ ์ซ์ ์์ฑ
parseInt() // ์์์ ๋ฒ๋ฆฌ๊ณ ์ ์๋ก ๋ณํ
- ๋ฐฐ์ด (Array)
: ํ๋์ ๋ณ์ ์์ ์ฌ๋ฌ ๊ฐ์ ๊ฐ์ ์ ์ฅ
ex) var lotto = [1, 2, 3, 4, 5, 6];
lotto [2] = 3 // ๋ฐฐ์ด์์ Index ์์๋ ์์์๋ถํฐ 0๋ฒ์งธ, 1๋ฒ์งธ...
lotto.push(7); // ๋ก๋๋ผ๋ ๋ฐฐ์ด์ ๋ง์ง๋ง์ 7์ด๋ ์์๋ฅผ ์ถ๊ฐํจ
- ๋ฐ๋ณต๋ฌธ
for ๋ฌธ -> ํน์ ํ์๋งํผ
ex) for(var i=0; i <6; i++){ } // 0๋ถํฐ ์์ํด์ 6์ด ๋๊ธฐ ์ ๊น์ง 1์ฉ ์ฆ๊ฐํ๋ ๋ฐ๋ณต๋ฌธ
while ๋ฌธ -> ํน์ ์กฐ๊ฑด๋งํผ
ex) while(lotto.length <6) // ๋ก๋ ๋ฐฐ์ด์ ๊ธธ์ด๊ฐ 6์ด ๋๊ธฐ ์ ๊น์ง ๋ฐ๋ณต
- ์กฐ๊ฑด๋ฌธ
if (์กฐ๊ฑด) { ๊ฒฝ์ฐ }; // ์กฐ๊ฑด์ ๋ง์กฑํ์ ๋ ์ด๋ค ๊ฒฝ์ฐ๋ฅผ ์คํํจ
- DOM (Document Object Model)
document : DOM์ ์ง์ ์ ์ญํ
ex) document.getElementById(' '). value; // ๊ฐ ๊ฐ์ ธ์ค๊ธฐ
- Console
console.log(' '); // ์ฝ์ ์ฐฝ์ ์ถ๋ ฅ
- ํจ์ : ๋ช ๋ น ๋ชจ์
function ํจ์์ด๋ฆ(){ ๋ช ๋ น์ด 1; ๋ช ๋ น์ด 2;} ์ฌ์ฉํ } ๋ -> ํจ์์ด๋ฆ();
#2 ๊ธ์ ์ ๊ณ์ฐ๊ธฐ
function counter(){ //counter ํจ์๋ฅผ ์ ์
var content = document.getElementById('jasoseol').value;
if(content.length > 200){
content = content.substring(0,200); // 200๊ธ์๊ฐ ๋์ผ๋ฉด ๊ธ์ ์ ์๋ฅด๊ธฐ
document.getElementById('jasoseol').value = content;
}
document.getElementById('count').innerHTML = '('+ content.length + '/200)';
}
counter();. substring(a, b) // a์ด์ b๋ฏธ๋ง๊น์ง ์ ํ๊ณ b ์ด์์ด ๋๋ฉด ๊ทธ ๋ค๋ก ์๋ฅด๊ธฐ
#3 ๋ฏธ๋ ์คํํฌ๋ํํธ ๊ฒ์
var hp = 3;// ๊ธฐ๋ณธ HP๋ 3์ผ๋ก ์ค์
$('#drone').click(function(){ // ๋๋ก ์ ๋๋ ์ ๋ ํจ์ ์คํ
$('#spit').fadeIn(); // ์นจ์ด ๋ํ๋จ
$('#spit').animate({'left': '+=250px'}); // ์นจ์ด ์ค๋ฅธ์ชฝ์ผ๋ก 250๋งํผ ์์ง์
$('#spit').fadeOut(function(){ // ์นจ์ด ์ฌ๋ผ์ง๋ฉด์ ํจ์ ์คํ
hp = hp - 1; // HP๋ ์นจ์ด ๋๊ฐ๊ณ ๋์ 1 ์ฉ ๊น์
$('#hp').text('HP: '+ hp) // ํ์ฌ HP๋ฅผ ์ถ๋ ฅ
if(hp==0){ // HP๊ฐ 0์ด ๋์ ๋
$('#bunker').fadeOut(); // ๋ฒ์ปค๋ ์ฌ๋ผ์ง
}
});
$('#spit').css({left: 150}) // ์นจ์ด ์ค๋ฅธ์ชฝ์ผ๋ก ์ด๋ํ๊ณ ๋์ ์๋ ์๋ฆฌ๋ก ๋์๊ฐ
});
- jQuery
: JavaScript ์ฌ์ฉ ์ฝ๊ฒ ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ฅ์
1. ๊ฐ๊ฒฐํ ๋ฌธ๋ฒ
2. ํธ๋ฆฌํ API
3. ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง
$('#์ ํ์'). ํ์;
ex) $('#message'). click(hello); // message๋ฅผ ํด๋ฆญํ๋ฉด hello๊ฐ ์ถ๋ ฅ
* ์ต๋ช ํจ์
ex) ('#message'). click(function(){ ํจ์ ๋ด์ฉ } ; // message๋ฅผ ํด๋ฆญํ๋ฉด ์ต๋ช ํจ์๋ฅผ ๋ง๋ ํ ํจ์ ๋ด์ฉ์ ์คํํจ
- ๊ฐ์ฒด(object)
: ์ฌ๋ฌ ๊ฐ์ ๊ฐ์ ๋ด๋ ์๋ฃํ
ex) var person = { name: '๋ค์'. age: 24 } // person์ ๊ฐ์ฒด์ด๋ฆ, name๊ณผ age๋ ํค(key=์์ฑ๋ช ), '๋ค์'๊ณผ 24๋ ๊ฐ(value=์์ฑ๊ฐ)
++ ๋ฐฐ์ด, ๊ฐ์ฒด, ํจ์๋ ๋ค์ด๊ฐ ์ ์์
person.name; // ๋ค์
person.sayHello(); // sayHello ๋ฉ์๋์ ํจ์ ์คํ
*JavaScript์ ๋ชจ๋ ๊ฒ์ ๊ฐ์ฒด๋ค*
#4 ๊ธฐ๋ ์ผ ๊ณ์ฐ๊ธฐ
<script>
var now = new Date();// Date ๊ฐ์ฒด ์์ฑ
var start = new Date('2020-06-30');
/*2020-06-30๋ก๋ถํฐ ์ง๊ธ์ด ๋ช ์ผ์งธ ๋๋์ง ๊ณ์ฐํ๊ธฐ*/
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);//ms๋ฅผ date๋ก ๋ณํํ๋ ์์
$('#love').text(day + '์ผ์งธ');
/*๊ธฐ๋
์ผ๊น์ง ๋จ์ ๋ ์ง ๊ณ์ฐํ๊ธฐ*/
var valentine = new Date('2021-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$('#valentine').text(day2 + '์ผ ๋จ์');
/*1000์ผ์ด ์ธ์ ์ธ์ง ๊ณ์ฐํ๊ธฐ*/
var thousand = new Date(start.getTime() + 999 * (1000 * 60 * 60 * 24));
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);
/*1000์ผ๊น์ง ๋จ์ ๋ ์ง ๊ณ์ฐํ๊ธฐ*/
var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$('#thousand').text(day3 + '์ผ ๋จ์');
</script>- Date ๊ฐ์ฒด ์์ฑ
var now = new Date;
- ์ฐ๋๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฉ์๋. getFullYear()
console.log(now.getFullYear());
- ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฉ์๋. getMonth() {0: 1์, 1: 2์,... 10: 11์, 11: 12์}
console.log(now.getMonth());
- ์ผ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฉ์๋. getDate()
console.log(now.getDate());
- 1970๋ 1์ 1์ผ 00:00:00์ ๊ธฐ์ค์ผ๋ก ํ๋ฅธ ์๊ฐ์ ๋ฐ๋ฆฌ์ด๋ก ํ์ํ๋ ๋ฉ์๋. getTime()
console.log(now.getTime());
- ํน์ ์ผ์ Date ๊ฐ์ฒด ์์ฑ
var birthday = new Date('2000-10-21');
- ํน์ ms์ Date ๊ฐ์ฒด ์์ฑ
var ms = new Date(10000);
๐พ Git ๋ช ๋ น์ด
|
๐ HTML (์ด๋ ฅ์ ๋ง๋ค๊ธฐ)
<!-- ๊ธฐ๋ณธ ๊ณจ๊ฒฉ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ค์์ ์ด๋ ฅ์</title>
<link rel="stylesheet" href="codelion.css">
</head>
<body>
<h1>๋ฐ๋ค์</h1>
<p>HTML/๋ฐฑ์๋ ๊ฐ๋ฐ์</p>
<footer>copyright daone. All rights reserved.</footer>
</body>
</html>
๐๏ธ CSS ๊พธ๋ฏธ๊ธฐ
|
