수업내용/Javascript & jQuery
[2022.11.22.화] 자바스크립트
주니어주니
2022. 11. 22. 15:57
1. 자바스크립트
서블릿, JSP의 응답으로 받은 HTML에 대한 차후 조작
- 브라우져 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍언어다.
- java와 문법적 유사성이 많아서 쉽게 배울 수 있다.
- 인터프리터(Interpret) 프로그래밍 언어다. (컴파일 과정없이 소스가 실행파일로 사용된다.)
1-1. 자바스크립트로 할 수 있는 것
- HTML 컨텐츠를 변경할 수 있다.
- 브라우저를 통해서 현재 보고 있는 웹 페이지를 변경할 수 있다.
- HTML 태그의 속성을 변경할 수 있다.
- HTML 컨텐츠의 스타일을 변경할 수 있다.
- CSS 변경할 수 있다.
- 사용자 상호작용하는 프로그램을 작성할 수 있다.
- 이벤트모델을 활용한다.
- 브라우저의 도움없이 서버와 데이터통신을 할 수 있다.
- AJAX기술을 활용하면 가능하다.
1-2. 자바스크립트 특징
- 스크립트언어(인터프리터 언어)다.
- 객체지향프로그래밍 언어다.
- 동적데이터타입을 지원한다.
- 자바스크립트의 함수(메소드)는 1급시민이다.
- 메소드를 변수에 대입 가능, 매개변수의 인자로 전달 가능, 메소드의 반환타입으로 사용 가능
1-3. 자바스크립트 작성하기
- 스크립트 태그내에서 작성하기
<script>
console.log('hello, javscript');
</script>
- 별도의 자바스크립트 파일을 사용
- app.js와 같은 자바스크립트 파일 작성
// app.js
console.log("hello, javscript");
- script태그로 웹 문서에 포함시킨다.
<script type="text/javascript" src="app.js"></script>
- 자바스크립트 실행해보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트</title>
</head>
<body>
<h1>자바스크립트의 실행</h1>
<div>
<button onclick="run();">버튼</button>
</div>
<script type="text/javascript">
// run() 함수를 정의함
function run(){
console.log("자바스크립트가 실행됨");
}
</script>
</body>
</html>
1-4. 자바스크립트의 변수
- 변수의 선언
- var 변수명;
- var 변수명 = 값;
- var 변수명1, 변수명2, 변수명3;
- var 변수명1=값1, 변수명2=값2, 변수명3=값3;
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 변수</title>
</head>
<body>
<h1>자바스크립트의 변수</h1>
<script type="text/javascript">
// 1. 변수만 선언
var num0;
// 2. 변수를 선언하고, 초기화
var num1 = 20;
// 3. 한번에 여러 개의 변수 선언
var num2, num3, num4;
// 4. 한번에 여러 개의 변수를 선언하고, 초기화
var str1 = '김유신', str2 = '강감찬', num5 = 100;
// 5. 한번에 여러 개의 변수를 선언하고, 같은 값으로 초기화
var num6 = num7 = num8 = 200;
console.log("num0", num0);
console.log("num1", num1);
console.log("num2", num2);
console.log("num3", num3);
console.log("num4", num4);
console.log("str1", str1);
console.log("str2", str2);
console.log("num5", num5);
console.log("num6", num6);
console.log("num7", num7);
console.log("num8", num8);
</script>
</body>
</html>
1-5. 자바스크립트의 데이터타입
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 데이터타입</title>
</head>
<body>
<h1>자바스크립트의 데이터타입</h1>
<dl>
<dt>undefined</dt><dd>변수를 초기화하지 않거나 변수에 undefined값을 대입하면 해당 변수의 데이터타입은 undefined 타입이 된다. </dd>
<dt>null</dt><dd>변수에 null을 대입하면, 해당 변수의 데이터타입은 Object 타입이 된다. </dd>
<dt>Boolean</dt><dd>변수에 true/false값을 대입하면, 해당 변수의 데이터타입은 Boolean 타입이 된다. </dd>
<dt>String</dt><dd>변수에 문자열을 대입하면, 해당 변수의 데이터타입은 String 타입이 된다. </dd>
<dt>Number</dt><dd>변수에 정수, 실수를 대입하면, 해당 변수의 데이터타입은 Number 타입이 된다. </dd>
<dt>Object</dt><dd>변수에 null, 배열, 객체 등을 대입하면, 해당 변수의 데이터타입은 Object 타입이 된다. </dd>
</dl>
<script type="text/javascript">
// undefined 타입
var a; // a의 데이터타입은 undefined. a의 값은 undefined
// Boolean 타입
var b = true;
var c = false;
// String 타입
var d = '홑따옴표도 되고';
var e = "쌍따옴표도 됨";
// Number 타입 - java의 double 타입과 같은 타입
var f = -100;
var g = 0;
var h = 200;
var i = 3.14;
// undefined와 null의 차이
// undefined
// undefined는 변수가 가지는 기본 값이다.
// 변수를 선언하면 변수의 값은 undefined가 된다.
// undefined는 변수에 값을 할당하지 않아도 자동으로 할당되는 값이다.
// null
// 변수에 null을 대입할 때만 변수의 값이 null이 된다.
// * 변수의 값이 undefined다. --> 변수를 선언하고, 값을 할당하지 않았다.
// * 변수의 값이 null이다. --> 변수를 선언하고, 의도적으로 그 변수에 null값을 할당했다.
</script>
</body>
</html>
1-6. 자바스크립트 연산자
- 산술연산자 ( + - * / % )
- / : 정수/정수가 실수가 나올 수 있다.
- 대입연산자 ( = += -= *= /= %= )
- 증감연산자 ( ++ -- )
- 비교연산자 ( > >= < <= == === != !== )
- === : 값과 타입이 모두 일치해야 true
- !== : 값이 다르거나 타입이 다르면 true고 그 외는 전부 false
- 논리연산자 ( ! && || )
- 표현식1 && 표현식2 : 표현식1이 false로 판정되면 표현식2를 확인하지 않는다.
- 표현식1 || 표현식2 : 표현식1이 true로 판정되면 표현식2를 확인하지 않는다.
- 자바스크립트에서 false로 판정되는 것
: false, undefined, null, NaN, 0, ' ' - 자바스크립트에서 true로 판정되는 것
: true, 위에서 나열한 값을 제외한 모든 값은 true (10, '안녕', -100 ) - &&와 || 연산자의 좌항과 우항의 표현식이 모두 true/false 일 때만 최종 연산결과가 true/false이다.
- 자바스크립트 연산자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 연산자</title>
</head>
<body>
<h1>자바스크립트 연산자</h1>
<script type="text/javascript">
// 산술연산자
// + - * / %
console.log(3 + 4);
console.log(3 - 4);
console.log(3*4);
console.log(3/4); // 정수/정수가 실수값이 나올 수 있다.
console.log(3%4);
// 대입연산자
// = += -= *= /= %=
// 증감연산자
// ++ --
// 비교연산자
// > >= < <= == === != !==
// === : 값과 타입이 모두 일치해야 true
// !== : 값이 다르거나 타입이 다르면 true고 그 외는 전부 false
console.log("=== 연산자");
console.log(5 == '5'); // true
console.log(5 == 5); // true
console.log(5 === '5'); // false
console.log(5 === 5); // true
console.log("!== 연산자");
console.log(5 != '5'); // fasle
console.log(5 != 5); // false
console.log(5 !== '5'); // true
console.log(5 !== 5); // false
// 논리연산자
// ! && ||
// 표현식1 && 표현식2 : 표현식1이 false로 판정되면 표현식2를 확인하지 않는다.
// 표현식1 || 표현식2 : 표현식1이 true로 판정되면 표현식2를 확인하지 않는다.
// * 자바스크립트에서 false로 판정되는 것
// false, undefined, null, NaN, 0, ''
// * 자바스크립트에서 true로 판정되는 것
// true, 위에서 나열한 값을 제외한 모든 값은 true (10, '안녕', -100 )
// * &&와 || 연산자의 좌항과 우항의 표현식이 모두 true/false 일 때만 최종 연산결과가 true/false이다.
console.log("논리 연산자");
var a = 10 > 100 && 10 > 5; // 좌항과 우항의 표현식이 모두 true/false 결과
console.log("a", a); // false
var b = null && 10 > 5; // 좌항이 null (null은 false로 판정되는 값이므로 최종값이 null)
console.log("b", b); // null
var c = '1000' && 10 > 5;
console.log("c", c); // true
var d = '1000' || '1'; // '1000'은 true로 판정되는 값이므로 최종값이 '1000' ( 그 값 자체가 true/false를 나타냄 )
console.log("d", d); // '1000'
</script>
</body>
</html>
1-7. 자바스크립트의 if문
- document
- 브라우저 내장 객체
- HTML 문서를 표현한 Document 객체가 저장되어 있다.
- 주요 메소드
- getElementById(아이디)
: 지정된 아이디에 해당하는 태그를 표현하는 Element 객체를 반환한다. - getElementsByTagName(태그명)
: 지정된 태그명에 해당하는 모든 엘리먼트 객체를 포함하고 있는 HTMLCollection 객체를 반환한다.
HTMLCollection 객체는 배열과 비슷한 객체다. - querySelector(선택자)
: 지정된 선택자에 해당하는 첫번째 엘리먼트 객체를 반환한다. - querySelectorAll(선택자)
: 지정된 선택자에 해당하는 모든 엘리먼트 객체를 포함하고 있는 HTMLCollection 객체를 반환한다.
- getElementById(아이디)
- Element
- 태그를 표현하는 객체
- 태그명, 태그의 속성, 태그의 텍스트 콘텐츠, 태그의 프로퍼티 값을 포함하고 있다.
- 자바스크립트 if문
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 if문</title>
</head>
<body>
<h1>자바스크립트의 if문</h1>
<h3>시험 성적</h3>
<form>
<div>
<label>국어점수</label> : <input type="number" name="kor"/>
</div>
<div>
<label>영어점수</label> : <input type="number" name="eng"/>
</div>
<div>
<label>수학점수</label> : <input type="number" name="math"/>
</div>
<button type="button" onclick="checkScore();">판정하기</button>
</form>
<script type="text/javascript">
function checkScore() {
var korScore = document.querySelector("[name=kor]").value;
var engScore = document.querySelector("[name=eng]").value;
var mathScore = document.querySelector("[name=math]").value;
var totalScore = parseInt(korScore) + parseInt(engScore) + parseInt(mathScore);
var avgScore = totalScore/3;
console.log("총점", totalScore);
console.log("평균", avgScore);
if(avgScore >= 60){
console.log("합격입니다.");
} else {
console.log("불합격입니다.");
}
}
</script>
</body>
</html>
* 자바스크립트 if문 연습
- name 속성을 가지는 엘리먼트
: form 태그와 모든 폼 입력요소는 name 속성을 가진다.
- <form name="loginForm">
- <input type="text" name="email" />
- <select name="skill">
- <textarea name="content">
- value 속성을 가지는 엘리먼트
: 모든 input 태그, option 태그는 value 속성을 가진다.
(단, <input type="file">은 value속성으로 값을 설정할 수 없다. )
- <input type="text" name="age" value"40" />
- <option value="seoul">서울</option>
- checed 속성을 가지는 엘리먼트
- <input type="radio" name="gender" value="female" checked="checked"> 여성
- <input type="checkbox" name="skill" value="java" checked="checked"> 자바
- selected 속성을 가지는 엘리먼트
- <option value="seoul" selected="selected"> 서울</option>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 if문 연습</title>
</head>
<body>
<h1>자바스크립트 if문 연습</h1>
<form id="form-login" method="post" action="login.jsp">
<div>
<label>아이디</label> : <input type="text" name="id" />
</div>
<div>
<label>비밀번호</label> : <input type="password" name="pwd" />
</div>
<button type="button" onclick="checkInputField();">로그인</button>
</form>
<script type="text/javascript">
// 1. 로그인 버튼을 클릭했을 때 checkInputField() 함수가 실행되어야 한다.
function checkInputField(){
// 2. name속성이 id인 엘리먼트의 입력값을 조회해서 변수 userId에 대입한다.
// 3. name속성이 pwd인 엘리먼트의 입력값을 조회해서 변수 userPassword에 대입한다.
var userId = document.querySelector("[name=id]").value;
var userPassword = document.querySelector("[name=pwd]").value;
// 4. 변수 userId에 대입된 값이 ''와 일치하면 "아이디는 필수입력값입니다." 경고창을 표시한다.
// 5. 변수 userPassword에 대입된 값이 ''와 일치하면 "비밀번호는 필수입력값입니다." 경고창을 표시한다.
// * 경고창은 alert("메세지") 스크립트 내장함수를 사용한다.
if(userId === ''){
alert("아이디는 필수입력값입니다.");
return;
}
if(userPassword === ''){
alert("비밀번호는 필수입력값입니다.");
return;
}
// 6. 아이디, 비밀번호를 모두 입력했으면 form 입력값을 서버로 제출한다.
// (form에 아이디를 설정하고, 아이디가 form-login인 폼 엘리먼트를 찾아서 formElement 변수에 대입)
var formElement = document.querySelector("#form-login");
// formElement에 대입된 Element객체는 form태그를 표현하는 엘리먼트 객채
// form태그를 표현하는 엘리먼트 객체를 폼 입력값을 서버로 제출하는 submit() 메소드를 가지고 있다.
formElement.submit();
}
</script>
</body>
</html>
1-8. 자바스크립트의 for문
innerHTML : 태그 안에 다른 태그를 넣을 때
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 반복문</title>
</head>
<body>
<h1>자바스크립트의 for문</h1>
<div id="box-buttons"></div>
<script type="text/javascript">
// 1 ~ 10까지 출력하기
for(var num = 1; num <= 10; num++){
console.log("num ->", num);
}
// id속성값이 box-buttons인 엘리먼트를 조회하고, 그 엘리먼트에 버튼을 5개 추가하기
// 1. button 태그를 담는 변수를 선언하고, 초기화한다.
var buttons = "";
// 2. for문을 사용해서 <button>버튼</button> 태그를 buttons에 계속 추가한다.
for(var num = 1; num <= 5; num++){
buttons += "<button>버튼</button>";
}
// 3. 아이디 속성값이 box-buttons인 엘리먼트를 찾아서 divElement에 대입한다.
var divElement = document.querySelector("#box-buttons");
// 4. divElement의 innerHTML 프로퍼티에 buttons 변수에 저장된 버튼태그들을 추가한다.
divElement.innerHTML = buttons;
</script>
</body>
</html>
1-9 . 자바스크립트의 반복문
- 잘 안씀
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 반복문</title>
</head>
<body>
<h1>반복문 안에서 break와 continue 사용하기</h1>
<script type="text/javascript">
// break문을 사용해서 반복문 탈출하기
for(var num=1; num<=10; num++){
if(num == 5){
break; // 반복문 탈출
}
console.log("num->", num);
}
// continue문을 사용해서 반복문의 처음으로 돌아가기
for(var num=1; num<=10; num++){
if(num == 5){
continue; // 남아있는 수행문을 수행하지 않고, 증감식으로 이동해서 다음번 반복을 이어간다.
}
console.log("num->", num);
}
</script>
</body>
</html>
- break
- continue
1-10. 자바스크립트의 배열
- 자바스크립트의 배열객체
- 가변길이 배열이다. (배열 길이를 지정할 필요 없음)
- 다양한 메소드를 지원한다.
- 배열객체의 생성
- 1. 빈 배열객체 생성
var x = [ ]; - 2. 값이 포함되어 있는 배열객체 생성
var x = [값, 값, 값, 값];
- 1. 빈 배열객체 생성
- 배열객체에 값 추가하기
- 1. 배열객체를 생성하고, 배열객체에 값 추가하기
var x = [ ];
x[0] = 10;
x[4] = 100;
// x = [10, undefined, undefined, undefined,100] - 2. 배열객체를 생성하고, 배열객체에 값 추가하기
var x = [ ];
x.push(10); // ArrayList의 add(E e) 메소드와 동일하다.
x.push(20);
x.push(30);
// x = [10, 20, 30] - 3. 배열객체를 생성하고, 배열객체에 값 추가하기
var x = [100, 200, 300];
x.unshift(10); // 배열의 맨 앞에 추가한다.
x.unshift(20);
x.unshift(30);
// x = [30, 20, 10, 100, 200, 300]
- 1. 배열객체를 생성하고, 배열객체에 값 추가하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 배열</title>
</head>
<body>
<h1>자바스크립트의 배열</h1>
<script type="text/javascript">
// 빈 배열객체를 생성해서 items1에 대입한다.
var items1 = [];
items1[0] = 100;
items1[1] = 200;
items1[2] = 300;
console.log("첫번째 배열", items1);
var items2 = [];
items2.push(100);
items2.push(200);
items2.push(300);
console.log("두번째 배열", items2);
var items3 = [];
items3.unshift(100);
items3.unshift(200);
items3.unshift(300);
console.log("세번째 배열", items3);
var items4 = [];
items4[0] = 100;
items4[5] = 200;
console.log("네번째 배열", items4);
</script>
</body>
</html>
