[JavaScript] 02.Hello,JavaScript!

HeeSung LeeΒ·2023λ…„ 3μ›” 7일
0

js

λͺ©λ‘ 보기
2/3
post-thumbnail
post-custom-banner

πŸ‘‹ Hello, JavaScript!

HTML λ‚΄μ—μ„œ JavaScript λ₯Ό μ‚¬μš©ν•˜κ³  μ‹ΆμœΌλ©΄ <script> νƒœκ·Έλ₯Ό μ΄μš©ν•˜λ©΄ λœλ‹€. λ‹€μŒ μ½”λ“œλ₯Ό 톡해 κ°„λ‹¨ν•œ 메세지λ₯Ό λ›°μ›Œλ³΄μž.

<!DOCTYPE HTML>
<html>
<body>
  <h1>JavaScript</h1>
  <script>
    alert( 'Hello, JavaScript!' );
  </script>
</body>
</html>

이 처럼 <script> νƒœκ·Έμ—λŠ” js μ½”λ“œκ°€ λ“€μ–΄κ°€κ³ , λΈŒλΌμš°μ €κ°€ 이 νƒœκ·Έμ™€ λ§Œλ‚˜λ©΄ <script> νƒœκ·Έ λ‚΄μ˜ μ½”λ“œλ₯Ό μžλ™μœΌλ‘œ μ²˜λ¦¬ν•œλ‹€.

cf) μ™ΈλΆ€ 슀크립트 μ°Έμ‘°ν•˜μ—¬ μ“°κΈ°
μ½”λ“œλ₯Ό μ§œλ‹€ 보면 μ½”λ“œκ°€ κΈΈμ–΄μ Έμ„œ 가독성이 λ–¨μ–΄μ§ˆ λ•Œκ°€ μžˆμ„ 것이닀. κ·ΈλŸ΄λ•ŒλŠ”

<script src="/*js 파일 경둜*/"></script>

μ΄λ ‡κ²Œ μ“°λ©΄ μ½”λ“œλ₯Ό λΆ„ν• ν•˜κ³ , κ·Έκ±Έ μ°Έμ‘°ν•˜μ—¬ μ“Έ 수 있게 λœλ‹€.

✍️ μ„Έλ―Έμ½œλ‘ 

JavaScript λŠ” C, C++ 처럼 μ„Έλ―Έμ½œλ‘ μ„ κΌ­ 뢙이지 μ•Šμ•„λ„ λœλ‹€.JavaScript μ—μ„œλŠ” μ€„λ°”κΏˆμ΄ μžˆλ‹€λ©΄ μ„Έλ―Έμ½œλ‘ μ„ μƒλž΅ν•΄λ„ λœλ‹€. λ¬Όλ‘  μ μ–΄μ€˜λ„ 상관은 μ—†λ‹€. ν•˜μ§€λ§Œ 같은 μ€„μ˜ 2개의 λͺ…령을 μ‹€ν–‰ν•˜λŠ” μ½”λ“œκ°€ ν•¨κ»˜ μžˆλ‹€λ©΄ μ„Έλ―Έμ½œλ‘ μœΌλ‘œ λ¬Έμž₯의 끝을 λ‚˜νƒ€λ‚΄μ•Ό ν•œλ‹€.

console.log(1); console.log(2);
console.log(1)
console.log(2)

🧐 use strict

"use strict" λŠ” λ‹¨μˆœν•œ λ¬Έμžμ—΄ 처럼 보인닀. ν•˜μ§€λ§Œ "use strict" κ°€ 슀크립트 μ΅œμƒλ‹¨μ— μœ„μΉ˜ν•œλ‹€λ©΄ 슀크립트 전체가 λͺ¨λ˜ν•œ λ°©μ‹μœΌλ‘œ 바뀐닀.이 νŠΉλ³„ν•œ μ§€μ‹œμžλ₯Ό μ‚¬μš©ν•˜μ—¬ 엄격λͺ¨λ“œ(strict mode)λ₯Ό ν™œμ„±ν™” ν–ˆμ„ λ•Œλ§Œ 이 변경사항이 ν™œμ„±ν™”λ˜λ„λ‘ ν•˜μ˜€λ‹€.

