개발 공부/HTML

📘6강 - 자바스크립트 기초

squareegg 2025. 6. 5. 14:29

JavaScript 기초 완전정복 🚀

웹프로그래밍의 핵심, 자바스크립트 마스터하기

안녕하세요! 오늘은 웹프로그래밍의 필수 언어인 JavaScript에 대해 자세히 알아보겠습니다. 이 포스팅 하나로 JavaScript의 기초부터 실무에서 자주 사용하는 내용까지 모두 정리했습니다. 📚

🎯 학습 목표

이 포스팅을 다 읽으면 다음과 같은 것들을 할 수 있게 됩니다:

✅ 자바스크립트 언어의 요소와 구조 이해
✅ 웹 페이지에 자바스크립트 코드 삽입
✅ 브라우저 출력 및 사용자 입력 처리
✅ 데이터 타입과 변수 활용
✅ 각종 연산자 사용법
✅ 조건문과 반복문 작성
✅ 함수 작성 및 내장함수 활용

🌟 JavaScript란?

📖 JavaScript의 역사

1995년 넷스케이프에서 개발
Netscape Navigator 2.0 브라우저에 최초 탑재
웹 프로그래밍 개념을 창시한 언어

⚡ JavaScript의 특징

HTML 문서에 내장 가능
조각 소스 코드 형태
스크립트 언어 - 인터프리터로 실행, 컴파일 불필요
단순함 - C언어 구조를 차용해 배우기 쉬움

<html>
<head>
<script>
    var sum = 0;
    for(n=0; n<10; n++)
        sum += n;
    alert("합은 = " + sum);
</script>
</head>
<body>
    ...
</body>
</html>

🎪 웹 페이지에서 JavaScript의 역할

1. 사용자 입력 및 계산

마우스와 키보드 입력은 오직 JavaScript로만 가능
각종 계산 기능 구현

2. 웹 페이지 동적 제어

HTML 태그의 속성, 콘텐츠 동적 변경
CSS 프로퍼티 값 실시간 수정

3. 브라우저 제어

브라우저 윈도우 크기와 모양 제어
새 윈도우 열기/닫기
다른 웹사이트 접속, 히스토리 제어

4. 웹 서버와의 통신

Ajax를 통한 비동기 통신

5. 웹 애플리케이션 작성

캔버스 그래픽, 로컬/세션 스토리지, 위치정보서비스 등

📝 JavaScript 코드 작성 위치 4가지

1. HTML 태그의 이벤트 리스너 속성

<img src="apple.png" 
     onmouseover="this.src='banana.png'" 
     onmouseout="this.src='apple.png'">

2. <script></script> 태그 안

<script>
function over(obj) {
    obj.src="banana.png";
}
</script>

3. 별도 JavaScript 파일 (.js)

// lib.js 파일
function over(obj) {
    obj.src="banana.png";
}

<!-- HTML에서 불러오기 -->
<script src="lib.js"></script>

4. URL 부분에 작성

<a href="javascript:alert('클릭하셨어요?')">클릭해보세요</a>

💾 JavaScript 출력 및 입출력

📤 HTML 콘텐츠 출력

// 웹 페이지에 직접 HTML 출력
document.write("<h3>Welcome!</h3>");
document.write("2 + 5 는 <br>");
document.write("<mark>7 입니다.</mark>");

💬 다이얼로그 3종류

1. 프롬프트 다이얼로그 (입력받기)

var name = prompt("이름을 입력하세요", "홍길동");
if(name == null) {
    // 취소 버튼 클릭 시
} else if(name == "") {
    // 빈 문자열 입력 시
} else {
    // 정상 입력 시
}

2. 확인 다이얼로그 (확인/취소)

var result = confirm("전송할까요?");
if(result == true) {
    // 확인 버튼 클릭
} else {
    // 취소 버튼 클릭
}

3. 경고 다이얼로그 (알림)

alert("클릭하였습니다!");

🏷️ 식별자와 문장 구조

📛 식별자 만들기 규칙

첫 번째 문자: 알파벳(A-Z, a-z), 언더스코어(_), $ 문자만 가능
두 번째 이상: 알파벳, 언더스코어(_), 숫자(0-9), $ 사용 가능
대소문자 구분: myHome과 myhome은 다른 식별자
예약어 사용 불가: false, for, if, null 등

// 올바른 예
student_ID;   // ✅
_code;        // ✅ (권장하지 않음)
bar, Bar;     // ✅ 서로 다른 식별자

// 잘못된 예
6variable;    // ❌ 숫자로 시작
if;           // ❌ 예약어
%calc;        // ❌ % 사용 불가

