Java 웹 개발
21.11.10 - 웹 개발 입문 63일차
개발이란
2021. 11. 11. 01:18
자바스크립트
내부글자제어
목표 : #user-input에 작성된 값을 각각 innerHTML, textContent 방식으로 출력
정의 : 내부 글자라 함은 태그 사이에 작성된 내용을 의미한다. (ex) <div>내용</div>
주의 : 단, textarea는 입력태그로 분류되므로 입력값을 value로 읽는다
= innerHTML은 HTML 요소를 해석해서 내용을 적용한다.
= textContent는 있는 그대로의 글자를 내용으로 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 글자 제어</title>
<script>
function copyValue(){ // id 는 # 클래스는.
var textarea = document.querySelector("#user-input");
var output1 = document.querySelector(".output1");
var output2 = document.querySelector(".output2");
output1.innerHTML = textarea.value;
output2.textContent = textarea.value;
}
</script>
</head>
<body>
<textarea id="user-input" oninput="copyValue();"></textarea>
<hr>
<div class="output1"></div>
<hr>
<div class="output2"></div>
</body>
</html>
독립형 스크립트
(Q) 독립형 스크립트 제작을 위한 실행타이밍 확인
화면을 만들 때는 HTML + CSS + JS를 사용하여 만들어야 한다.
서로 다른 언어를 섞어서 만들 때 실행하는 순서는 어떻게 될까?
(ex) HTML먼저 or CSS먼저 or JS먼저 or 작성한순서대로 or ...
브라우저마다 이 코드로 실행순서를 알아보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트의 실행 시점</title>
</head>
<body>
<script>
window.alert("before");
</script>
<h1>HTML 코드</h1>
<script>
window.alert("after");
</script>
</body>
</html>- IE / Edge / Chrome / Whale / Opera : 자바스크립트 실행 후 HTML 실행
- Firefox : 작성한 순서대로
결론 :
= 브라우저마다 실행순서가 모두 다르다
= 페이지가 로딩되자마자 태그를 선택해서 무언가 처리를 하고 싶다면 실행시점을 맞춰야 한다.
= 화면이 모두 로딩된 다음 자바스크립트 코드가 실행되도록 "지연" 처리를 해야 한다.
= 화면이 모두 로딩된 경우 실행되는 이벤트 종류는 "load" 이벤트이다.
독립형 스크립트 구성법
= onload에 직접 함수를 설정하면 기존 함수들이 모두 제거된다(덮어쓰기).
= 이벤트를 덮어쓰기하는 것이 아니라 추가할 수 있는 방식으로 변경
= addEventListener() 명령 사용
= window.addEventListener("이벤트종류" ,함수);
= 기존 이벤트를 해치지 않고 추가로 설정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형(standalong) 스크립트 구성법</title>
<script>
window.addEventListener("load" , function(){
var h1 = document.querySelector(".title");
h1.style.color = "blue";
});
</script>
</head>
<body>
<h1 class="title">Hello Javascript!</h1>
</body>
</html>
독립형 자바스크립트 클릭 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형 자바스크립트 클릭 처리</title>
<script>
//아래 코드 덕에 화면이 모두 로딩된 다음에 자바스크립트를 실행할 수 있게 된다.
window.addEventListener("load", function(){
//여기에 작성한 코드는 HTML이 모두 로딩된 다음에 실행이 된다.
var button = document.querySelector("button");
//button을 클릭하면 "잘했어" 라는 알림창이 출력되도록 연결 설정
button.addEventListener("click", function(){
window.alert("잘했어!");
});
});
</script>
</head>
<body>
<button>누르세요!</button>
</body>
</html>
ex) 독립형 클립 이벤트 1개일때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형 클릭이벤트 문제</title>
<script>
window.addEventListener("load", function(){
//이벤트를 설정할 경우 처리코드에는 this라는 키워드 사용이 가능하다.
//= this는 "주인공"의 의미를 가진다.
document.querySelector("h1").addEventListener("click", function(){
this.style.color = "red";
});
});
</script>
</head>
<body>
<h1>Hello Javascript!</h1>
</body>
</html>
ex) 독립형 클립 이벤트 여러개일때
-> 반복문을 이용하여 코드를 간소화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형 클릭이벤트 문제</title>
<script>
window.addEventListener("load", function(){
var list = document.querySelectorAll("h1");
for(var i=0; i < list.length; i++){
list[i].addEventListener("click", function (){
//list[i].style.color = "red";//error
this.style.color = "red";//ok
});
}
});
</script>
</head>
<body>
<h1>Hello Javascript!</h1>
<h1>Hello Javascript!</h1>
<h1>Hello Javascript!</h1>
<h1>Hello Javascript!</h1>
<h1>Hello Javascript!</h1>
</body>
</html>
ex) 독립형으로 크기 버튼 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형으로 크기 버튼 만들기</title>
<script>
window.addEventListener("load", function(){
//작게 버튼에 대한 이벤트 처리
document.querySelector("#btn-small").addEventListener("click", function(){
//this == #btn-small 버튼
var image = document.querySelector("#sample");
image.width = 100;
image.height = 100;
});
//보통 버튼에 대한 이벤트 처리
document.querySelector("#btn-normal").addEventListener("click", function(){
//this == #btn-normal 버튼
var image = document.querySelector("#sample");
image.width = 200;
image.height = 200;
});
//크게 버튼에 대한 이벤트 처리
document.querySelector("#btn-large").addEventListener("click", function(){
//this == #btn-large 버튼
var image = document.querySelector("#sample");
image.width = 300;
image.height = 300;
});
});
</script>
</head>
<body>
<button id="btn-small">작게</button>
<button id="btn-normal">보통</button>
<button id="btn-large">크게</button>
<hr>
<img src="./image/loading.gif" width="200" height="200" id="sample">
</body>
</html>
ex) 독립형으로 +계산기 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형으로 +계산기 만들기</title>
<script>
window.addEventListener("load", function(){
//해야할일 : = 버튼을 누르면 계산이 이루어지게 한다.
document.querySelector(".calculate-btn").addEventListener("click", function(){
//this == #calculate-btn
var a = document.querySelector("#a");
var b = document.querySelector("#b");
var c = document.querySelector("#c");
c.value = parseFloat(a.value) + parseFloat(b.value);
});
});
</script>
</head>
<body>
<input type="number" id="a">
+
<input type="number" id="b">
<button class="calculate-btn">=</button>
<input type="number" id="c">
</body>
</html>
ex) 독립형으로 정규표현식 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정규표현식</title>
<script>
window.addEventListener("load", function(){
//목표 : 닉네임 입력창 형식검사
document.querySelector("input[name=memberNick]").addEventListener("input", function(){
//this == 닉네임 입력창
var regex = /^[가-힣0-9]{2,10}$/;
var nickname = this.value;
var span = this.nextElementSibling;
if(regex.test(nickname)){//검사 성공
span.textContent = "올바른 형식의 닉네임입니다";
}
else{//검사 실패
span.textContent = "닉네임은 한글, 숫자를 이용하여 2~10자로 작성하세요";
}
});
});
</script>
</head>
<body>
<input type="text" name="memberNick">
<span></span>
</body>
</html>
ex) 독립형으로 전체 선택 만들기 (+ 전체 선택 버튼도 여러개 만들어보기 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택</title>
<style>
label {
display: block;
}
</style>
<script>
window.addEventListener("load", function(){
//응용 : 전체선택이 여러 개인 경우
var checkAllList = document.querySelectorAll(".check-all");
for(var i=0; i < checkAllList.length; i++){
checkAllList[i].addEventListener("input", function(){
//this == 체크된 .check-all
var checkboxList = document.querySelectorAll("input[type=checkbox]");
for(var k=0; k < checkboxList.length; k++){
checkboxList[k].checked = this.checked;
}
});
}
//추가 : 각자의 체크박스에 체크가 발생할 경우 전체선택 여부를 검사하여 전체선택 체크박스에 적용
var checkboxList = document.querySelectorAll("input[type=checkbox]:not(.check-all)");
for(var i=0; i < checkboxList.length; i++){
checkboxList[i].addEventListener("input", function(){
//this == 체크된 하위 체크박스
var count = 0;
for(var k=0; k < checkboxList.length; k++){
if(checkboxList[k].checked){
count++;
}
}
for(var k=0; k < checkAllList.length; k++){
checkAllList[k].checked = (count == checkboxList.length);
}
});
}
});
</script>
</head>
<body>
<label>
<input type="checkbox" class="check-all">
<span>전체 선택</span>
</label>
<hr>
<label><input type="checkbox"><span>딸기</span></label>
<label><input type="checkbox"><span>포도</span></label>
<label><input type="checkbox"><span>람부탄</span></label>
<label><input type="checkbox"><span>홍시</span></label>
<label><input type="checkbox"><span>두리안</span></label>
<label><input type="checkbox"><span>오렌지</span></label>
<label><input type="checkbox"><span>망고</span></label>
<label><input type="checkbox"><span>파인애플</span></label>
<label><input type="checkbox"><span>용과</span></label>
<label><input type="checkbox"><span>샤인머스켓</span></label>
<label><input type="checkbox"><span>스타후르츠</span></label>
<hr>
<label>
<input type="checkbox" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" class="check-all">
<span>전체 선택</span>
</label>
</body>
</html>
ex) 독립형 모듈에서의 기본 이벤트 처리
.confirm-link에 대하여 확인창을 거쳐 이동하도록 이벤트 처리
(주의)
자바스크립트에서 이벤트를 설정하게 되면 기본 이벤트 방지 코드가 달라진다.
return true 또는 return false로는 기본 이벤트 적용 여부를 결정할 수 없다.
코드 함수에 이벤트 객체를 선언하여 정보를 받아서 "중지 명령"을 사용해야 한다.
e.preventDefault(); = 기본 이벤트 중지(차단) 명령
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형 모듈에서의 기본 이벤트 처리</title>
<script>
window.addEventListener("load", function(){
//모든 .confirm-link를 클릭하면 확인창이 표시되도록 변경
var confirmLinkList = document.querySelectorAll("a.confirm-link");
for(var i=0; i < confirmLinkList.length; i++){
confirmLinkList[i].addEventListener("click", function(e){
//this == 클릭한 .confirm-link
var choice = confirm("정말 "+this.textContent+"하시겠습니까?");
if(!choice){
e.preventDefault();
}
});
}
});
</script>
</head>
<body>
<a href="https://www.google.com">구글로 이동</a>
<hr>
<a href="https://www.google.com" class="confirm-link">구글로 이동</a>
<hr>
<a href="https://www.naver.com" class="confirm-link">네이버로 이동</a>
<hr>
<a href="https://www.instagram.com" class="confirm-link">인스타그램으로 이동</a>
</body>
</html>
추가) js파일로 불러오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독립형 모듈에서의 기본 이벤트 처리</title>
<script src="./confirm-link.js"></script>
<script>
</script>
</head>
<body>
<a href="https://www.google.com">구글로 이동</a>
<hr>
<a href="https://www.google.com" class="confirm-link">구글로 이동</a>
<hr>
<a href="https://www.naver.com" class="confirm-link">네이버로 이동</a>
<hr>
<a href="https://www.instagram.com" class="confirm-link">인스타그램으로 이동</a>
</body>
</html>
(js파일)
/**
* 기능 설명 :
* - class="confirm-link"인 a 태그에 확인창을 띄우도록 처리
* - textContent를 읽어서 "정말 OOO 하시겠습니까?" 형태의 확인창을 출력
*/
window.addEventListener("load", function(){
//모든 .confirm-link를 클릭하면 확인창이 표시되도록 변경
var confirmLinkList = document.querySelectorAll("a.confirm-link");
for(var i=0; i < confirmLinkList.length; i++){
confirmLinkList[i].addEventListener("click", function(e){
//this == 클릭한 .confirm-link
var choice = confirm("정말 "+this.textContent+"하시겠습니까?");
if(!choice){
e.preventDefault();
}
});
}
});
자바스크립트로 제어할 수 있는 요소
- 태그 선택 - `var tag = document.querySelector("선택자");`
- 입력값 - `tag.value`
- 속성 - `tag.id`, `tag.type` 등
- 내부 글자 - `tag.textContent`, `tag.innerHTML`
- 스타일 - `tag.style = "color:red;";`, `tag.style.color = "red";`
- 클래스
- `tag.className = "danger";`
- `tag.classList.add("danger");`
- `tag.classList.remove("danger");`
- `tag.classList.contains("danger");`
- 이벤트
- click - 클릭했을 때
- input - 입력이 발생했을 때
- blur - 입력창에서 벗어나려 할 때
- submit - 폼이 전송되려 할 때
- load - 페이지가 로딩되었을 때
배열(Array)
자바스크립트에도 배열이 존재한다.
= 자바의 배열과 다르며, 자바 배열 + 자바 List 형태이다.
= 크기가 가변적이다.
= 각종 명령들이 제공된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열(Array)</title>
<script>
//배열 생성
var a = [1, 2, 3, 4, 5]; //int[] a = new int[]{1, 2, 3, 4, 5};
var b = new Array(10); //int[] b = new int[10];
a[5] = 10;//자바에서는 불가능한 코드이지만 자바스크립트에서는 가능하다.
console.log(a);
console.log(a.length);
console.log(b);
console.log(b.length);
//배열 출력
for(var i=0; i < a.length; i++){
console.log("-> " + a[i]);
}
for(var i=0; i < b.length; i++){
console.log("--> " + b[i]);
}
//주요 명령
var c = [];
//데이터를 마지막에 추가하는 명령
c.push(10);
c.push(20);
c.push(30);
c.push("hello");
c.push(1.5);
console.log(c);
//(주의) Javascript에서는 확장반복문이 자바와 다르다(다른 형태로 있다)
for(var i in c){
//console.log(i);
console.log(c[i]);
}
//구버전 브라우저에서 돌아가지 않는다.(특히 IE)
c.forEach(function(element){
console.log(element);
});
</script>
</head>
<body>
</body>
</html>
객체 제어
자바스크립트는 클래스(class)가 없다(ECMAScript 5 기준)
= 클래스가 없으면 객체가 없나? 그렇지 않다.
= 만드는 방식은 2가지
1. 일회성 객체
2. 생성자 함수를 이용한 객체
= 없는 변수를 어거지로 만들 수가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체 제어</title>
<script>
var a = {name:"피카츄", score:90};
var b = {name:"라이츄", score:70};
var c = {name:"파이리", score:80};
var d = {name:"아이폰13", price:2000000};
a.gender = "여자";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
</script>
</head>
<body>
</body>
</html>
자바 객체 방식
public class Student {
private String name;
private int score;
public Student(String name, int score){
this.name = name;
this.score = score;
}
//setter + getter
}
자바스크립트 객체 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체 제어</title>
<script>
function Student(name, score){
//this == 생성되는 객체 자신(주인공)
this.name = name;
this.score = score;
}
var a = new Student("피카츄", 90);
var b = new Student("라이츄", 70);
var c = new Student("파이리", 80);
console.log(a);
console.log(b);
console.log(c);
console.log(c.name);//파이리
console.log(c.score);//80
console.log(c.gender);//undefined
</script>
</head>
<body>
</body>
</html>