<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_JS_Basic</title>
</head>
<body>
</body>
</html>
<script> <!-- ์๋ฐ์คํฌ๋ฆฝํธ ์์ฑํ ์ ์๋ ํ๊ทธ -->
// ํ์ค ์ฃผ์
/* ์ฌ๋ฌ ์ค ์ฃผ์ */
// ;(์ธ๋ฏธ์ฝ๋ก )์ ์ ํ์ด์ง๋ง (์ฝ๋ ํ ์ค ๊ตฌ๋ถํด์ค) ๋ฌด์กฐ๊ฑด ์จ์ฃผ๋๊ฒ ์ข์.
// ๋ณ์ ์์ฑ์ => var, let, const
box = 123; // ์ซ์(ํ๋์)
console.log(box); // box๋ฅผ console ์ฐฝ์ ์ถ๋ ฅํด๋ผ
box = '123'; // ๋ฌธ์์ด ( ' ํน์ " ์ฌ์ฉ / ๊ฒ์ ์ )
console.log(box);
/**********************************/
// var = ๋ณ์ ์์ ์ฌ์ฉํ๋ค. ๊ฐ์ ์ด๋ฆ์ผ๋ก ๋ณ์๋ฅผ ์๋ก ์์ฑํด๋ ๋ฌธ์ ์๋ค.
var test = 123;
console.log(test);
var test = 'test';
console.log(test);
/* var๋ ๋น์ถ => ๋๋ฒ๊น
ํ๊ธฐ ํ๋ค๋ค */
// let ๋ณ์ ์์ ์ฌ์ฉํ๋ค. ๊ฐ์ ์ด๋ฆ์ ๋ณ์๋ฅผ ์์ฑํ๋ฉด ์ค๋ฅ๋ค.
let test2 = 123; // ์ฒ์ test2 ๋ณ์๋ฅผ ๋ง๋ค์์ผ๋ฏ๋ก ok
console.log(test2);
// let test2 = 'test2' // ์ด๋ฏธ test2 ๋ณ์๊ฐ ์๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๋ค.
test2 = 'test2'; // ๋ง๋ค์ด์ ธ์๋ ๋ณ์์ ๋ค์ด์๋ ๊ฐ์ ๋ณ๊ฒฝํ๋๊ฒ์ ok
console.log(test2);
// const ๋ณ์ ์์ ์ฌ์ฉํ๋ค. ๊ฐ์ ์ด๋ฆ์ ๋ณ์๋ฅผ ๋ง๋ค๋ฉด ์๋ฌ๋ค.
// ๊ทธ๋ฆฌ๊ณ ๋ณ์์ ๊ฐ์ ๋ณ๊ฒฝํ๋ ค๊ณ ํด๋ ์๋ฌ๋ค.
const test3 = 123; // test3 ๋ณ์๋ฅผ ์ฒ์ ๋ง๋ค์๊ธฐ ๋๋ฌธ์ ok
console.log(test3);
// const test3 = 'test3'; // ๊ฐ์ ์ด๋ฆ์ ๋ณ์๋ฅผ ๋ ๋ง๋๋ ค๊ณ ํ๊ธฐ๋๋ฌธ์ ์๋ฌ.
// test3 = 'test3'; // const ๋ณ์๋ ๋ณ์์ ๋ค์ด์๋ ๊ฐ์ ๋ณ๊ฒฝํ๋ ค๊ณ ํด๋ ์๋ฌ.
// ๋ณ์ => ์ซ์๋ก ์์x, ํน์๋ฌธ์x, '_'๋ ๊ฐ๋ฅ
// camel_case(upper_case, lower_case), snake_case
// mysweethom => MySweetHome(class), mySweetHome(๋ณ์๋ช
, ํจ์๋ช
), my_sweet_home(๋ณ์๋ช
,ํจ์๋ช
)
//
var my_var; // ๋ณ์๋ฅผ ๋ง๋ค์ด๋๊ณ ๊ฐ์ ๋ฃ์ด๋์ง ์์ ์ํฉ
console.log(my_var);
my_var = 'my sweet home';
console.log(my_var, 123, 'ํํํ');
console.log("my_var:", my_var); //my_var: my sweet home
console.log("my_var: "+ my_var); // my_var: my sweet home
var name = '๊น์ฑ์ฐ';
var addr = "๋๊ตฌ ์ค๊ตฌ";
var status = " ๋ฐฐ๊ณ ํ"
console.log(name + '๋ ', addr + '์ ์๊ณ ' + status + ' ์ํ๋ฅผ ๊ฐ์ง๋ค');
// ` ๋ฐฑํฑ(์ธ์๋๊ธฐ)
console.log(`${name}์ ${addr}์ ์๊ณ ${status}์ํ๋ฅผ ๊ฐ์ง๋ค`);
/********** ๋ฌธ์์ด **********/
// ๋ฌธ์์ด๊ณผ ๋ค๋ฅธ ๊ฐ์ ๋ํ๋ฉด ๋ค๋ฅธ ๊ฐ๋ ๋ฌธ์์ด ํ์์ผ๋ก ๋ณํ๋ค
// ๋ฌธ์์ด๊ณผ ๋ฌธ์์ด์ ๋ํ๋ฉด ์ด์ด ๋ถ์ด์ ํ๋์ ๋ฌธ์์ด์ด ๋๋ค
// "" '' `` ๋ชจ๋ ์ฌ์ฉ ๊ฐ๋ฅ
// ์ด์ค์ผ์ดํ ๋ฌธ์๋ '๋ฌธ์'๋ผ์ '๋ฌธ์์ด' ํ์์ผ๋ก ์ฌ์ฉํด์ผ ํ๋ค
var my_var = '"๊น์ฑ์ฐ"๋ ๋๊ตฌ\n ์ค๊ตฌ์\t ์๊ณ \\ ๋ฐฐ๊ณ ํ๋ค"-';
console.log(my_var);
// "" => ๋น ๋ฌธ์์ด. ๋ฌธ์์ด ํํ๋ฅผ ๊ฐ์ง๋ฉด์ ๊ฐ์ ๊ฐ์ง๋๋ฐ ๋น์ด ์์ด ๋น ๋ฌธ์์ด์ด๋ผ ํ๋ค.
// ๋น ๋ฌธ์์ด์ ์ผ๋ฐ์ ์ผ๋ก false๋ก ํ๋จ๋๋ค.
////////////////// ํ์
๋ณํ ์ํค๊ธฐ
var my_var = 12345.6789;
console.log( my_var + "" ); // ์ซ์๋ฅผ ๋ฌธ์์ด์ผ๋ก
console.log( my_var.toString() ) // toString ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ ๋ฌธ์์ด๋ก ๋ณํ
console.log( my_var.toString(16) ) // toString ์์ ์ง์๋ฅผ ์์ฑํ ์๋ ์๋ค
console.log( my_var.toFixed(2) ) // toFixed๋ฅผ ์ฌ์ฉํ๋ฉด ์์์ ์๋ซ ์๋ฆฌ์์์ ๋ฐ์ฌ๋ฆผํ ๋ฌธ์์ด์ผ๋ก ๋ง๋ค์ด์ค
////////////////// ๋ฌธ์์ด์ ์ซ์๋ก
var my_var = "123.4567";
console.log( parseInt(my_var) ); // int(์ ์)ํ์ผ๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ด๋ผ ์์๋ถ๋ถ์ด ๋ ์๊ฐ
console.log( parseFloat(my_var) ); // float(์ค์)ํ์ผ๋ก ๋ณ๊ฒฝ
console.log( parseInt("0xA") ); // 16์ง์๋ก ์๋ํด์ํด์ 10์ง์์ธ 10์ผ๋ก ๋ณ๊ฒฝ
console.log( parseInt("1111" , 2)); // 2์ง์ํํ๋ผ๊ณ ์๋ ค์ค ์๋ ์๋ค. ๊ฒฐ๊ณผ๋ 15
// ์์ + ํน์ -๋ฅผ ๋ถ์ด๋ฉด ์ซ์๋ก ๋ณ๊ฒฝ๋๋ค. (my_var๋ฅผ ์ซ์๋ก ๋ณ๊ฒฝ๋ ๊ฒฐ๊ณผ๋ฅผ ์๋ ค์ค)
console.log(+my_var + 50);
console.log(-my_var + 50);
// ๋ณ์์ -๋ฅผ ๋ถ์ด๋ฉด ์ซ์๋ก๋ ๋ฐ๋์ง๋ง ์์๊ฐ ๋๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์ ๊ธฐ์กด ๋ณ์๊ฐ์ 0์ ๋นผ๋ ํํ๋ฅผ ์ฌ์ฉํ๋ค.
console.log(my_var - 0);
console.log(+"abc"); // ์ค๋ฅ๋๋๊ฑด ์๋๊ณ , Not a number์ธ NaN์ด ์ถ๋ ฅ๋๋ค
var my_var = "true";
console.log( Boolean(my_var) ); // booleanํํ์ true๊ฐ ๋๋ค
console.log( !!my_var ); // ! ํ๋๋ฉด false๊ฐ ๋๋ฒ๋ฆฌ๋๊น ํ๋ฒ ๋ !๋ฅผ ๋ฃ์ด์ true๋ก ๋ณ๊ฒฝํจ
console.log( Boolean("test") ); // true: ๊ฐ์ด ์์ผ๋ฉด true๋ก ์น๋ค
console.log( Boolean("") ); // false: ๊ฐ์ด ์์ผ๋ฉด(์์ด์์ผ๋ฉด) false๋ก ์น๋ค
console.log( Boolean(1) ); // true: 1์ true(๊ฐ์ด ์๋ค๊ณ ํ๋จ๋จ)
console.log( Boolean(0) ); // false: 0์ false(๊ฐ์ด ์๋ค๊ณ ํ๋จ๋จ)
console.log( Boolean(100) )// true. ์ฌ์ค ๊ฐ์ด ์๋ ํํ ์ด์ธ๋ ์ฒ๋ถ true๋ก ํ๋จ๋๋ค.
/***********************************/
/*********** ๊ฐ์ฒด ******************/
// ํ๋กํผํฐ๋ช
์ ํน์๋ฌธ์ ๋ค์ด๊ฐ ๋๋ ๋ฌธ์์ด ํํ๋ก ์์ฑํด์ผํจ
var my_obj = { "price":3000, name: '๋ณผํ', 1:100, 'my-var':'ใ
ใ
'};
console.log(my_obj);
var price = my_obj.price; // ๋ณ์์ ํ๋กํผํฐ๋ช
์ . ์ ์ฌ์ฉํด์ ๊ฐ์ ๊ฐ์ ธ์ด
var price = my_obj["price"]; // ๋ณ์์ ๋๊ดํธ๋ก ๋ฌถ๊ณ ๊ฐ์ ๊ฐ์ ธ์ด
console.log(my_obj);
var my_var = my_obj["my-var"]; // ํ๋กํผํฐ๋ช
์ด ํน์๋ฌธ์๊ฑฐ๋ ์ซ์๋ฉด . ์ผ๋ก ๋ชป๊ฐ์ ธ์ด
var my_var = my_obj[1]; // ํน์ my_obj["1"]
console.log(my_var);
// ๊ฐ์ฒด์ ๋ค์ด์๋ ๋ฐ์ดํฐ ์ญ์ ํ๊ธฐ
delete my_obj["1"];
delete my_obj["my-var"];
console.log(my_obj);
// ๊ฐ์ฒด์ ์๋ก์ด ๋ฐ์ดํฐ ์ถ๊ฐํ๊ธฐ
my_obj.abc = 100; // ok
my_obj["zxc"] = 200; // ok ( ๋ ๋ง์ด์ฐ๋ ์ชฝ)
my_obj.price = 10000000; // ๊ฐ์ ์์ ํ ๋๋ ์ด๋ ๊ฒ
console.log(my_obj);
// my_obj ๊ฐ์ฒด ์์ 'name' ์ด๋ฆ์ ํ๋กํผํฐ๊ฐ ์๋๊ฐ? => ๊ฒฐ๊ณผ๋ boolean
var result = 'name' in my_obj;
console.log(result); // true
/******************************/
/*********** ๋ฐฐ์ด *************/
var my_arr = [1, 2, 3, 'test', true];
console.log(my_arr);
var data = my_arr[3];
console.log( data);
console.log( data.length );
console.log( data['length'] );
console.log(data[10]); // ์ค๋ฅ๊ฐ ์๋๋ผ undefined
data[0] = 50;
console.log('index 0์ 50์ผ๋ก ๊ต์ฒด ํ ', my_arr);
// ์กด์ฌํ์ง ์๋ ๊ณณ์ ๊ฐ์ ์์ ํ๋ฉด,
// 1) javascript์๋ '๋ฐฐ์ด'์ ํ๋ด๋ด๋ ๊ฐ์ฒด ํํ๋ฐ์ ์๋ค.
// 2) ๊ทธ๋์ 10์ด๋ผ๋ ํ๋กํผํฐ๋ฅผ ์๋ก ์ถ๊ฐํ๋ค
// 3) ์ค๊ฐ์ ๋น ๊ณณ์ empty๋ฅผ ์ถ๊ฐํด๋ฒ๋ฆฐ๋ค
my_arr[10] = 1000;
console.log('index 10์ 1000์ผ๋ก ๊ต์ฒด ํ' + my_arr);
/********* ๋ฐฐ์ด์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ ๋ฐฐ์ด์ ๋ค๋ฃจ๊ธฐ ***********/
var my_arr = []; // ๋น ๋ฐฐ์ด. ์์ ๋ฐ์ดํฐ ์์. false๋ก ํ๋จ๋ ์ ์์
// ๊ฐ ์ถ๊ฐํ๊ธฐ
my_arr.push(10); // 10์ ๋ฐฐ์ด ๋งจ ๋ง์ง๋ง์ ์ถ๊ฐํด๋ผ
my_arr.push(100); // 100์ ๋ฐฐ์ด ๋งจ ๋ง์ง๋ง์ ์ถ๊ฐํด๋ผ
my_arr.push(1000); // 1000์ ๋ฐฐ์ด ๋งจ ๋ง์ง๋ง์ ์ถ๊ฐํด๋ผ
console.log(my_arr); // [10, 100, 1000]
// ๊ฐ ์ ๊ฑฐํ๊ธฐ
var popData = my_arr.pop(); // ๋งจ ๋ง์ง๋ง์ ์๋ ๊ฐ์ ๋นผ์จ๋ค.
console.log(popData); // 1000. pop์ ๊ฐ์ ๋นผ์ค๋ ๊ฒ์ด๋ค.
console.log(my_arr); // [10, 100]
my_arr.pop();
my_arr.pop();
console.log(my_arr); // []
my_arr.pop(); // ์์ ์๋ฌด๊ฒ๋ ์๋๋ฐ pop์ ํ๋ฉด ๊ทธ๋ฅ ๊ทธ๋๋ก
console.log(my_arr) // []
my_arr = [10, 100, 1000, 10000];
var myData = my_arr.shift(); // pop๊ณผ ๊ฐ์๋ฐ ๋งจ ์์์ ๊บผ๋ด์จ๋ค => 10์ ๊บผ๋ธ๋ค
console.log(myData, my_arr);
my_arr.unshift(50000); // push์ ๊ฐ์๋ฐ ๋งจ ์์ ๋ฃ๋๋ค.
console.log(my_arr);
// ๋ฐฐ์ด ์์ ์๋ ์์๋ค์ ์ค๋ฆ์ฐจ์ ์ ๋ ฌํ๊ธฐ
my_arr.sort();
console.log(my_arr);
// ๋ฐฐ์ด ์์ ์๋ ์์๋ค์ ์ญ์์ผ๋ก ๋ณ๊ฒฝํ๊ธฐ
my_arr.reverse();
console.log(my_arr);
// ๋ฐฐ์ด ์์ ์๋ ์์๋ค์ ๋ฒ์๋ก ์ ๋ถ ๋ณ๊ฒฝํ๊ธฐ
my_arr.fill(10, 0, 3); // 0~2๊น์ง 10์ผ๋ก ๋ณ๊ฒฝํ๋ผ
console.log(my_arr);
// ๋ฐฐ์ด ์์ ์๋ ์์๋ค์ ๋ฒ์๋ก ๋์ฒดํ๊ธฐ ( ๋ง์ด ์ฌ์ฉํจ )
my_arr.splice(0, 2, 1, 2); //index 2๋ถํฐ 1๊ฐ ์ง์ฐ๊ณ ๊ทธ ์๋ฆฌ์ ๋ค์ ์๋ ์์๋ค ์ ๋ถ ๋ฃ์ด๋ผ
console.log(my_arr);
// ๋ ๋ฐฐ์ด์ ํฉ์ณ์ ํ๋๋ก ๋ง๋ค๊ธฐ
var result = [1,2,3].concat([4,5,6]);
console.log(my_arr); // [1,2,3]. ๋ณํ์ง ์๋๋ค
console.log(result); // ํฉ์ณ์ง ์๋ก์ด ๋ฐฐ์ด์ด ํ์ํ๋ค.
// ๋ฐฐ์ด์ ์ค๊ฐ ๊ฐ ๊ตฌํ๊ธฐ
var my_arr = [1,5,73,51,3,93,87,55,67,5234,8,97,78];
var middleValue = my_arr[my_arr.length / 2];
console.log(middleValue);
// ์ด๋ค ์์์ index ์์น ์ฐพ๊ธฐ (์์์ ๋ถํฐ ์ฐพ๋๋ค)
var index = my_arr.indexOf(8);
console.log(index); // 10
// ์ด๋ค ์์์ index ์์น ์ฐพ๊ธฐ (๋ค์์ ๋ถํฐ ์ฐพ๋๋ค)
var index = my_arr.lastIndexOf(67);
console.log(index); // 10
// ๊ธฐ์กด ๋ฐฐ์ด์ ๋ถ๋ถ๋ง์ ์๋ก์ด ๋ฐฐ์ด๋ก ๊ฐ์ ธ์ค๊ธฐ (slice)
var sliceArr = my_arr.slice(0, 4); // my_arr๋ฐฐ์ด์ 0๋ฒ์งธ ~ 3๋ฒ์งธ๊น์ง ์๋ผ์ ๊ฐ์ ธ์
console.log(my_arr);
console.log(sliceArr);
// ๋ฐฐ์ด์ ๋ณต์ฌํด์ ์๋ก์ด ๋๊ฐ์ ๋ฐฐ์ด์ ๋ง๋ค๊ธฐ . copy
var copiedArr = my_arr.slice();
console.log(copiedArr);
// join ** ๋ฐฐ์ด ์์ ์๋ ์์๋ฅผ ์ด์ด๋ถ์ฌ์ ํ๋์ ๋ฌธ์์ด๋ก ๋ง๋ค๊ธฐ
var my_var = ['my', 'dream', 'is', 'come', 'true'];
var my_string = my_var.join(' ');
console.log(my_string);
/******************************/
/* ์ฐธ์กฐ๋ณ์(reference) : ๋ณ์์ ์ด๋ค ๋ฐ์ดํฐ ์์ฒด๋ฅผ ์ ์ฅํ๋ ๊ฒ์ด ์๋๋ผ ํด๋น ๋ฐ์ดํฐ์ ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๋ฅผ ์ ์ฅํ๋ ๊ฒ */
var my_arr = [1,2,3];
var my_arr2 = my_arr;
console.log("MY_ARR:", my_arr);
console.log("MY_ARR2:", my_arr2);
my_arr2[0] = 100;
console.log("MY_ARR:", my_arr);
console.log("MY_ARR2:", my_arr2);
</script>๋ณ์ ์์ฑ์์๋ var let const ๊ฐ ์๋ค.
var = ๊ฐ์ ์ด๋ฆ์ผ๋ก ๋ณ์๋ฅผ ์๋ก ์์ฑํด๋ ๋ฌธ์ ์๋ค.