📜 문장과 세미콜론

i = i + 1;        // ✅ 세미콜론 사용
j = j + 1         // ✅ 한 줄에 한 문장이면 생략 가능
k = k + 1; m = m + 1;  // ✅ 한 줄에 여러 문장
n = n + 1 p = p + 1;   // ❌ 첫 번째 문장 끝에 세미콜론 필요

📊 데이터 타입과 변수

🎯 JavaScript 데이터 타입

숫자 타입: 정수, 실수 (예: 42, 3.14)
논리 타입: true, false
문자열 타입: '좋은 세상', "a", "365"
객체 레퍼런스 타입: 객체를 가리킴
null: 값이 없음을 표시

특징: JavaScript에는 문자 타입이 없습니다. 모든 문자는 문자열로 표현!

🔤 변수 선언 3가지 방법

1. var 키워드

var score;                    // 변수 선언
var year, month, day;         // 여러 변수 동시 선언
var address = "서울시";       // 선언과 동시에 초기화

// 문제점: 재선언 가능
var greeter = "hey hi";
var greeter = "say Hello";   // 문제없이 실행됨

2. let 키워드 (권장)

let greeting = "say Hi";
greeting = "say Hello";      // ✅ 업데이트 가능

let greeting = "say Hi";
let greeting = "say Hello";  // ❌ 에러: 재선언 불가

3. const 키워드 (상수)

const PI = 3.14159;          // ✅ 선언과 동시에 초기화 필수
PI = 3.14;                   // ❌ 에러: 값 변경 불가

🌍 변수 스코프 (전역변수 vs 지역변수)

var x = 100;  // 전역변수

function myFunction() {
    var y = 10;      // 지역변수
    x = 200;         // 전역변수 x 수정
    z = 50;          // 새로운 전역변수 z 생성
    
    var x = 1;       // 지역변수 x 생성
    this.x = 300;    // 전역변수 x에 접근
}

🧮 JavaScript 연산자 완전정복

➕ 산술 연산자

var x = 32;
var total = 100 + x*2/4 - 3;  // total은 113
var div = x / 10;              // div = 3.2 (항상 실수 결과)
var mod = x % 5;               // mod = 2 (나머지)

📈 증감 연산자

// 전위 연산자
var a = 1;
var b = ++a;  // a=2, b=2

// 후위 연산자  
var c = 1;
var d = c++;  // c=2, d=1

📝 대입 연산자

var a = 3, b = 3, c = 3;
a += 3;  // a = a + 3 → a = 6
b *= 3;  // b = b * 3 → b = 9  
c %= 2;  // c = c % 2 → c = 1

⚖️ 비교 연산자

var x = 13, y = 7;
console.log(x == y);   // false
console.log(x != y);   // true
console.log(x >= y);   // true
console.log(x > y);    // true

🔗 논리 연산자

var score = 90, age = 20;
var result = (score > 80) && (age < 25);  // true

// AND(&&), OR(||), NOT(!)
console.log(true && false);   // false
console.log(true || false);   // true
console.log(!true);           // false

🎯 3항(조건) 연산자

var x = 5, y = 3;
var bigger = (x > y) ? x : y;  // 5가 더 크므로 bigger = 5

// 조건 ? 참일때값 : 거짓일때값
var result = (score >= 60) ? "합격" : "불합격";

🔗 문자열 연결 연산자

"abc" + "de"        // "abcde"
"abc" + 23          // "abc23"
23 + "abc"          // "23abc"
23 + 35             // 58 (숫자 덧셈)
23 + 35 + "abc"     // "58abc" (순서 주의!)
"abc" + 23 + 35     // "abc2335"

🔀 조건문과 반복문

🔧 if-else 조건문

var score = parseInt(prompt("점수를 입력하세요"));

if(score >= 90) {
    grade = "A";
} else if(score >= 80) {
    grade = "B"; 
} else if(score >= 70) {
    grade = "C";
} else if(score >= 60) {
    grade = "D";
} else {
    grade = "F";
}

🔄 switch-case 문

var coffee = prompt("무슨 커피 드릴까요?");
var price = 0;

switch(coffee) {
    case "espresso":
    case "에스프레소":
        price = 2000;
        break;
    case "카푸치노":
        price = 3000;
        break;
    case "카페라떼":
        price = 3500;
        break;
    default:
        document.write(coffee + "는 없습니다.");
}

🔁 반복문 3종류

1. for 문

// 0부터 9까지 출력
for(var i = 0; i < 10; i++) {
    document.write(i);
}

