자바스크립트 기초
HTML - 웹 문서의 내용을 구성
CSS - 웹 문서의 레이아웃이나 색상, 스타일 등을 지정
자바스크립트 - 여기에 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음
자바스크립트는 HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 웹 사이트 UI 부분에 많이 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색 바꾸기</title>
<style>
body { text-align:center; }
#heading { color:blue; }
#text {
color:gray;
font-size:15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
</script>
</body>
</html>
1. <!DOCTYPE html>
이 문서가 웹 문서라는 것을 알게 됨
<html></html> 사이의 내용을 보고 HTML표준에 맞춰 읽기 시작
2. <html></html> , <body></body> 태그 사이에 각각 어떤 태그가 있는지 확인
태그 간의 관계는 어떻게 되어있는지 분석
3. 태그 분석 긑나면 <style> 정보 분석
4. <script> 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘김
자바 스크립트 해석기는 <script></script> 사이의 소스를 해석
5. 분석한 HTML, CSS정보에 따라 웹 브라우저 화면에 표시
6. 웹 브라우저에서 '자바스크립트' 텍스트를 클릭하면 분석해 놓은 자바스크립트를 실행해서 그결과를 화면에 표시
간단한 입출력
alert(메시지)
: 알림창, 가장 맣이 사용하는 간단한 대화 상자
confirm(메시지)
: 확인창, 단순히 메시지를 보여 주는 기능만 하는 알림창 대신 확인창은 사용자가 버튼을 클릭 가능함
그러면 선택한 결과에 맞게 프로그램이 동작
prompt(메시지, 기본값)
: 텍스트 필드가 있는 작은 창, 텍스트 필드 안에 간단한 메시지를 입력 가능, 그 내용을 가져와 프로그램에서 사용
자바스크립트 기본 문법
변수
: 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터
변수 작성 규칙
- 변수의 이름은 대소 문자를 구별하여 작성
- 영문자와 숫자, 언더스코어(_)만 사용하여 숫자로 시작할 수 없음
▽ 자료형
| 종류 | 설명 | |
| 기본 유형 | 숫자형 | 따옴표 없이 숫자로만 표시 |
| 문자열 | 작은따옴표(' ')나 큰따옴표(" ")로 묶어서 나타냄 | |
| 논리형 | 참과 거짓이란 2가지 값만 가짐 | |
| 복합유형 | 배열 | 하나의 변수에 여러 개의 값을 저장 |
| 객체 | 함수와 속성들이 함께 포함된 자료형 | |
| 특수유형 | undefined | 데이터 유형이 지정되지 않았을 때의 상태를 나타냄 |
| null | 데이터 값이 유효하지 않은 상태를 나타냄 | |
▽ 연산자
| 종류 | 설명 |
| 산술 연산자 | +,-,*,/,%,++,-- |
| 할당 연산자 | =,+=,-=,*=,/=,%= |
| 비교 연산자 | ==,!=,===,!==,<,<=,>,>= |
| 논리 연산자 | !,&&,|| |
| 조건 연산자 | (조건) ? true일 때 실행한 명령 : false일 때 실행할 명령 |
조건문
⊙ if 문
if(조건) {
조건이 true일 때 실행할 명령
}
⊙if~else 문
if(조건) {
조건이 true일 때 실행할 명령
} else {
조건이 false일 때 실행할 명령
}
⊙switch 문
switch(조건)
{
case 값1: 문장1
break
case 값2: 문장2
break
............
default: 문장n
}
반복문
⊙for문
for(초기값; 조건; 증가식) {
실행할 명령
}
⊙while문
while(조건){
실행할 명령
}
⊙do~while문
do {
실행할 명령
} while(조건)
⊙ break문
: 반복문이 끝나기 전에 조건에 따라 반복문을 빠져나옴
⊙ continue문
: 반복 과정을 한 차례 건너뛰고 반복문의 맨 앞으로 돌아감
마무리 문제 ♥♡
1. 사용자가 입력한 숫자가 4의 배수인지 확인하는 프로그램을 작성해보시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 1</title>
<style>
body {
font-size:1.2em;
text-align:center;
}
</style>
</head>
<body>
<h2>4의 배수일까 아닐까</h2>
<script>
var userNumber = parseInt(prompt("숫자를 입력하시오."));
if (userNumber !== null) {
if (userNumber % 4 === 0)
document.write(userNumber +"는 4의 배수입니다.");
else
document.write(userNumber +"는 4의 배수가 아닙니다.");
}
</script>
</body>
</html>
2. 숫자를 입력받은 후 1부터 그 숫자까지 3의 배수를 모두 화면에 출력합니다. 그리고 츨력된 3의 배수가 총 몇 개인지 알려주는 프로그램을 작성해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
body {
font-size:1.2em;
text-align:center;
}
p {
color:#f00;
font-weight: bold;
}
</style>
</head>
<body>
<h2>3의 배수 찾기</h2>
<script>
var i;
var userNumber = parseInt(prompt("몇 까지 3의 배수를 찾을까요?", "100"));
var count = 0;
if (userNumber !== null) {
for (i = 1; i <= userNumber; i++) {
if (i % 3 === 0) {
count++;
document.write(i + ", ");
}
}
document.write("<p>" + userNumber + "까지 3의 배수의 갯수 : " + count + "</p>");
}
</script>
</body>
</html>
'HTML_CSS_JavaScript' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑨ (0) | 2023.03.13 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑧ (0) | 2023.03.09 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑤ (0) | 2023.03.01 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ④ (0) | 2023.02.28 |