코딩 노트
Javascript01 - 시작 본문
자바스크립트는 코드가 너무 길기 때문에 제이쿼리를 사용하면서 코드 간소화와 크로스 브라우징을 한다.
이 중 하나는 다룰 수 있어야 프론트엔드라고 할 수 있다.
<script>라는 태그가 있어야 Javascript를 쓸 수 있고 head에 위치하는 게 알맞다.
브라우저마다 스크립트 실행 순서가 다르기 때문이다.
스크립트언어의 단점
유연하기 때문에 코드 오류를 찾을 수 없다.
NaN은 오류와 가까운 값이다.
ex)
console.log(v1 * d); //이상한 계산(NaN : Not A Number)
자바스크립트에서 홈페이지 알림창을 띄울 수 있는 구문
<script>
alert("Hello Javascript!");
</script>
02.variable.html
<script>
//int a = 10;
//System.out.print(a);
var a = 10;
console.log(a);
//자바스크립트에서는 변수를 var 키워드로 생성한다.
//- 자료형에 관계 없이 하나의 키워드로 사용
//- 계산 등은 프로그래밍 상식에 따라 처리
var b = "hello";
console.log(b)
//문자열이 외따옴표도 가능
var c = 'hello';
console.log(c);
//세미콜론이 없어도 실행이 가능(비추천)
var d = 'goodbye'
console.log(d)
var v1 = 10;
var v2 = 20;
console.log(v1 + v2);
console.log(v1 / v2); //정수 실수 구분이 없음(우리가 알고 있는 현실적 계산)
console.log(v1 * d); //이상한 계산(NaN : Not A Number)
//치명적인 것이 아니면 모두 실행된다.
console.log(10 / 0); //Infinity - 무한대
console.log(7 / 0); //Infinity - 무한대
console.log(-7 / 0); //Infinity - 무한대
var e;
console.log(e); //undefined - 값이 선언되지 않았음(한 번도 쓴 적이 없음)
var f = null;
console.log(f); //null - 값이 없음(깨끗하게 청소함)
//결론
//- 자료형 구분 없다.
//- Java처럼 계산하면 된다.
//- 단, Java의 예외상황도 이상한 값으로 실행이 된다.
</script>
03.quiz.html
<script>
//[1] age에 대한 지하철 요금 계산
var age = 20;
var price;
if (age >= 65 || age < 8) {
price = 0;
}
else if (age >= 20) {
price = 1250;
}
else if (age >= 14) {
price = 720;
}
else {
price = 450;
}
console.log("나이 = " + age);
console.log("요금 = " + price);
//[2] 1부터 100까지 합계를 구하여 출력
var total = 0;
for (var i=1; i <= 100; i++){
total += i;
}
console.log("합계 = " + total);
</script>
04.function.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수(Function)</title>
<script>
//자바스크립트(EcmaScript5) 에는 클래스가 없다.
//- 자바스크립트에서는 함수로 모든 것을 처리한다.
//- 함수는 메소드와 달리 단독으로 존재 가능하다, (자바에서의 static과 비슷)
//- 자바스크립트에는 접근제한도 없다.
// static void show(int a) {
// System.out.println("Hello!");
// }
function show(a) { //자료형을 굳이 적지 않음
console.log("Hello");
console.log(a);
}
// 자바스크립트 함수는 아무렇게나 불러도 실행이 된다.
//- 매개변수에 값이 안 들어가면 undefined이다.
//- 오버로딩이 불가능하다. (만들면 아무렇게나 부를 수 있어서 필요가 없다.)
show(); // 이 상태면 a는 undefined이다.
show(100);
show('hello');
show(100,200,300); //100이 들어가고 200,300은 버려진다.
//함수의 궁극적인 목적은 화면과 연결된 기능을 구현하는 것
function message() {
alert("Hello");
}
</script>
</head>
<body>
<button onclick="message()">눌러봐!</button>
<button ondblclick="message()">두 번 눌러봐!</button>
</body>
</html>
05.event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Event</title>
<script>
//Event란?
//- 일반적이지 않은 특별한 상황
//- click, focus, input, 등 다양한 상황이 존재
//Event Handling이란?
//- 발생한 이벤트를 통제하여 원하는 작업을 실행하는 것
//- onclick, onfocus, oninput 등에 함수 호출 코드를 작성
//- 함수에서 필요한 나머지 처리를 수행하도록 구현
function changeImage() {
// console.log("실행!");
// 이미지 태그를 참조할 수 있도록 탐색(cf. CSS 선택자)
var tag = document.querySelector("#target"); //id가 #target인 선택자를 불러옴
// 이미지의 src를 다른 값으로 변경
}
function big() {
var tag = document.querySelector("#target");
target.width = 500;
tag.height = 500;
}
function small() {
var tag = document.querySelector("#target");
tag.width = 100;
tag.height = 100;
}
</script>
</head>
<body>
<button onclick="changeImage();">다른 이미지로 변경</button>
<button onclick="big();">500x500으로 변경</button>
<button onclick="small();">100x100으로 변경</button>
<hr>
</body>
</html>
06.quiz.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>
function changeBlack() {
var target = document.querySelector(".target");
target.style.color = "black"; //style 덮어 쓰기(비추천)
}
function changeBlue() {
var target = document.querySelector(".target");
target.style.color = "blue";
}
function changeRed() {
var target = document.querySelector(".target");
target.style = "color:red";
}
</script>
</head>
<body>
<h1 class ="target">Hello Javascript!</h1>
<hr>
<button onclick="changeBlack();">검정</button>
<button onclick="changeBlue();">파랑</button>
<button onclick="changeRed();">빨강</button>
</body>
</html>
자바스크립트는 기본 함수명과 충돌할 우려가 있으니 가급적 길게 이름을 작성한다.
- 예) open, close, alert, confirm, ...
(주의) 미리 태그를 선택하지 말 것
var tag = doucument.querySelector(".target");
console.log(tag);
07.quiz.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 크기 조절</title>
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<!-- 스크립트 코드 -->
<script>
//(주의) 자바스크립트 기본 함수명과 충돌할 우려가 있으니 가급적 길게 이름을 지을 것
// - 예) open, close, alert, confirm, ...
//(주의) 미리 태그를 선택하지 말 것
//var tag = document.querySelector(".target");
//console.log(tag);
function small(){
var tag = document.querySelector(".target");
tag.style.fontSize = "12px";
}
function normal(){
var tag = document.querySelector(".target");
tag.style.fontSize = "16px";
}
function big(){
var tag = document.querySelector(".target");
tag.style.fontSize = "24px";
}
</script>
</head>
<body>
<div class="container w-800">
<div class="row">
<h1>글자 크기 조절 문제</h1>
</div>
<div class="row">
<button class="btn" onclick="small();">작게</button>
<button class="btn" onclick="normal();">보통</button>
<button class="btn" onclick="big();">크게</button>
</div>
<div class="row left target">
<p>
스위스에서 오셔서 산새들이 속삭이는 산림 숲속에서 숫사슴을 샅샅이 수색해 식사하고 산 속 샘물로 세수하며 사는 삼십 삼살 샴쌍둥이 미세스 스미스씨와 미스터 심슨씨는 삼성 설립 사장의 회사 자산 상속자인 사촌의 사돈 김상속씨의 숫기있고 숭글숭글한 숫색시 삼성소속 식산업 종사자 김삼순씨를 만나서 삼성 수산물 운송수송 수색 실장에게 스위스에서 숫사슴을 샅샅이 수색했던 것을 인정받아 스위스 수산물 운송 수송 과정에서 상해 삭힌 냄새가 나는 수산물을 수색해내는 삼성 소속 수산물 운송수송 수색 사원이 되서 살신성인으로 쉴새없이 수색하다 산성수에 손이 산화되어 수술실에서 수술하게 됐는데 쉽사리 수술이 잘 안돼서 심신에 좋은 산삼을 달여 슈르릅 들이켰더니 힘이 샘솟아 다시 몸사려 수색하다 삼성 소속 식산업 종사자 김삼순씨와 셋이서 삼삼오오 삼월 삼십 삼일 세시 삼십 삼분 삼십 삼초에 쉰 세살 김식사씨네 시내 스시식당에 식사하러 가서 싱싱한 샥스핀 스시와 삼색샤시참치스시를 살사소스와 슥슥삭삭 샅샅이 비빈 것과 스위스산 소세지를 샤샤샥 싹쓸어 입속에 쑤쎠넣어 살며시 삼키고 스산한 새벽 세시 삼십 삼분 삼십 삼초에 산림 숲속으로 사라졌다.
</p>
<p>
이수지가 저수지에 갔는데 이 수지가 저수지에 간 걸까 저 수지가 저수지에 간걸까 그 수지가 저수지에 간 걸까 하며 이수지는 고민했는데 고민 끝에 이수의 마이웨이를 부르며 불쾌지수가 올라가며 저수지를 떠나 경기도 수지구의 한 학원으로 달려가더니 지수함수를 배워서 잘 사용하여 주식 수지를 맞아 "나 이수지, 바로 고단수지! 수지맞았다!"하며 행복해했다.
</p>
<p>
딸날 돌하르방 코인가를 묻는 너를 보며 난 액자 속 사진을 찢어 버렸다.너와 헤어진 후 힘들어 하는 내게 박 법학사님과 백 법학사님께서 차라리 상담담당 선생님 성 선생님을 추천해 주셨어.그렇게 찾은 러브코치 상담당담 선생님 성 선생님이 내게 말했어.자기는 참치 꽁치찜을 좋아한다고 이게 무슨 헛 소리 인가 싶어.난 청송콩찰떡이 좋다고 했지 시답잖은 농담 속에 서울 찹쌀같이 나눠저 있던 마음이 쿵더더덕 덩기더더덕 녹아 버렸어.너로 인해 고장난 내 마음에 보일러 지금부터 난 난방방법변경을 할거야.공간감각이 사라질 정도로 내 몸에서 합성
</p>
</div>
</div>
</body>
</html>
위 방법은 비추천.
07-1.quiz.html
객체지향 방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 크기 조절</title>
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<!-- 스크립트 코드 -->
<script>
//함수를 하나로 구현하여 처리
function changeFontSize(size) {
var tag = document.querySelector(".target");
tag.style.fontSize = size+"px";
}
</script>
</head>
<body>
<div class="container w-800">
<div class="row">
<h1>글자 크기 조절 문제</h1>
</div>
<div class="row">
<button class="btn" onclick="changeFontSize(12);">작게</button>
<button class="btn" onclick="changeFontSize(16);">보통</button>
<button class="btn" onclick="changeFontSize(24);">크게</button>
</div>
<div class="row left target">
<p>
스위스에서 오셔서 산새들이 속삭이는 산림 숲속에서 숫사슴을 샅샅이 수색해 식사하고 산 속 샘물로 세수하며 사는 삼십 삼살 샴쌍둥이 미세스 스미스씨와 미스터 심슨씨는 삼성 설립 사장의 회사 자산 상속자인 사촌의 사돈 김상속씨의 숫기있고 숭글숭글한 숫색시 삼성소속 식산업 종사자 김삼순씨를 만나서 삼성 수산물 운송수송 수색 실장에게 스위스에서 숫사슴을 샅샅이 수색했던 것을 인정받아 스위스 수산물 운송 수송 과정에서 상해 삭힌 냄새가 나는 수산물을 수색해내는 삼성 소속 수산물 운송수송 수색 사원이 되서 살신성인으로 쉴새없이 수색하다 산성수에 손이 산화되어 수술실에서 수술하게 됐는데 쉽사리 수술이 잘 안돼서 심신에 좋은 산삼을 달여 슈르릅 들이켰더니 힘이 샘솟아 다시 몸사려 수색하다 삼성 소속 식산업 종사자 김삼순씨와 셋이서 삼삼오오 삼월 삼십 삼일 세시 삼십 삼분 삼십 삼초에 쉰 세살 김식사씨네 시내 스시식당에 식사하러 가서 싱싱한 샥스핀 스시와 삼색샤시참치스시를 살사소스와 슥슥삭삭 샅샅이 비빈 것과 스위스산 소세지를 샤샤샥 싹쓸어 입속에 쑤쎠넣어 살며시 삼키고 스산한 새벽 세시 삼십 삼분 삼십 삼초에 산림 숲속으로 사라졌다.
</p>
<p>
이수지가 저수지에 갔는데 이 수지가 저수지에 간 걸까 저 수지가 저수지에 간걸까 그 수지가 저수지에 간 걸까 하며 이수지는 고민했는데 고민 끝에 이수의 마이웨이를 부르며 불쾌지수가 올라가며 저수지를 떠나 경기도 수지구의 한 학원으로 달려가더니 지수함수를 배워서 잘 사용하여 주식 수지를 맞아 "나 이수지, 바로 고단수지! 수지맞았다!"하며 행복해했다.
</p>
<p>
딸날 돌하르방 코인가를 묻는 너를 보며 난 액자 속 사진을 찢어 버렸다.너와 헤어진 후 힘들어 하는 내게 박 법학사님과 백 법학사님께서 차라리 상담담당 선생님 성 선생님을 추천해 주셨어.그렇게 찾은 러브코치 상담당담 선생님 성 선생님이 내게 말했어.자기는 참치 꽁치찜을 좋아한다고 이게 무슨 헛 소리 인가 싶어.난 청송콩찰떡이 좋다고 했지 시답잖은 농담 속에 서울 찹쌀같이 나눠저 있던 마음이 쿵더더덕 덩기더더덕 녹아 버렸어.너로 인해 고장난 내 마음에 보일러 지금부터 난 난방방법변경을 할거야.공간감각이 사라질 정도로 내 몸에서 합성
</p>
</div>
</div>
</body>
</html>
07-2.quiz.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 크기 조절</title>
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<!-- 스크립트 코드 -->
<script>
//함수에서 공용으로 사용할 데이터를 외부에 정의할 수 있다
//(주의) 태그 선택은 안된다(시점이 안맞음)
var size = 16;
function increase(){
if(size >= 40) return;
size++;
changeFontSize(size);
}
function decrease(){
if(size <= 8) return;
size--;
changeFontSize(size);
}
function changeFontSize(size) {
var tag = document.querySelector(".target");
tag.style.fontSize = size+"px";
var button = document.querySelector(".size");
button.textContent = size;
}
</script>
</head>
<body>
<div class="container w-800">
<div class="row">
<h1>글자 크기 조절 문제</h1>
</div>
<div class="row">
<button class="btn" onclick="decrease();">-</button>
<button class="btn size">16</button>
<button class="btn" onclick="increase();">+</button>
</div>
<div class="row left target">
<p>
스위스에서 오셔서 산새들이 속삭이는 산림 숲속에서 숫사슴을 샅샅이 수색해 식사하고 산 속 샘물로 세수하며 사는 삼십 삼살 샴쌍둥이 미세스 스미스씨와 미스터 심슨씨는 삼성 설립 사장의 회사 자산 상속자인 사촌의 사돈 김상속씨의 숫기있고 숭글숭글한 숫색시 삼성소속 식산업 종사자 김삼순씨를 만나서 삼성 수산물 운송수송 수색 실장에게 스위스에서 숫사슴을 샅샅이 수색했던 것을 인정받아 스위스 수산물 운송 수송 과정에서 상해 삭힌 냄새가 나는 수산물을 수색해내는 삼성 소속 수산물 운송수송 수색 사원이 되서 살신성인으로 쉴새없이 수색하다 산성수에 손이 산화되어 수술실에서 수술하게 됐는데 쉽사리 수술이 잘 안돼서 심신에 좋은 산삼을 달여 슈르릅 들이켰더니 힘이 샘솟아 다시 몸사려 수색하다 삼성 소속 식산업 종사자 김삼순씨와 셋이서 삼삼오오 삼월 삼십 삼일 세시 삼십 삼분 삼십 삼초에 쉰 세살 김식사씨네 시내 스시식당에 식사하러 가서 싱싱한 샥스핀 스시와 삼색샤시참치스시를 살사소스와 슥슥삭삭 샅샅이 비빈 것과 스위스산 소세지를 샤샤샥 싹쓸어 입속에 쑤쎠넣어 살며시 삼키고 스산한 새벽 세시 삼십 삼분 삼십 삼초에 산림 숲속으로 사라졌다.
</p>
<p>
이수지가 저수지에 갔는데 이 수지가 저수지에 간 걸까 저 수지가 저수지에 간걸까 그 수지가 저수지에 간 걸까 하며 이수지는 고민했는데 고민 끝에 이수의 마이웨이를 부르며 불쾌지수가 올라가며 저수지를 떠나 경기도 수지구의 한 학원으로 달려가더니 지수함수를 배워서 잘 사용하여 주식 수지를 맞아 "나 이수지, 바로 고단수지! 수지맞았다!"하며 행복해했다.
</p>
<p>
딸날 돌하르방 코인가를 묻는 너를 보며 난 액자 속 사진을 찢어 버렸다.너와 헤어진 후 힘들어 하는 내게 박 법학사님과 백 법학사님께서 차라리 상담담당 선생님 성 선생님을 추천해 주셨어.그렇게 찾은 러브코치 상담당담 선생님 성 선생님이 내게 말했어.자기는 참치 꽁치찜을 좋아한다고 이게 무슨 헛 소리 인가 싶어.난 청송콩찰떡이 좋다고 했지 시답잖은 농담 속에 서울 찹쌀같이 나눠저 있던 마음이 쿵더더덕 덩기더더덕 녹아 버렸어.너로 인해 고장난 내 마음에 보일러 지금부터 난 난방방법변경을 할거야.공간감각이 사라질 정도로 내 몸에서 합성
</p>
</div>
</div>
</body>
</html>
input에서 가능한 이벤트 종류
onkeypress
onkeydown
onkeyup
oninput
onchange
oninput과 onchange만 사용
입력창은 value, 그 외 태그는 textContent로 한다. (innerHTML 태그는 안 쓰는 걸 권장)
08.text.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 실습</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- Javascript 작성 공간 -->
<script>
//자바스크립트에서 글자를 제어하는 방법
//- 자바스크립트에서 문자열은 배열로 취급된다.
var a = "hello";
console.log(a);
console.log(a[0]); //a.charAt(0)과 동일한 표현
console.log(a.length); //자바의 a.length()과 동일한 표현
console.log(a.indexOf("e")); //자바와 동일
console.log(a.substring(1,4)); //자바와 동일
//contains는 없다.
//input 입력창의 값을 불러와서 확인
function checkA() {
var tag = document.querySelector("#a");
//console.log(tag.value);
console.log(tag.value.length);
}
//select 역시 입력창이므로 value 속성이 없지만 사용할 수 있다.
function checkB() {
var tag = document.querySelector("#b");
console.log(tag.value);
}
//textarea는 value 속성이 없음에도 입력창이므로 value를 사용할 수 있다.
function checkC() {
var tag = document.querySelector("#c");
console.log(tag.value);
// var tag2 = document.querySelector("#a");
// tag2.value = tag.value;
//#d, #e에 각각 글자 복사
//- textContent는 HTML을 해석하지 않고 일반 글자로 취급
//- innerHTML은 HTML을 해석하여 처리(매우 위험, 비추천)
var d = document.querySelector("#d");
d.textContent = tag.value;
var e = document.querySelector("#e");
e.innerHTML = tag.value;
}
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>글자 불러오기</h1>
</div>
<div class="row">
<input type="text" class="form-input w-100" id="a" oninput="checkA();">
</div>
<div class="row">
<select class="form-input w-100" id="b" oninput="checkB();">
<option>사과</option>
<option>바나나</option>
<option>딸기</option>
<option>포도</option>
</select>
</div>
<div class="row">
<textarea type="text" class="form-input w-100" rows="5" id="c" oninput="checkC();"></textarea>
</div>
<div class="row" id="d"></div>
<div class="row" id="e"></div>
</div>
</body>
</html>
09.quiz.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 수 입력 제한</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- Javascript 작성 공간 -->
<script>
//[1] .form.input의 글자 수를 읽어 .form-input-length에 출력
//[2] 글자수가 초과되는 입력이 이루어지지 않도록 구현
function checkLength() {
var textarea = document.querySelector(".form-input");
var span = document.querySelector(".form-input-length");
span.textContent = textarea.value.length; //textara의 입력 글자 수
if(textarea.value.length > 1000) {
span.style.color = "red";
}
else {
span.style.color = ""; //원래 글자색으로
}
}
</script>
</head>
<body>
<div class="container w-800">
<div class = "row">
<h1>자기소개서</h1>
</div>
<div class="row">
<h2>(Q) 입사 후 20년 뒤의 나의 모습은?</h2>
</div>
<div class="row">
<textarea type="text" class="form-input w-100" rows="10" id="c" oninput="checkLength();"></textarea>
</div>
<div class= "row right" id="d"><span class="form-input-length">0</span> / 1000</div>
<div class="row">
<button class="btn btn-positive w-100">제출하기</button>
</div>
</div>
</body>
</html>
09.quiz-1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 수 입력 제한</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- Javascript 작성 공간 -->
<script>
//[1] .form.input의 글자 수를 읽어 .form-input-length에 출력
//[2] 글자수가 초과되는 입력이 이루어지지 않도록 구현
function checkLength() {
var textarea = document.querySelector(".form-input");
//만약 1000글자가 넘어간다면....?
// -> 1000글자가 될 때까지 잘라서 덮어쓰기
// -> IME 방식의 글자들까지 고려하여 처리
if(textarea.value.length > 1000) {
var copy = textarea.value;
while(copy.length > 1000) {
copy = copy.substring(0, copy.length - 1);
}
textarea.value = copy;
}
var span = document.querySelector(".form-input-length");
span.textContent = textarea.value.length; //textara의 입력 글자 수
}
</script>
</head>
<body>
<div class="container w-800">
<div class = "row">
<h1>자기소개서</h1>
</div>
<div class="row">
<h2>(Q) 입사 후 20년 뒤의 나의 모습은?</h2>
</div>
<div class="row">
<textarea type="text" class="form-input w-100" rows="10" id="c" oninput="checkLength();"></textarea>
</div>
<div class= "row right" id="d"><span class="form-input-length">0</span> / 1000</div>
<div class="row">
<button class="btn btn-positive w-100">제출하기</button>
</div>
</div>
</body>
</html>
09.regex.html
<script>
// 자바스크립트에서 정규표현식으로 문자열 검사하기
// 정규표현식을 생성하는 방법은 두 가지가 있다.
// [1] 직접 작성해서 정규표현식 객체를 생성
// [2] 문자열을 이용하여 정규표현식 객체를 생성
// [1]
var idRegex = /^[a-z0-9]{8,20}$/;
console.log(idRegex.test("test1234")); //true / 이 값이 맞는지 안 맞는지 검사해서 논리형으로 반환
console.log(idRegex.test("test123")); //false, 글자수 미달
console.log(idRegex.test("Test1234")); //false, 형식 위반
// [2]
var nickRegexStr = "^[가-힣0-9]{2,10}$";
// console.log(nickRegexStr.test("안녕123")); //문자열에는 test라는 함수가 없음, 문자열은 검사가 불가
var nickRegex = new RegExp(nickRegexStr);
console.log(nickRegex.test("안녕123")); //true
console.log(nickRegex.test("안녕123!")); //false, 형식 위반
console.log(nickRegex.test("안")); //false, 글자수 미달
</script>
'JavaScript' 카테고리의 다른 글
| Javascript03 - 회원가입 검사 코드, 체크박스 (0) | 2023.09.04 |
|---|---|
| Javascript02 - 게시글 작성 (0) | 2023.09.01 |
| Javascript02 - 정규표현식 (0) | 2023.09.01 |
| 04 객체 (0) | 2022.11.15 |
| 02 자바스크립트 기초 문법 (0) | 2022.11.08 |
'JavaScript' Related Articles
more
