반응형
JavaScript의 기능
JavaScript의 특징
alert()를 이용하여 알림창으로 출력해보기
<!-- html 문서에 직접 작성 -->
<script>
alert("안녕하세요! 자바스크립트 세계에 오신 것을 환영합니다.");
</script>
console.log()를 이용하여 콘솔창으로 출력해보기
<!-- index.html -->
<script>
console.log("자바스크립트는 객체 기반입니다!");
console.log("데이터 타입 선언 없이 변수 생성 가능!");
</script>
※ VSCode 확장 프로그램 추천 : Live Server, ESLint
★ 주석 달기를 습관화하자 !
// 한 줄 주석
/* 여러 줄 주석 */
외부 js 파일로 연결하는 것이 국룰, 위치는 body 아래 쪽에.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My First JS</title>
</head>
<body>
</body>
<script src="main.js"></script>
</html>// main.js
alert("VS Code에서 실행한 자바스크립트!");
- HTML 문서에 JS를 넣는 3가지 방법:
- <script> 태그 내부에 직접 작성
- <script src="main.js">로 외부 JS 파일 연결
- <button onclick="..."> 속성으로 직접 연결
실습 (html 내에서 실행)
<button onclick="alert('클릭했어요!')">눌러보세요</button>alert("자바스크립트에 오신 걸 환영합니다!"); // 알림창으로 출력
console.log("이건 콘솔에 출력됩니다."); // 콘솔창으로 출력
document.write("<h1>Hello, JavaScript!</h1>"); // 페이지 내 텍스트로 출력
prompt("문자열") : 문자열로 입력을 받음
let name = prompt("당신의 이름은?");
alert("안녕하세요, " + name + "님!");
alert(`안녕하세요, ${name}님!`); // 템플릿 리터럴 방식
// 요즘 많이 쓰는 방법. `(백틱)이랑 '(싱글 쿼테이션) 혼동 주의!
변수 선언
let x = 10; // 변수 (재할당 가능)
const y = 20; // 상수 (재할당 불가)
var z = 30; // (hoisting 문제로 그냥 안쓰는 거 권장)
실습 - 나이 계산기
let currentYear = 2025;
let birthYear = prompt("태어난 해를 입력하세요");
let age = currentYear - birthYear + 1;
alert(`당신의 나이는 ${age}세입니다.`);
자료형 (dtype)
실습 - 변수의 자료형 확인
let name = "철수";
let age = 18;
let isStudent = true;
console.log(typeof name); // string
console.log(typeof age); // number
console.log(typeof isStudent); // boolean
연산자
- ==: 타입을 변환해서 비교 (느슨한 비교)
- ===: 타입까지 엄격히 비교 (권장)
실습 - 할인가격 계산기
let price = 10000;
let rate = 0.2;
let discount = price * rate;
let finalPrice = price - discount;
console.log("할인된 가격은 " + finalPrice + "원입니다.");
※ 복합 연산자와 증감 연산자
복합 연산자 : x += 1, x *= 2 등
증감 연산자 : x++, --x 등
실습
let a = 10;
a += 5; // 15
a *= 2; // 30
console.log(`최종 값은 ${a}입니다.`);
이름과 나이를 입력 받아 인삿말 출력
let name = prompt("이름은?");
let age = prompt("나이는?");
alert(`안녕하세요 ${name}님. 당신은 ${age}세입니다.`);
JavaScript 튜토리얼
모던 JavaScript 튜토리얼
ko.javascript.info
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| JavaScript #6 (반복문 - while, break/continue) (0) | 2025.06.24 |
|---|---|
| JavaScript #5 (반복문 - for) (3) | 2025.06.24 |
| JavaScript #4 (연습문제) (0) | 2025.06.23 |
| JavaScript 기초 #3 (제어문, if&else, switch) (0) | 2025.06.23 |
| JavaScript 연습문제 #2 (변수, 입출력, 연산자) (0) | 2025.06.23 |