πŸ“¦λ³€μˆ˜

λ³€μˆ˜(variable) λŠ” 데이터λ₯Ό μ €μž₯ν•  λ•Œ μ“°μ΄λŠ” 이름이 뢙은 μ €μž₯μ†ŒλΌκ³  ν•  수 μžˆλ‹€. JavaScript μ—μ„œλŠ” λŒ€κ°œ let ν‚€μ›Œλ“€λ₯Ό μ‚¬μš©ν•˜μ—¬ λ³€μˆ˜λ₯Ό μƒμ„±ν•œλ‹€. μ•„λž˜ μ½”λ“œλ₯Ό 톡해 더 μ•Œμ•„λ³΄μž.

let a;
let b = 10;
let c, d;
a = b;
alert(a + " " + b);


μœ„ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ 이와 같이 a 와 b 에 10이 μ €μž₯λ˜μ–΄ λ‚˜μ˜€λŠ” λͺ¨μŠ΅μ„ λ³Ό 수 μžˆλ‹€. 또 c 와 d 같이 μ‰Όν‘œλ‘œ κ΅¬λΆ„ν•˜μ—¬ ν•œμ€„μ— λ³€μˆ˜λ₯Ό μ„ μ–Έν•  μˆ˜λ„ μžˆλ‹€.

cf) let λŒ€μ‹  var ?
사싀 λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λŠ” 방법은 ν•˜λ‚˜ 더 μ‘΄μž¬ν•œλ‹€. λ°”λ‘œ var ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 것이닀. var λ₯Ό μ‚¬μš©ν•˜λŠ” 방법은 let κ³Ό λ˜‘κ°™λ‹€.ν•˜μ§€λ§Œ var 와 let 의 μ°¨μ΄λŠ” μ‘΄μž¬ν•œλ‹€.

var a = '쀑볡선언'
console.log(a); // 쀑볡선언
var a = 'κ°€λŠ₯'
console.log(a); // κ°€λŠ₯
let a = '쀑볡선언'
console.log(a); // 쀑볡선언
let a = 'λΆˆκ°€λŠ₯'
console.log(a); // Uncaught SyntaxError: Identifier 'name' has already been declared
a = 'μ΄λ ‡κ²Œ ν•˜λŠ”κ±΄ κ°€λŠ₯'
console.log(a); // μ΄λ ‡κ²Œ ν•˜λŠ”κ±΄ κ°€λŠ₯

μœ„μ²˜λŸΌ var λŠ” 쀑볡선언이 κ°€λŠ₯ν•˜μ§€λ§Œ let 은 쀑볡 선언이 λΆˆκ°€λŠ₯ ν•˜λ‹€.

🏷️ λ³€μˆ˜ λͺ…λͺ… κ·œμΉ™

JavaScript μ—μ„œμ˜ λ³€μˆ˜ λͺ…λͺ… μ‹œ λ‘κ°€μ§€μ˜ μ œμ•½μ‚¬ν•­μ΄ μžˆλ‹€.

  1. λ³€μˆ˜λͺ…μ—λŠ” 였직 λ¬Έμžμ™€ 숫자, 그리고 $와 _만 λ“€μ–΄κ°ˆ 수 μžˆλ‹€.
  2. 첫 κΈ€μžλŠ” μˆ«μžκ°€ 될 수 μ—†λ‹€.
  3. μ—¬λŸ¬ 단어λ₯Ό μ‘°ν•©ν• λ•ŒλŠ” 카멜 ν‘œκΈ°λ²•(camelCase) λ₯Ό μ‚¬μš©ν•œλ‹€.
    var thisIsLongName_1234$;
post-custom-banner

0개의 λŒ“κΈ€