티스토리 뷰
●
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트</title>
<!-- 스타일 시트 -->
<style>
/* 스타일시트 내용 */
</style>
<!-- 자바 스크립트 부분-->
<script>
// 한 줄 주석
/* 여러 줄 주석 */
// html이나 css와 관련된 제어가 있을땐 반드시 <head></head> 사이에 작성
/* ECMA(유럽컴퓨터제조협회)에서 자바스크립트를 ECMAScript라는 이름으로 표준화함
자바스크립트(=ECMAScript) : 브라우저 안에서 실행되는 프로그래밍 언어(객체지향 프로그래밍언어)
*/
</script>
</head>
<body>
자바스크립트 기초
● 참조 사이트 :
○ 모던 자바스크립트 튜토리얼 :https://ko.javascript.info/
모던 JavaScript 튜토리얼
ko.javascript.info
○ MDN 웹 문서 : https://developer.mozilla.org/ko/docs/Web
개발자를 위한 웹 기술 | MDN
웹의 개방성은 개발자들에게 많은 기회를 제공합니다. 하지만 웹 기술을 잘 활용하려면 우선 그 사용 방법을 잘 알아야 합니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.
developer.mozilla.org
○ 라이브러리 알아보기
구글 : “popular javascript library 연도” 검색
구글 : “자바스크립트 라이브러리 순위” 검색
● 자바스크립트(=ECMAScript) : 브라우저 안에서 실행되는 프로그래밍 언어(객체지향 프로그래밍언어)
● ECMA(유럽컴퓨터제조협회)에서 자바스크립트를 ECMAScript라는 이름으로 표준화함
1. 간단한 출력 연습
alert('Hello Javascript~~~') ; // ; 실행문장의 끝, 생략 가능
console.log('안녕!! 자바스크립트') //console.log() : ()안의 내용을 콘솔창에 띄우기
document.write('Hello 자바스크립트~~~ 즐거운 시간')//브라우저 본문에 표시
2. 자바스크립트 기본 용어
a. 키워드 : 자바스크립트가 처음 만들어질 때 정해 놓은 특별한 의미가 있는 단어
● alert, true, false, prompt, if,.…
b. 식별자 : 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어(함수, 메소드, 변수, 상수,...)
c. 식별자 규칙
● 키워드는 사용할 수 없음
● 숫자로 시작할 수 없음(첫 글자는 반드시 문자 또는 _) 3test(x) -> test3, _3test
● 특수문자는 _(underbar, 밑줄)와 $만 허용됨
● 공백 문자를 사용할 수 없음 (test 3 (x) -> test3, test_3)
● 대소문자를 구분
d. 식별자 구분
● 클래스 : 첫 글자를 항상 대문자로 시작
● 변수, 인스턴스(객체), 함수, 메소드 : 항상 소문자로 시작
● 여러 단어의 조합 : 각 단어의 첫 글자를 대문자로 errTest , 또는 _로 단어의 첫 글자들을 연결 err_test
3. 템플릿 문자열
● `(백틱)
`$(변수 또는 수식)`
★변수와 상수
1. 변수 : 변할 수 있는 값(그릇)
2. 변수 선언
a. var 변수명 = 값; var result = 30, var a=8
● var : 변수를 중복해서 선언 가능, 변수가 속하는 범위가 애매함
● var result = 3
var result = 7 => result에는 마지막에 선언한 7이 담기
b. let 변수명 = 값 let result = 30, let a=8
● 중복해서 선언할 수 없음, 변수 범위가 명확
● let result = 3
let result = 7 => 에러, 중복(위하고 아래에서)해서 선언해서
3. 상수 : 값이 한번 정해지면 절대 변하지 않는 값, 항상 같은 수
a. const 상수이름 = 값
const PI = 3.141592
<script>
//원의 넓이 : 반지름 * 반지름 * 3.14
//반지름 입력받아서 원의 넓이 구하기
const PI = 3.14;
let radius = 0;
let area = 0.0;
radius = Number(prompt("반지름 입력"));
area = radius * radius * PI;
console.log(area);
</script>
★ 자료형 및 연산자
● 자료 : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것
● 자료형 : 자료 형태에 따라 나눠 놓은 것(숫자, 문자, 불형....)
● 자바스크립트의 자료형
○ 기본 자료형(primitives) : 숫자, 문자열 , 불
○ 객체 자료형(object) : 함수, 배열,……
● 기본 자료형
숫자 - number, 문자열 - string , 불 - boolean(true, false)
● false : 0, true : 1(0이외의 값)
1. 문자열 자료형 : 글자 하나 또는 한 자 이상
● 반드시 " " 나 ' '로 묶어서 표현
● "" , '' - 빈 문자열
3+7 => 10
'3+7' => 문자열, 3+7
5 => 숫자 5
'5', "5" => 문자열 5
alert('3+7=' + (3+7) + '입니다.') => 3+7=10입니다.
● 문자열 연결 연산자 : +(연달아서 뒤에 것을 연결 해줘) 또는 백틱(` `)을 활용
● 템플릿 문자열 : 백틱(``)으로 감싸고 내부에 ${ }를 넣어 표현
// `${식 또는 변수}`
'3 + 7 =' + (3+7) + '입니다.'
`3 + 7 = ${3+7} 입니다.`
2. 숫자 자료형 : 실수와 정수를 모두 같은 자료형으로 인식
3. 불린(Boolean) 자료형 : 참(true)과 거짓(false)을 표현할 때 사용
a. = : 컴퓨터에서는 대입 연산자로 사용, 오른쪽의 내용을 처리한 후 왼쪽에 대입(담아 주겠다.)
b. ! : 부정(반대로 처리하라, !true => false, !false => true)
4. 산술 연산자
* 숫자 연산
+ 더하기 7 + 2 => 9
- 빼기 7 - 2 => 5
* 곱하기 7 * 2 => 14
/ 나누기 7 / 2 => 3.5
% 나머지 7 % 2 => 1
** 제곱 7 ** 2 => 49
* 홀수 : 숫자 % 2 === 1
짝수 : 숫자 % 2 === 0
n의배수 : 숫자 % n === 0
숫자 % 3 === 0 : 3의배수
숫자 % 5 === 0 : 5의 배수
4. 비교 연산자
=== 왼쪽과 오른쪽이 같다( 값과 자료형까지 같은지 비교)
== 왼쪽과 오른쪽이 같다(값이 같은지 비교)
!== 왼쪽과 오른쪽이 같지 않다(다르다)
!= 왼쪽과 오른쪽이 같지 않다.
> 왼쪽이 오른쪽 보다 크다(초과)
< 왼쪽이 오른쪽 보다 작다(미만)
>= 왼쪽이 오른쪽보다 크거나 같다.(이상)
<= 왼쪽이 오른쪽보다 작거나 같다.(이하)
* 문자열도 크기 비교 가능 : 사전 순서로 크기 비교
사전 앞에 있는 값일 수록 작은 값
5. 불 부정/논리합/논리곱 연산자
! 부정
&& 논리곱(and) : 왼쪽과 오른쪽 모두 참일때만 결과가 참
|| 논리합(or) : 왼쪽과 오른쪽 중 적어도 하나 이상만 참이면 결과가 참
6. 삼항 연산자
조건식 ? 조건식이 참일 때 실행할 값 : 조건식이 거짓일 때 실행할 값
7. 대입 연산자
= (오른쪽 자료를 왼쪽에 대입)
수학: =은 같다는 의미, 컴퓨터: =는 대입의 의미
8. 복합 대입 연산자
+= 기존 변수의 값에 값을 더함
a += 2 => a = a + 2, a += 1 => a = a + 1
-= 기존 변수의 값에 값을 뺀다
a -= 2 => a = a - 2, a -= 1 => a = a -1
*= 기존 변수의 값에 값을 곱하기
a *= 2 => a = a * 2, a *= 1 => a = a * 1
/= 기본 변수의 값에 값을 나눗셈
a /=2 => a = a / 2, a /=1 => a = a / 1
%= 기존 변수의 값에 값을 나머지
a %= 2 => a = a % 2, a %= 1 => a = % 1
9. 증감 연산자
변수++ : 기존의 변수 값에 1을 더함(후위)
a++ => a = a + 1, a += 1
변수가 가지고 있는 값을 계산에 먼저 사용하고 난 후에 변수 값을 1증가
ex) let a=3, b=2, c=4
c = a++ + b => a=4, b=2, c=5
++변수 : 기존의 변수 값에 1을 더함(전위)
++a => a = a + 1, a += 1
변수가 가지고 있는 값을 1 증가시킨 후 계산에 참여
ex) let x=5, y=3, z=2
z = ++x + y => z : 9, x=6, y=3
변수-- : 기존의 변수 값에 1을 뺌(후위)
a-- => a = a - 1, a -= 1
--변수 : 기존의 변수 값에 1을 더함(전위)
--a => a = a - 1, a -= 1
★ prompt() 함수 confirm() 함수
1. prompt() 함수
형식) prompt('메시지 입력','기본 입력 문자열')
출력 결과는 문자열로 출력(숫자도 문자열로 입력)
<script>
//원의 넓이 : 반지름 * 반지름 * 3.14
//반지름 입력받아서 원의 넓이 구하기
const PI = 3.14
let radius = 0;
let area = 0.0;
radius = Number(prompt("반지름 입력"));
area = radius * radius * PI;
console.log(area);
</script>
2. confirm() 함수
형식) confirm('메시지 문자열')
출력 결과는 boolean형으로 출력(true, false)
<script>
// 3월 10일 제주도 여행 찬성 또는 반대를 알려 주세요
// 확인 : 찬성 , 취소:반대
let result = confirm("3월 10일 제주도 여행 찬성 또는 반대를 알려 주세요\n (확인:찬성, 취소:반대)");
// 확인 - true, 취소 - false
alert("당신은 " + result + "입니다");
</script>
★ 자료형 변환
1. 문자열을 숫자로 변환
a. Number() : 숫자(정수, 실수)로 변환, 오직 숫자형 문자만 숫자로 변형
'1300원' -> 숫자로 변환 불가능
'1300' -> 숫자로 변환 가능(1300)
Number('34') -> 34
Number('1300원') -> NaN(Not a Number)
b. parseInt() : 정수로 변환, 숫자+문자열 => 앞의 숫자만 숫자로 변환
'1300원' -> 1300
'1300' -> 1300
23.4 -> 23
parseInt('1300원') -> 1300
c. parseFloat() : 실수(소숫점이 있는 숫자)로 변환
'1.5$' -> 1.5
'1300' -> 1300
'1587.25' -> 1587.25
d. 연산자 -, * , / 를 사용
숫자가 아닌 다른 자료에서 0을 빼거나, 1을 곱하거나 또는 1로 나누면 숫자 자료형으로 변환
"52" - 0 => 52
"52" * 1 => 52
"52" / 1 => 52
true - 0 => 1
2. 숫자를 문자열로 변환 : String( ) 함수
String(자료) 또는
+(문자열 연결 연산자)
String(35.2) -> '35.2'
String(true) -> 'true'
35 + '' -> '35'
35 + "" -> '35'
3. Boolean 자료형으로 변환
Boolean(자료) : 대부분 true로 변환
다만, 0, NaN, ‘…’, “…”(빈문자열), null, undefined 5개의 자료형은 false로 변환
Boolean(”0”) 과 Boolean(”true”)는 문자열이므로 true 임
<script>
//숫자를 입력받아, 그 숫자가 짝수인지 홀수인지 판별
// 1. 키보드로부터 입력 -> prompt()
/* 2. 문자열을 숫자로 변환
1) Number() : 정수/실수로 변환, 오직 숫자형 문자만 숫자로 변환
'1300원' -> Number('1300원')는 숫자로 변환 불가
NaN(Not a Number)
'13' -> Number('13') -> 13
2) parseInt() : 정수로 변환,
숫자+문자열 -> 앞의 숫자만 숫자로 변환
"1300원" -> parseInt("1300원") => 1300
"1300" -> parseInt("1300") => 1300
23.4 -> parseInt(23.4) => 23
3) parseFloat() : 실수(소숫점이 있는 숫자)로 변환
"1.5$" -> parseFloat("1.5$") => 1.5
"1300" -> parseFloat("1300") => 1300
"1587.25" -> parseFloat("1587.25") => 1587.25
3. 숫자를 문자열로 변환
1) + (문자열 연결 연산자)
35 + "" -> "35"
35 + '' -> '35'
2) String(35.2) => "35.2"
3) String(true) => "true"
4. 짝수 / 홀수 판별
숫자 % 2 === 1 : 홀수
숫자 % 2 === 0 : 짝수
5. 삼항 연산자
(조건식) ? true : false
*/
//1. 입력 받기 -> 숫자 변환
let number = Number(prompt("정수 입력>>"));
// let number = parseInt(prompt("정수 입력>>"));
//2. 홀수/짝수 판별
let result = (number % 2 === 1)? "홀수" : "짝수";
console.log("당신이 입력한 숫자는 " + number + "\n" + result);
alert(`당신이 입력한 숫자는 ${number}이고, ${result}입니다` );
document.write(result);
</script>
<script>
//원의 넓이 : 반지름 * 반지름 * 3.14
//반지름 입력받아서 원의 넓이 구하기
const PI = 3.14
let radius = 0;
let area = 0.0;
radius = Number(prompt("반지름 입력"));
area = radius * radius * PI;
console.log(area);
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>원의 넓이 구하기</title>
<script>
//문) 원의 반지름을 입력받아 원의 넓이(반지름 * 반지름 * 3.14)와
// 원의 둘레(반지름 * 2 * 3.14) 구하기
// 출력형태
// 입력받은 반지름 : ~~
// 원의 넓이 : ~~
// 원의 둘레 : ~~
//alert(), document.write(), console.log()
const radius = parseInt(prompt("반지름 입력하세요>> ", "정수 입력"));
const PI = 3.14;
//1. alert()
let output = ""; //출력할 내용을 담을 변수
// output = output + "입력받은 반지름 : " + radius + "\n";
// output += "입력받은 반지름 : " + radius + "\n";
output += `입력받은 반지름 : ${radius}\n`;
// output += `원의 넓이 : ${radius * radius * PI} \n`;
// output += `원의 둘레 : ${radius * 2 * PI}`;
let area = radius * radius * PI;
area = area.toFixed(2); // toFixed(소수 부분의 자릿수)
let area2 = radius * 2 * PI;
area2 = area2.toFixed(2);
output += `원의 넓이 : ${area}\n`;
output += `원의 둘레 : ${area2}`;
alert(output);
//2. document.write()
let output1 = ""; //출력할 내용을 담을 변수
output1 += `입력받은 반지름 : ${radius}<br>`;
output1 += `원의 넓이 : ${area}<br>`;
output1 += `원의 둘레 : ${area2}`;5
document.write(output1 + "<br><br>")
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>원의 넓이 구하기</title>
</head>
<body>
<div class="inner"></div>
<hr> <!-- 수평선 -->
<div id="text"></div>
<script>
const radius_1 = parseInt(prompt("반지름 입력하세요>> ", "정수 입력"));
const PI_1 = 3.14;
let area_1 = radius_1 * radius_1 * PI_1;
area_1 = area_1.toFixed(2); // toFixed(소수 부분의 자릿수)
let area_2 = radius_1 * 2 * PI_1;
area_2 = area_2.toFixed(2);
let output2 = ""; //출력할 내용을 담을 변수
output2 += `입력받은 반지름 : ${radius_1}<br>`;
output2 += `원의 넓이 : ${area_1}<br>`;
output2 += `원의 둘레 : ${area_2}`;
const div_inner = document.querySelector(".inner");
const div_text = document.querySelector("#text");
div_inner.innerHTML = output2;
div_text.innerHTML = output2;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script>
//window.onload = function(){}
document.addEventListener("DOMContentLoaded",function(){
//1. 본문의 태그 읽어오기
const div_inner = document.querySelector(".inner");
//태그 중 class명이 inner인 태그
const div_text = document.querySelector("#text");
//태그 중 id명이 text인 태그
//2. 반지름 입력받기
const r = parseInt(prompt("반지름 입력>> "));
const PI = 3.14;
//3. 본문에 넣을 문장들 작성하기
let output = "";
//1번
// output = "" + "입력받은 반지름 : " + r + "<br>" + "원의 넓이 : " + (r * r * PI) + "<br>" + "원의 둘레 : " + (r * 2 * PI);
//2번 - 1번을 간략화
// output = output + "입력받은 반지름 : " + r + "<br>";
// output = output + "원의 넓이 : " + (r * r * PI) + "<br>";
// output = output + "원의 둘레 : " + (r * 2 * PI);
//3번 - 1번과 2번을 더 간략화
output += "입력받은 반지름 : " + r + "<br>";
output += "원의 넓이 : " + (r * r * PI) + "<br>";
output += "원의 둘레 : " + (r * 2 * PI);
//3. 본문에 내용을 넣기
div_inner.innerHTML = output;
div_text.textContent = output;
/*
태그.innerHTML : 태그의 내용을 읽어오기, html 태그를 적용
태그.textContent : 태그의 내용을 읽어오기, 보안 유리,
html태그를 문자로 인식
태그.innerHTML = 값; // 값을 태그 안에 쓰기(html태그를 적용)
태그.textContent = 값; //값을 태그 안에 쓰기, html태그를 문자열로 처리
*/
//4. 스타일 적용
// div_inner.style.color = "red";
// div_text.style.color = "blue";
});
</script>
</head>
<body>
<div class="inner"></div>
<hr> <!-- 수평선 -->
<div id="text"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>본문에 글자 넣기</title>
</head>
<body>
<div class="box1"></div> <!-- Hi Javascript -->
<hr>
<div id="box2"></div> <!-- 즐거운 시간 -->
<script>
//본문의 태그를 읽어 변수에 저장
const box1 = document.querySelector(".box1");
const box2 = document.querySelector("#box2");
//본문의 태그에 글자 넣기
box1.textContent = "Hi Javascript";
box2.textContent = "즐거운 시간" ;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>본문에 글자 넣기</title>
<script>
// document.addEventListener("이벤트", 이벤트리스너);//이벤트리스너=콜백함수
document.addEventListener("DOMContentLoaded",function(){
//본문의 태그를 읽어 변수에 저장
const box1 = document.querySelector(".box1");
const box2 = document.querySelector("#box2");
//본문의 태그에 글자 넣기
box1.textContent = "Hi Javascript";
box2.textContent = "즐거운 시간" ;
});
</script>
</head>
<body>
<div class="box1"></div> <!-- Hi Javascript -->
<hr>
<div id="box2"></div> <!-- 즐거운 시간 -->
</body>
</html>
● 변수
<script>
//변수 - 그릇, 마지막에 담긴 값 하나만 기억
let name = "홍길동";
document.write(name);
name = "하늘";
document.write("<br>" + name);
const score = 70;
document.write("<br>" + score);
score = 90; //const 로 선언한 변수는 처음에만 값을 넣을 수 있고
// 나중에 다른 값을 넣을 수 없음
document.write("<br>" + score);
</script>
<script>
/*
** 홍길동님 성적표 **
이름 : 홍길동
국어 : 90
영어 : 80
** 이경희님 성적표 **
이름 : 이경희
국어 : 70
영어 : 85
*/
//변수를 선언하고 초기화
let name = "";
let eng = 0;
let kor = 0;
name = prompt("이름을 입력>> ");
eng = Number(prompt("국어 점수 입력>> ")); //형변환
kor = Number(prompt("영어 점수 입력>> ")); //형변환
// kor = parseInt(prompt("영어 점수 입력>> ")); //형변환
// avg = parseFloat(prompt("영어 점수 입력>> ")); //형변환
document.write("** " + name + "님의 성적 ** <br>");
document.write("이름 : " + name + "<br>");
document.write("국어 : " + kor + "<br>");
document.write("영어 : " + eng + "<br>");
document.write("합계 : " + (kor + eng) + "<br>");
</script>
<script>
// 음료를 주문하세요.
// 주문한 음료는 ~~ 입니다.
//1. 변수 선언
let order = "";
//2. 키보드로부터 입력 받고
order = prompt("음료를 주문하세요>>");
//3. 출력
document.write("주문한 음료는 " + order + "입니다.");
</script>
'Front-End Programming > JavaScript' 카테고리의 다른 글
| 배열(Array) (3) | 2025.03.18 |
|---|---|
| 제어문 (0) | 2025.03.18 |
| javascript 동기와 비동기,ajax get,post 예제_오전 (1) | 2025.03.12 |
| javascript 빠진 .html (0) | 2025.03.11 |
| javascript ajax 예제 (1) | 2025.03.11 |