๐ก ๊ธฐ์กด JAVA์ ๋์ผ ์ ๋๋ ๋ถ๋ถ์ ์๋ตํ์ฌ ์์ฑํจ
JavaScript ์ ์ธ
- HTML์์ JavaScript๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด
<script>
ํ๊ทธ๋ฅผ ์ฌ์ฉ - <script>ํ๊ทธ๋ HTML ํ์ผ ๋ด๋ถ์ <head>๋ <body> ์ ์ด๋ ๊ณณ์์๋ ์ ์ธ ๊ฐ๋ฅํ์ง๋ง <body>์์ ๋๋ถ๋ถ์ <script>ํ๊ทธ๋ฅผ ๋ ๊ฒ์ ๊ถ์ฅ
- ์น ๋ธ๋ผ์ฐ์ ๊ฐ HTML๋ฌธ์๋ฅผ ์์ฐจ์ ์ผ๋ก ํด์(parsing)ํ๋ฏ๋ก, script ์์น์ ๋ฐ๋ผ ๋ก๋์ ์คํ ์์ ์ด ๋ฌ๋ผ์ง๋ค.
๋ณ์
- ๋ณ์์ ํ์ ์ง์ ์์ด ๊ฐ์ด ํ ๋น๋๋ ๊ณผ์ ์์ ์๋์ผ๋ก ๋ณ์์ ํ์ ์ด ๊ฒฐ์
- ๊ฐ์ ๋ณ์์ ์ฌ๋ฌ ํ์ ์ ๊ฐ์ ํ ๋น ๊ฐ๋ฅ
- Camel ํ๊ธฐ๋ฒ์ ์ฌ์ฉ
- ํค์๋, ๊ณต๋ฐฑ, ๋ฌธ์ ํฌํจ, ์ซ์๋ก ์์X
- ํน์ ๋ฌธ์
_
$
ํ์ฉ
Camel case : ์๋ฌธ์๋ก ์์ฑํ๋ 2๊ฐ ์ด์์ ๋จ์ด์ผ ๊ฒฝ์ฐ ๋จ์ด์ ์ฒซ ๊ธ์๋ ๋๋ฌธ์๋ก ํ๊ธฐ
- ์๋ฃํ์ ์์ํ์ (primitive)๊ณผ ๊ฐ์ฒดํ์ (object)๋ก ๋ถ๋ฅ
- ์์ ํ์ ์๋ number, string, boolean, undefined, null 5๊ฐ์ง๊ฐ ์กด์ฌ
number
- ์ซ์๋ฅผ ์ ์์ ์ค์๋ก ๋๋์ด ๊ตฌ๋ถํ์ง ์๋๋ค.
- ์ธ๋ํ๋ก์ฐ, ์ค๋ฒํ๋ก์ฐ, 0์ผ๋ก ๋๋๋ ์ฐ์ฐ์ ๋ํด ์์ธ๋ฅผ ๋ฐ์์ํค์ง ์๋๋ค.
Infinity
: ๋ฌดํ์ ๋ํ๋ด๋ ์์. โ 0์ผ๋ก ๋๋ ๊ฒฝ์ฐNaN
: Not a Number, ๊ณ์ฐ์์ ๊ฒฐ๊ณผ๊ฐ ์ซ์๊ฐ ์๋์ ๋ํ๋ด๋ ์์
// ์ธ๋ํ๋ก์ฐ
console.log(0 / 100); // 0
console.log(-0 / 100); // -0
// ์ค๋ฒํ๋ก์ฐ
console.log(100 / 0); // Infinity
console.log(-100 / 0); // -Infinity
console.log(Infinity / 0); // Infiniity
console.log(-Infinity / 0); // -Infinity
console.log(0 / 0); // NaN
console.log('3A'); // 1
console.log('A3'); // NaN
console.log(new Number('1')); // 1
console.log(new Number('1A')); // NaN
string
- ์์ ๋ฐ์ดํ
'
, ํฐ ๋ฐ์ดํ"
๋ ๋ค ์ฌ์ฉ ๊ฐ๋ฅ - ๋น์ด ์๋ ๋ฌธ์์ด, null, undefined, ์ซ์ 0์ false๋ก ๊ฐ์ฃผ๋๋ค.
- null์ ๊ฐ์ด ์๊ฑฐ๋ ๋น์ด์์์ ์๋ฏธํ๊ณ , undefined๋ ๊ฐ์ด ์ด๊ธฐํ ๋์ง ์์์์ ์๋ฏธ
var a;
var b = null;
var c = 0;
if(!a) console.log('a'); // a ์ถ๋ ฅ
if(!b) console.log('b'); // b ์ถ๋ ฅ
if(!c) console.log('c'); // c ์ถ๋ ฅ
- ์๋ก ๋ค๋ฅธ ์๋ฃํ์ ์ฐ์ฐ์ด ๊ฐ๋ฅํ๋ค. ์ด๋ค ์๋ฃํ์ด๋ ์ ๋ฌํ ์ ์๊ณ , ๊ทธ ๊ฐ์ ํ์์ ๋ฐ๋ผ ๋ณํ ๊ฐ๋ฅ
console.log("This size is " + 40);
console.log("40" - 5); // 35
console.log("40" + 5); // 405
console.log(parseInt("123.45") + 1); // 124
console.log("1.1" + "1.1"); // 1.11.1
console.log(+"1.1" + +"1.1"); // 2.2
๋ณ์ ํธ์ด์คํ
ํธ์ด์คํ ์ด๋, var ์ ์ธ๋ฌธ์ด๋ function ์ ์ธ๋ฌธ ๋ชจ๋ ์ ์ธ๋ฌธ์ด ํด๋น Scope์ ์ฒ์์ผ๋ก ์ฎ๊ฒจ์ง ๊ฒ์ฒ๋ผ ๋์ํ๋ ํน์ ์ด๋ค. ์ฆ, JavaScript์ ๋ชจ๋ ์ ์ธ๋ฌธ์ด ์ ์ธ๋๊ธฐ ์ด์ ์ ์ฐธ์กฐ๊ฐ ๊ฐ๋ฅํ๋ค.
- ์ ์ธ ๋จ๊ณ: ๋ณ์ ๊ฐ์ฒด์ ๋ณ์๋ฅผ ๋ฑ๋ก
- ์ด๊ธฐํ ๋จ๊ณ: ๋ณ์ ๊ฐ์ฒด์ ๋ฑ๋ก๋ ๋ณ์๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ํ ๋น. undefined๋ก ์ด๊ธฐํ๋จ
- ํ ๋น ๋จ๊ณ: undefined๋ก ์ด๊ธฐํ๋ ๋ณ์์ ์ค์ ๊ฐ์ ํ ๋น
์ ์ธ๊ณผ ์ด๊ธฐํ ๋จ๊ณ๋ ํ ๋ฒ์ ์ด๋ฃจ์ด์ง.
console.log(num); // undefined
var num = 123;
console.log(num); // 123
[JavaScript] var let const ์ฐจ์ด์
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ณ์ ์ ์ธ ๋ฐฉ์์ธ var let const ์ ์ฐจ์ด์ ๋ณ์ ์ ์ธ ๋ฐฉ์ var ์ ์ธํ ๋ณ์์ ๋์ผํ ๋ณ์๋ช ์ผ๋ก ์ค๋ณต ์ ์ธ์ด ๊ฐ๋ฅํ๋ค. ์ฆ, ๋ง์ง๋ง์ ํ ๋น๋ ๊ฐ์ด ์ต์ข ๋ณ์์ ์ ์ฅ๋๋ค. ๊ฐ๋จํ ํ
gangintheremark.tistory.com
์ฐ์ฐ์
+
์ฐ์ฐ์๋ ๋์์ ๊ฐ์ด ๋ชจ๋ ์ซ์์ธ ๊ฒฝ์ฐ ์ฐ์ ์ฐ์ฐ์ ์ํ+
์ฐ์ฐ์๋ ๋์ ์ค์ ๋ฌธ์์ด์ด ํฌํจ๋ ๊ฒฝ์ฐ ๋ชจ๋ ์ฐ์ฐ ๋์์ ๋ฌธ์์ด๋ก ๋ณํ ํ ๋ฌธ์์ด ๊ฒฐํฉ==
์===
์ ์ฐจ์ด์ ์ ์๋ฃํ๊น์ง ๋น๊ตํ๋์ง ์๋์ง์ ์ฌ๋ถ
๋ฐ๋ณต๋ฌธ - for
- for ๊ตฌ๋ฌธ์ ์นด์ดํฐ ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๊ตฌ๋ถ๊ณผ in keyword ๋ฅผ ์ฌ์ฉํ๋ ๊ตฌ๋ฌธ์ผ๋ก ๋ถ๋ฅ
- in keyword๋ฅผ ์ฌ์ฉํ๋ ๊ตฌ๋ฌธ์ ๋ฐฐ์ด ๋๋ ๊ฐ์ฒด๊ฐ ๊ฐ์ง ํ๋กํผํฐ๋ฅผ ์ํํ๋ฉด์ index๊ฐ์ ์กฐํ
๊ฐ์ฒด(Object)
- JavaScript์ ๊ฐ์ฒด๋ ํค์ ๊ฐ(Key-Value)๋ก ๊ตฌ์ฑ๋ ํ๋กํผํฐ๋ค์ ์งํฉ์ด๋ค.
- JavaScript์ ํจ์๋ ์ผ๊ธ๊ฐ์ฒด์ด๋ฏ๋ก ๊ฐ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
/* ๊ฐ์ฒด ์์ฑ */
var obj = {}; // ๊ฐ์ฒด ๋ฆฌํฐ๋ด
var obj = new Object(); // Object ์์ฑ์
var student = { // ์์ฑ์ ํจ์
name: '๋จ๊ฒฝ๋ฏผ',
area: '์์ธ',
age: 20,
info: function() {
console.log(this.name + ' ' + this.age);
},
};
- ๊ฐ์ฒด๋
.
์ด๋ ๋๊ดํธ[]
๋ฅผ ํตํด ์์ฑ ๊ฐ์ ์ ๊ทผํ๋ค. - ๊ฐ์ฒด์ ์๋ ์์ฑ์ ์ ๊ทผํ๋ฉด undefined๋ฅผ ๋ฐํ
console.log(student.name); // dot ํ์๋ฒ
console.log(student['area']); // [] ํ๊ธฐ๋ฒ
console.log(student.address); // undefined
console.log(student.address || '๋ถ๋ช
'); // ๋ถ๋ช
- ์์ฑ ๊ฐ์ ๋ณ๊ฒฝํ ๋๋
.
์ด๋ ๋๊ดํธ[]
์ฌ์ฉ - ๊ฐ์ฒด์ ๊ฐ์ ํ ๋นํ๋ ์์ฑ์ด ์์ ๊ฒฝ์ฐ, ๊ทธ ์์ฑ์ ์๋์ผ๋ก ์ถ๊ฐ๋จ
delete
์ฐ์ฐ์๋ฅผ ์ด์ฉํ๋ฉด ์์ฑ ์ ๊ฑฐ
student['age'] = 25;
student.area = '์์ธํน๋ณ์';
student.hobby = '์ฝ๋ฉ'; // ์์ฑ ์ถ๊ฐ
delete student.hobby; // ์์ฑ ์ ๊ฑฐ
๊ฐ์ฒด๋ ๋ณต์ฌ๋์ง ์๊ณ ์ฐธ์กฐ๋๋ค. ์์ ๋ฐ์ดํฐ ํ์ ์ด ์๋ ๋ชจ๋ ๊ฐ์ ์ฐธ์กฐ ํ์ ์ด๋ค.
'Language > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] Web Storage (0) | 2024.03.10 |
---|---|
[Javascript] AJAX๋ฅผ ์ด์ฉํ ๋ ์ง ๋ณ ํฅํ ์ํ ์ถ๋ ฅํ๊ธฐ (0) | 2023.07.12 |
[Javascript] AJAX๋ ๋ฌด์์ธ๊ฐ? (0) | 2023.07.12 |
[Javascript] ์ฌ์ฉ์ ์ ์ ๊ฐ์ฒด JSON (0) | 2023.07.12 |
[Javascript] ๋ฐฑํฑ(`) ๊ณผ template literal (0) | 2023.07.12 |