Frontend/JavaScript
2월 8일 JavaScript (01~08)
howdyoon
2023. 2. 8. 11:21
01_자바스크립트 기본문법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>01_자바스크립트 기본문법.html</title>
<style>
/* CSS 영역 */
</style>
</head>
<body>
<!-- HTML 본문 영역 -->
<!-- 참조 https://www.w3schools.com/js/default.asp -->
<script>
//자바 스크립트 코드 작성 영역
// 한줄 주석
/* 여러줄 주석 */
</script>
</body>
</html>02_data
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_data.html</title>
<style></style>
</head>
<body>
<h1>데이커, 값, Data, Value</h1>
<script>
//● 객체(Object) : 속성(property)과 함수(method)로 구성되어 있다
// - 객체의 속성과 메소드는 . 로 접근한다
// - 객체.속성
// - 객체.메소드()
//document객체 : HTML 문서를 가리키는 객체
//document.write() : 본문(<body>)에 출력
//1. 숫자형
document.write(123); //정수
document.write(-123);
document.write(1.2); //실수
document.write(-3.4);
//2. 문자형
//-> 반드시 ' 또는 " 기호로 감싼다
document.write('KOREA');
document.write("SEOUL");
document.write("대한민국");
document.write('서울특별시');
//->에러
//-> 크롬브라우저에서 F12를 이용해서 에러메세지 분석후 수정
//document.write('JEJU");
//document.write(대한민국);
//3. 논리형 (boolean)
//-> 맞다(참 true), 틀리다(거짓 false)
document.write(true);
document.write(false);
document.write('true'); //문자형
document.write("false"); //문자형
document.write("1004"); //문자형
</script>
</body>
</html>03_출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_출력.html</title>
<style></style>
</head>
<body>
<script>
//자바스크립트에서 HTML태그를 사용하려면, 문자형으로 사용한다
document.write("대한민국");
document.write("<br>");
document.write("오필승코리아");
document.write("<hr>");
//명령어로 사용되는 기호를 단순 기호로 인식하려면 \와 같이 사용한다
document.write("\"");
document.write("<hr>");
document.write('\'');
document.write("<hr>");
document.write("\\");
document.write("<hr>");
document.write("'");
document.write("<hr>");
document.write('"');
</script>
</body>
</html>04_변수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_변수.html</title>
<style></style>
</head>
<body>
<h3>상수와 변수</h3>
<script>
//참조 https://www.w3schools.com/js/js_variables.asp
//1. 상수 constant
//-> 고정 불변의 값
document.write(3);
document.write(-5);
document.write(3.4);
document.write('A');
document.write("가");
document.write(true);
document.write("<hr>");
//2. 변수 variable
//->변수의 성격: var, let, const, nothing
// 1) var
var a=3; // a라는 변수를 선언하고 3을 저장
var b=5;
var c=7;
document.write(a); //변수
document.write(b);
document.write(c);
document.write(1+2+3);
document.write(a+b+c);
document.write("a"); //상수
document.write("<hr>");
// 2) nothing : 변수를 선언하지 않아도 사용할 수 있다
name="손흥민";
age=25;
height=178.5;
document.write(name);
document.write(age);
document.write(height);
document.write("<hr>");
//변수는 새로운 값으로 대입하면서 사용한다
a=2;
b=4;
c=6;
name="김연아";
age=30;
height=165.9;
document.write(a);
document.write(b);
document.write(c);
document.write(name);
document.write(age);
document.write(height);
document.write("<hr>");
// 3) let
//->반드시 변수를 선언하고 사용한다
let i=2;
let j=4;
let k=i+j;
document.write(k);//6
// 에러. let으로 선언한 i변수를 이중으로 선언할 수 없다
//let i=8;
// 4) const
//-> 변수를 상수화
const x=10;
document.write(x);
//에러. 변수값을 바꿀 수 없다
//x=9;
</script>
</body>
</html>05_document
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_document.html</title>
<style></style>
</head>
<body>
<h3>document 객체</h3>
<div id="demo"></div>
<script>
/*
● 객체 Object
->속성 객체명.멤버변수
->메소드 객체명.멤버함수()
*/
document.write(123);
document.write("대한민국");
document.write("<hr>");
// + 연산자
document.write(3+5); //8
document.write("<hr>");
document.write(3+"5"); //35
document.write("<hr>");
document.write("3"+5); //35
document.write("<hr>");
document.write("3"+"5"); //35
document.write("<hr>");
document.write("3+5"); //3+5
document.write("<hr>");
let name="손흥민";
let age=25;
let height=178.9;
document.write("이름:" + name + "<hr>");
document.write("나이:" + age + "<hr>");
document.write("키:" + height + "<hr>");
//자바스크립트에서 HTML tag 사용시 문자열 처리해서 사용한다
document.write("개나리<br><p>진달래<p>");
document.write("<img src='../../images/monkey.png'>");
document.write("<hr>");
///////////////////////////////////////////////////////
let str=""; //빈문자열 (글자갯수 0개)
str=str+"ONE";
document.write(str);
document.write("<hr>");
str=str+"TWO";
document.write(str);
document.write("<hr>");
str=str+"THREE";
document.write(str); //ONETWOTHREE
document.write("<hr>");
str=""; // 문자열 지우기
document.write("#" + str + "#");
document.write("<hr>");
//////////////////////////////////////////////////
//본문 <body>에 있는 id 속성 접근
//1)순수 JavaScript
//document.getElementById("demo")
//document.getElementById("demo").innerText="아이티윌";
//2)jQuery 접근 (jQuery라이브러리 필요함)
//$("#demo")
//$("#demo").val("아이티윌")
//////////////////////////////////////////////////
//연스) 이름, 나이, 키 값들을 표작성을 해서 id=demo에 출력하시오
name="김연아";
age=30;
height=165.7;
let result=""; //결과값
result = result + "<table border='1'>";
result = result + "<tr>";
result = result + " <th>이름</th>";
result = result + " <td>" + name + "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + " <th>나이</th>";
result = result + " <td> " + age + "</td>";
result = result + "</tr>";
result = result + "<tr>";
result = result + " <th>키</th>";
result = result + " <td> " + height + "</td>";
result = result + "</tr>";
result = result + "</table>"
//결과값을 문자열로 출력
//document.getElementById("demo").innerText = result; //$("#demo").text(result)
//결과값을 HTML tag 형식으로 출력
document.getElementById("demo").innerHTML = result; //$("#demo").html(result)
</script>
</body>
</html>06_연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_연산자.html</title>
<style></style>
</head>
<body>
<h3>연산자</h3>
<script>
//1. 산술연산자
document.write(5+3);
document.write(5-3);
document.write(5*3);
document.write(5/3); // 몫 1.666666
document.write(5%3);// 나머지 2
document.write("<hr>");
document.write(3/5); //0.6
document.write(3%5); //3
document.write("<hr>");
/////////////////////////////////////
//2. 비교(관계)연산자
//-> 논리형(boolean)으로 반환된다
//->true, false
document.write(5>3);
document.write(5<3);
document.write("<hr>");
document.write(5>=3);
document.write(5<=3);
document.write("<hr>");
document.write(5==3); //서로같다
document.write(5!=3); //서로 같지않다
document.write("<hr>");
//3. 논리연산자
// 1) && 연산자
// -> 그리고, and연산자, 논리곱
// -> 모든 조건이 true 일때만 true
// -> ~이면서
document.write(5<3 && 2<4);
// false true
// false
// 2) ||연산자
// -> 또는 ,or 연산자, 논리합
// -> 조건들중에서 하나만이라도 true 이면 true
// -> ~이거나
document.write(5<3 || 2<4);
// false true
// true
// 3) ! 연산자
// -> 논리 부정 연산자, not 연산자
// -> ~아니라면
let flag=true;
document.write(!flag);
</script>
</body>
</html>07_연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>07_연습문제.html</title>
<style></style>
</head>
<body>
<h3>연산자 연습문제</h3>
<script>
//문1) 임의의 정수가 짝수(2의 배수)인지 확인하시오
//-> 짝수란? 2로 나누어서 나머지가 0
let a=4;
document.write(a%2==0);
// 4%2
// 0 == 0
document.write(a%2!=1);
// 4%2
// 0 != 1
document.write("<hr>");
//문2) 임의의 정수가 3의 배수인지 확인하시오
let b=7;
document.write(b%3==0);
// 7%3
// 1 == 0
document.write("<hr>");
//문3) 임의의 정수가 4의 배수인지 확인하시오
let c=4;
document.write(c%4==0);
// 4%4
// 0 == 0
document.write("<hr>");
//문4) 해당 년도가 윤년인지 확인하시오
//->윤년 : 4년마다 한번씩 2월 29일이 속해 있는 년도
let year=2020;
document.write(year%4==0);
document.write("<hr>");
//문5) 임의의 정수가 2의 배수이면서 5의 배수인지 확인하시오
let d=5;
document.write(d%2==0 && d%5==0);
document.write("<hr>");
//문6) 임의의 정수가 1 또는 3인지 확인하시오
let code=1;
document.write(code==1 || code==3);
document.write("<hr>");
//문7) 국어점수가 80~89 사이인지 확인하시오
let kor=85;
document.write(kor>=80 && kor=89);
//문8) 해당 년도가 윤년인지 확인하시오 (윤년 구하는 공식)
let y=2023;
document.write(y%4==0 && y%100!=0 || y%400==0);
</script>
</body>
</html>08_연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>08_연산자.html</title>
<style></style>
</head>
<body>
<h3>연산자</h3>
<script>
//1. () 연산자
document.write(3+4+5/2); //9.5
document.write((3+4+5)/2); //6
document.write("<hr>");
//2. 대입연산자
let num=3;
num=num+2; //3+2
document.write(num+"<hr>");
num+=2;
document.write(num+"<hr>");//7
num=num-3; //7-3
document.write(num+"<hr>");//4
num-=3;
document.write(num+"<hr>");//1
num*=10; //1*10
document.write(num+"<hr>");//10
num/=2; //10/2
document.write(num+"<hr>");//5
num%=2; //5%2
document.write(num+"<hr>");//1
/////////////////////////////////
//3. 1증감연산자
let a=3;
a=a+1; //3+1
document.write(a+"<hr>");
a+=1; //5
document.write(a+"<hr>");
a++; //6
document.write(a+"<hr>");
++a; //7
document.write(a+"<hr>");
let b=3;
b=b-1; //3-1
document.write(b+"<hr>");
b-=1 //1
document.write(b+"<hr>");
b--; //0
document.write(b+"<hr>");
--b; //-1
document.write(b+"<hr>");
//1증감연산자는 다른 계산식과 같이 사용할 경우 주의!!
let c=10;
let d=20;
let i=c++; //let i=c
//c=c+1
let j=--d; //d=d-1
//let j=d
document.write(c+d+i+j);//11+19+10+19
document.write("<hr>");
/////////////////////////////////////
//4. 삼항연산자
//형식) (조건) ? 참 : 거짓
//문1) 절대값을 구하시오 (양수값을 구하시오)
let su=5;
let result = (su<0) ? su*-1 : su;
// -5 <0 -5*-1
document.write(su+" 절대값: " + result);
document.write("<hr>");
let n=3;
document.write(n*-1); //이항
document.write(-n); //n*-1
document.write("<hr>");
//문2) 세개의 수중에서 가장 큰값(최대값)을 구하시오
let x=7, y=5, z=9;
let max = (x<y) ? y : x;
// 7<5 7
max = (max<z) ? z : max;
// 7<9 9
document.write(x + "," + y + "," + z + "중 최대값 : " + max);
</script>
</body>
</html>