// 10px부터 35px까지 5씩 증가하며 출력
for(var size = 10; size <= 35; size += 5) {
    document.write("<span style='font-size:" + size + "px'>");
    document.write(size + "px</span>");
}

2. while 문

var n = parseInt(prompt("0보다 큰 정수를 입력하세요"));
var i = 0, sum = 0;

while(i <= n) {
    sum += i;
    i++;
}
document.write("0에서 " + n + "까지 합은 " + sum);

3. do-while 문

var i = 0, sum = 0;
do {
    sum += i;
    i++;
} while(i <= n);

⏹️ break와 continue

// break: 반복문 완전히 빠져나가기
while(true) {
    sum += i;
    if(sum > 3000) break;  // 3000 넘으면 중단
    i++;
}

// continue: 현재 반복만 건너뛰기  
for(i = 1; i <= 10; i++) {
    if(i % 3 != 1) continue;  // 3으로 나눈 나머지가 1이 아니면 건너뛰기
    document.write(i + " ");
    sum += i;
}

🎪 JavaScript 함수

📦 함수의 기본 구조

// 함수 선언문
function adder(a, b) {
    var sum = a + b;
    return sum;
}

// 함수 표현식
var adder2 = function(a, b) {
    var sum = a + b;
    return sum;
};

// 함수 호출
var result = adder(10, 20);  // result = 30

⚡ 즉시 실행 함수 (IIFE)

// 기본 형태
(function() {
    var localVar = 'This is local';
    console.log(localVar);
})();

// 값을 반환하는 IIFE
var result = (function() {
    var x = 10, y = 20;
    return x + y;
})();  // result = 30

// 클로저를 활용한 IIFE
var counter = (function() {
    var count = 0;
    return {
        increment: function() { count++; },
        decrement: function() { count--; },
        getCount: function() { return count; }
    };
})();

counter.increment();
console.log(counter.getCount());  // 1

🛠️ JavaScript 내장 함수들

eval() - 문자열을 코드로 실행

var result = eval("2*3+4*6");  // result = 32

parseInt() - 문자열을 정수로 변환

var num1 = parseInt("32");      // 32 (10진수)
var num2 = parseInt("0x32");    // 50 (16진수)
var num3 = parseInt("hello");   // NaN (변환 불가)

isNaN() - 숫자가 아닌지 확인

isNaN(32);       // false (숫자임)
isNaN("hello");  // true (숫자가 아님)

🎲 실전 함수 예제: 구구단

function gugudan(n) {
    var m = parseInt(n);
    
    // 입력값 검증
    if(isNaN(m) || m < 1 || m > 9) {
        alert("1~9 사이의 숫자를 입력하세요!");
        return;
    }
    
    // 구구단 출력
    for(var i = 1; i <= 9; i++) {
        document.write(m + " x " + i + " = " + (m*i) + "<br>");
    }
}

// 사용법
var n = prompt("구구단 몇 단을 원하세요?", "");
gugudan(n);

🎯 마무리

JavaScript는 웹 개발의 핵심 언어입니다. 이 포스팅에서 다룬 내용들은 모두 실무에서 자주 사용되는 기초이지만 중요한 개념들입니다.

🌟 기억해야 할 핵심 포인트

변수 선언: let과 const 사용을 권장
함수: 재사용 가능한 코드 블록으로 활용
조건문/반복문: 프로그램의 흐름 제어
내장함수: parseInt(), isNaN() 등 적극 활용

📚 다음 단계

DOM 조작하기
이벤트 처리하기
Ajax 통신하기
ES6+ 문법 익히기

JavaScript 마스터의 첫 걸음을 축하합니다! 🎉

💡 Tip: 실습이 가장 중요합니다. 이 포스팅의 모든 코드를 직접 타이핑해보고 실행해보세요!

도움이 되셨다면 좋아요❤️와 구독🔔 부탁드립니다!

728x90

'개발 공부 > HTML' 카테고리의 다른 글

📘 8강 – HTML DOM (0)	2025.06.09
📘 7강 – 자바스크립트 객체 (1)	2025.06.09
📘5강 - CSS3 고급: 레이아웃, 스타일링, 애니메이션의 모든 것 (2)	2025.06.05
📘4강 - CSS3 기본: 웹페이지를 아름답게 꾸미는 첫걸음 (1)	2025.06.05
📘3강 - 시맨틱 태그와 폼: 의미 있는 웹 구조와 사용자 입력의 모든 것 (2)	2025.06.05

현재글📘6강 - 자바스크립트 기초

squareegg

squareegg 님의 블로그 입니다.

Today :
Yesterday :

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30