1. [과제] Css013_RWD_practice1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 1. 기본스타일 mobile */
* {
box-sizing: border-box;
}
[class*="col-"]{
float: left;
width: 100%;
height: 100px;
border: 5px solid white;
}
.A {display: none;}
.E, .F, .G {width: 33.33%;}
.D {height: 200px;}
/* 2. 600px 이상 : tablet */
@media screen and (min-width: 700px) {
/* Tablet*/
.A {display: block;}
.C {height: 200px;}
.col-m-1 {width: 8.33%; } /* 1칸 짜리 폭 */
.col-m-2 {width: 16.66%; } /* 2칸 짜리 폭 */
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
/* 3. 768px 이상 : PC */
@media screen and (min-width: 768px) {
.C {height: 300px;}
.D {height: 300px;}
.col-1 {width: 8.33%; } /* 1칸 짜리 폭 */
.col-2 {width: 16.66%; } /* 2칸 짜리 폭 */
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
<body>
<div id="header">
<div class="A col-4 col-m-2" style="background-color: gray;"></div>
<div class="B col-8 col-m-10" style="background-color: purple;"></div>
</div>
<div class="clear"></div>
<div class="C col-2 col-m-2" style="background-color: cyan;"></div>
<div class="D col-6 col-m-8" style="background-color: HoneyDew;"></div>
<div class="clear"></div>
<div class="E col-4 col-m-2" style="background-color: Wheat"></div>
<div class="F col-4 col-m-2" style="background-color: Teal"></div>
<div class="G col-4 col-m-3" style="background-color: SandyBrown"></div>
<div class="clear"></div>
<div class="H col-12 col-m-9" style="background-color: LemonChiffon"></div>
</body>
</html>
** 과제를 하면서 배운점
: 직접 생각하고 만들어보면서 반응형 웹 기술(RWD) 대해 확실하게 알게 되었다.
2. HTML에서 JS 적용하기
1) inline 방식
2) internal 방식
3) external 방식
3. Js001_Intro.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Intro</title>
</head>
<!--
JavaScript 는 client(브라우저) 에서 구동되는 스크립트 프로그램.
주로 HTML 페이지 내의 element 들의 동적인 변화, 폼 데이터 검증, 브라우저 제어, AJAX 등에 사용.
HTML elmenet 에 접근 할때는 id, class, name, tag명 을 통해서 접근가능.
JavaScript 를 HTML 에 적용하는 방법 3가지
1. inline 방식 : 태그의 onxxx 속성(이벤트) 값으로 JavaScript 코드 동작.
2. internal 방식 : <script></script> 태그 안에 JavaScript 코드 기입
3. external 방식 : <script src="myScript.js"> 와 같이 src 속성에 외부 JavaScript 파일 명시
JavaScript 의 주요동작 3가지
1. HTML element 의 content 를 바꾸는 동작
2. HTML element 의 attribute 를 바꾸는 동작
3. HTML element 의 style 을 바꾸는 동작
웹개발자에게 있어서
HTML + CSS + JavaScript 는 'MUST LEARN' 이다.
** JavaScript:
웹 브라우저에서 가동하는 웹페이지 가동용 기본 스크립트 언어로서 개발됨
jQuery 와 같이 산업표준화된 라이브러리 풍부.
JSON 데이터 교환 포맷
다양한 프레임워크 : vue.js, react.js, angular.js 등...
그밖에도 다양한 영역에서 사용됨
TypeScript : 컴파일 가능한 JS
서버사이드 개발 : Node.JS
하이브리드앱 : IONIC
크로스플랫폼앱 : React Native
데스크탑 어플리케이션 : electron
게임 : PhaserJS, ImpactJS
3D,VR,: three.JS
AR : Aframe, AR.js
머신러닝 : tensorflow.js
Unity3D 같은 게임개발 엔진에서도 채택
** 최초 1995년 개발 (설계자 '브렌던 아이크')
이후 자바스크립트 는 ECMAScript(ES) 표준이 됨 (1997, ECMA262)
모질라 재단, ECMA 인터네셔널, 에서 만들고 관리함.
** 주요 버전
ES5(2009) : 대부분의 브라우저에 지원, (웹페이지 작성 기준?)
ES6(2015) : 가장 많은 변화, (IE 지원안함)
** JavaScript 는 Java 와 관련이 없다!!! 오리너구리는 오리가 아니다.
(둘다 C언어 구문을 계승한 부분은 닮았다..)
** 자바스크립트 구동 환경 = 엔진 + 런타임
엔진 과 런타임에 따라 ECMAScript 규격 지원하는 내용 범위,
제공 객체, 함수들이 다른 부분 존재
** V8 엔진 : 구글에서 개발한 크롬 브라우저용 JS엔진,
Node.js 의 엔진으로도 사용됨.
** JavaScript 상표권은 현재 오라클.. 그러나, 모질라 재단과 라이선스 하에 운용됨.
** DOM( Document Object Model ) 을 구동시키기 위한 목적으로 개발되었기 때문에
DOM 구조를 갖고 있는 HTML과 찰떡궁합.
-->
<!-- JS의 internal 방식 -->
<script>
// 자바스크립트 세상..!!
function myFunction() {
document.getElementById('demo3').innerHTML = "클릭했습니당~"
}
</script>
<!-- JS의 external 방식 -->
<script src="JS/myScript.js"></script>
<body>
<h2>1. JavaScript 는 Content 를 바꿀수 있다</h3>
<!-- document -> DOM -->
<button type="button" onclick="document.getElementById('demo1').innerHTML = Date()">클릭하면 날짜와 시간이 보여집니다.</button>
<p id="demo1">클릭하면 Content 가 바뀝니다</p>
<p id="demo3" onclick="myFunction()">클릭해보세요</p>
<!-- external 방식으로 JS 적용해보기..!! -->
<h2>2. JavaScript 는 attribute 를 바꿀수 있다</h3>
<img id="myImage" src="https://www.w3schools.com/html/pic_bulboff.gif" width="100" height="180">
<div>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</div>
<h2>3. JavaScript 는 Style 를 바꿀수 있다</h3>
<!-- onmouseover 마우스 커서를 올렸을때, onmouseout 마우스 커서를 내렸을때 -->
<p id="demo2"
onmouseover="document.getElementById('demo2').style.color = 'red'"
onmouseout="this.style.color = 'black'"
>
마우스를 올렸다, 내렸다 해보세요.
</p>
</body>
</html>
** myScript.js
/**
* JS의 external 방식..!!
*/
function light(sw) {
var pic;
if(sw == 0) {
pic = "https://www.w3schools.com/html/pic_bulboff.gif";
} else {
pic = "https://www.w3schools.com/html/pic_bulbon.gif";
}
// img의 src의 내용을 변경
document.getElementById('myImage').src = pic;
}
4. Js002_Output.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Output</title>
</head>
<!--
JavaScript 가 출력하는 4가지 방법.
1. HTML element 에 출력 ← innerHTML 사용
2. HTML 에 직접 출력 ← document.write() 사용
3. alert 팝업 ← window.alert() 사용
4. 브라우저 console 에 출력, ← console.log().
-->
<body>
<script>
// 먼저 id='demo' 인 것 아래에서 실행한뒤에 위로 올려놓고 보여주자
// 스크립트 안쪽에 있는 코드는 로딩이 완료되면 실행이 된다..!!
document.getElementById('demo').innerHTML = '로딩 중에 실행될까용???';
// 에러가 나면 개발자 도구에서만 확인할 수 있음,
// 그 이외에는 에러가 나도 알 수가 없음,
// 조용히 에러난 시점부터 그 아래까지 실행이 되지 않음
function showRandom() {
document.getElementById('demo').innerHTML = Math.floor(Math.random() * 10) + 1;
}
</script>
<h2 onclick="showRandom()">클릭하세요</h2>
<p id="demo">1~10까지 난수</p>
<script>
document.getElementById('demo').innerHTML = '로딩 중에 실행된다';
</script>
<br>
<script>
// 아래 코드는 '페이지가 로딩'될때 실행
var text = "로딩 중에 document.write()";
document.write("<h2>" + text + "</h2>");
</script>
<!-- document.write()는 로딩 완료 후에 호출하면
기존 로딩된 HTML 문서 다 지우고 write 함.
-->
<p onclick="document.write('헉s 다 지워진다...')">그러나 이것을 클릭하면..</p>
<br>
<h2 onclick="alert('짜잔~')">클릭하면 팝업이..</h2>
<br>
<h2 onclick="showNumber(5)">클릭하고 console에서 확인해보자</h2>
<script>
function showNumber(num) {
var i, j;
for(i = 0; i < num; i++) {
j = i * 2;
console.log("i =", i, ", j =", j);
}
}
/*
JavaScript 는 브라우저에서 실행 (Client side script) 이기 때문에
브라우저에서 디버깅도 가능하다.
크롬의 경우 Sources 탭에서 Scources 선택하고, breakpoint 추가한 뒤에 실행 가능.
클라이언트 쪽(브라우저)에서 정상적인 동작이 안된다면
1. 우선 '소스' 확인. 제대로
2. console 창에서 에러 (예외) 발생여부 확인하기
3. source 창에서 디버깅
*/
</script>
</body>
</html>
[추가] 구글 개발자 모드에서 Console 창 확인하면 JS의 에러를 확인할 수 있음
5. Js004_Practice.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블 생성 연습</title>
<!--
랜덤으로 생성된 row (행) 과 col(열) 값에 따라 <table> 을 생성해보세요
document.write() 사용 + for 문등 제어문 사용
페이지 새로고침 할때마다 row, col 이 random 으로 생성
row 와 col 은 각각 1 ~ 10 사이 랜덤 정수값
-->
<style>
table, td, th{
border: 1px solid black;
border-collapse: collapse;
}
table{
width: 100%;
}
</style>
</head>
<body>
<script>
var n = Math.floor(Math.random() * 10) + 1;
document.write("n:" + n + "<br>");
document.write("<ol>\n");
for(i = 0; i < n; i++) {
document.write("<li>안녕하세요 " + (i + 1) + "번째 입니다.");
}
document.write("</ol>\n");
</script>
<script>
// row 와 col 은 각각 1 ~ 10 사이 랜덤 정수값
// 행(row) 과 열(column)
var row = Math.floor(Math.random() * 10) + 1;
var col = Math.floor(Math.random() * 10) + 1;
document.write("row:" + row + " col:" + col + "<br>");
document.write("<table>\n");
for(i = 0; i < row; i++) {
document.write("<tr>\n");
for(j = 0; j < col; j++) {
document.write("<td>\n");
document.write((i + 1) + "행" + (j + 1) + "열");
document.write("</td>\n");
}
document.write("</tr>\n");
}
document.write("</table>\n");
</script>
</body>
</html>
6. Js005_Practice.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON 데이터 다루기</title>
<style>
table, td, th{
border: 1px solid black;
border-collapse: collapse;
}
table{
width: 100%;
}
</style>
</head>
<script src="JS/Js006_Data.js"></script>
<body>
<script>
//document.write(typeof x + "<br>");
//document.write("x.items.length = " + x.items.length + "<br>");
document.write();
document.write(x.items.length + " 개의 매물이 있습니다!<br><br>");
// 60 개의 행과 4개의 열
document.write("<table>\n");
document.write("<tr>\n");
document.write("<th>No</th><th>타이틀</th><th>월세</th><th>보증금</th>\n");
document.write("</tr>\n");
for(i = 0; i < 60; i++) {
document.write("<tr>\n");
document.write("<td>" + (i + 1) + "</td>");
document.write("<td>" + x.items[i].item.title + "</td>");
document.write("<td>" + x.items[i].item.rent + "</td>");
document.write("<td>" + x.items[i].item.deposit + "</td>");
document.write("</tr>\n");
}
document.write("</table>\n");
</script>
</body>
</html>
[추가] Js006_Data.js로 배달통 JSON(JavaScript Object Notation)이 제공됬음(이 파일이 없으면 실행 불가)
소스가 긴 관계로 블로그에는 올리지 않음
7. Js006_Form1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 데이터</title>
<style>
div#btnBox {
position: fixed;
right: 0px; top: 0px;
margin: 4px;
border: 1px solid orange;
width: 180px;
}
div#btnBox * { margin: 2px; }
</style>
</head>
<!--
JavaScript 로
다양한 form element 들의 '값을 가져 올수도' 있어야 한며,
반대로 '값을 입력해야 할수도' 있다.
JavaScript 는 form element 들을 접근할수 있는
다양한 방법들을 제공한다. (특히 name 값 활용!)
-->
<!--
※ 각 form element별 동작하는 것으로 JS 와 HTML 코드 작성하면서 확인 하기
-->
<script>
function showData() {
var result = "입력결과<br>";
// form 객체 가져오기 (name 사용)
// 아래의 두가지 방법 모두 가능
//var frm = document.forms["myform1"];
var frm = document.forms.myform1;
// 1. 일반적인 inport 값 .value 값
var username = frm["username"].value;
// 한줄로 아래의 코드로 간단하게도 가능함, 3가지 방법
// 1.
//username = document.forms["myform1"]["username"].value;
// 2.
//username = document.forms.myform1.username.value;
// 3.
//username = document["forms"]["myform1"]["username"].value;
result += "이름: " + username + "<br>";
// 2. checkbox 의 값 .checked 로 판단
var hobby = "";
if(frm["drive"].checked) {
hobby += frm["drive"].value + ", "
}
if(frm["music"].checked) {
hobby += frm["music"].value + ", "
}
if(frm["sports"].checked) {
hobby += frm["sports"].value + ", "
}
result += "취미: " + hobby + "<br>";
// 3. checkbox 동일 name 이 여럿인 경우
var skill = "";
//frm["skill"] <- skill 이라는 name 을 갖고 있는
// element 들의 배열(?)임. (즉, 모두 모두 리턴된다구~)
for(i = 0; i < frm["skill"].length; i++) {
if(frm["skill"][i].checked) {
skill += frm["skill"][i].value + ", ";
}
}
result += "보유기술: " + skill + "<br>";
// 4. radio : 동일 name 구성, 위 3번과 방법 유사
var gender = "";
for(i = 0; i < frm["gender"].length; i++) {
if(frm["gender"][i].checked) {
gender += frm["gender"][i].value;
break; // 어차피 하나일테니깐...!!
// 왜? radio 이니깐...!!
}
}
result += "성별: " + gender + "<br>";
// 결론 : name 이 동일한건 배열처럼 다뤄주기!!
// 5. <select> : 단일 .value 사용
result += "좋아하는 차1: " + frm["cars"].value + "<br>";
// 6. <select> : multiple 3. 과 유사 .selected 사용
// 하나만 선택해도 배열로 들어오고 여러개를 선택해도 배열로 들어오기 때문에 3번과 유사함
var cars2 = "";
for(i = 0; i < frm["cars2"].length; i++) {
if(frm["cars2"][i].selected) {
cars2 += frm["cars2"][i].value + ", ";
}
}
result += "좋아하는 차2: " + cars2 + "<br>";
// 7.<textarea> : .value 혹은 .innerHtml 로 값을 가져올 수 있다.
// .value: 현재 사용자가 입력한 값
// .innerHtml : 'HTML' content 값
//result += "메모 : " + frm["message"].innerHTML + "<br>";
result += "메모 : " + frm["message"].value + "<br>";
document.getElementById("result").innerHTML = result;
}
function setData() {
var frm = document.forms["myform1"];
// input
frm["username"].value = "홍길동";
// checkbox
frm["drive"].checked = false;
frm["music"].checked = true;
frm["sports"].checked = true;
// checkbox (동일 name)
frm["skill"][0].checked = false;
frm["skill"][1].checked = true;
frm["skill"][2].checked = true;
// radio button
frm["gender"][0].checked = true;
//frm["gender"].value = 'male' // 이런 방법은 불가, 반드시 checked로 해야 함
// select (단일), 밑에 두가지 방법 모두 가능
//frm["cars"].value = 'fiat'; // 해당 value 값으로 바꾸면 된다.
frm["cars"][2].selected = true; // 혹은 selected 값을 true 로 세팅하면 된다.
// select (multiple)
frm["cars2"][0].selected = true;
frm["cars2"][1].selected = false;
frm["cars2"][2].selected = true;
frm["cars2"][3].selected = false;
// textarea : .value, innerHtml 둘 다 가능
//frm["message"].value = '안녕하세요';
frm["message"].innerHTML = "이제 쉬는 시간이당~~~"
}
</script>
<body>
<div id="btnBox">
<button type="button" onclick="showData();">입력값 보여주기</button>
<br>
<button type="button" onclick="setData();">입력값 세팅</button>
<br>
<p id="result"></p>
</div>
<form name="myform1">
이름:<br>
<input type="text" name="username"><br>
<br>
취미:<br>
<input type="checkbox" name="drive" value="driving">드라이빙<br>
<input type="checkbox" name="music" value="music">음악<br>
<input type="checkbox" name="sports" value="sports">운동<br>
<br>
보유기술:<br>
<input type="checkbox" name="skill" value="자바">JAVA<br>
<input type="checkbox" name="skill" value="닷넷">.Net<br>
<input type="checkbox" name="skill" value="애플">iOS<br>
<br>
성별:<br>
<input type="radio" name="gender" value="male">남<br>
<input type="radio" name="gender" value="female">여<br>
<input type="radio" name="gender" value="animal">케모노<br>
<br>
좋아하는 차1:<br>
<select name="cars">
<option value="volvo">볼보</option>
<option value="saab">사브</option>
<option value="fiat" >피아트</option>
<option value="audi" selected>아우디</option>
</select>
<br><br>
좋아하는 차2:<br>
<select name="cars2" size="4" multiple>
<option value="volvo">볼보</option>
<option value="saab" selected>사브</option>
<option value="fiat" >피아트</option>
<option value="audi" selected>아우디</option>
</select>
<br><br>
메모:<br>
<textarea name="message" style="width:200px; height:100px">The cat was playing in the garden.</textarea>
<br>
<!-- <input type="submit" value="제출"> -->
</form>
<!--
<form name="myform2">
별명:<br>
<input type="text" name="nickname">
<br><br>
<input type="submit" value="제출">
</form>
-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
8. Js006_Form2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 검증</title>
<style>
.important {
color:red;
}
</style>
</head>
<!--
form validation (폼 검증)
form 데이터를 서버에 제출(submit) 하기 전에
클라이언트에서 1차적으로 값의 유효성을 체크해주는게 좋다.
이때 JavaScript 를 사용하여 검증합니다.
ex)
- '필수 항목'들은 입력이 되었는지?
- 숫자만 입력하는 경우 숫자로만 입력되었는지?
- n글자 이상이 입력되었는지?
- checkbox 의 경우 n개 이상이 체크 되었는지?
- 특정포맷 (이메일, url 등..) 으로 입력되었는지?
<form> 의 onsubmit 이벤트 처리 코드
: true 를 return 하면 정상적으로 submit 됨
: false 를 return 하면 submit 안됨
focus() 함수 : 해당 form element 에 입력상태(focus) 지정 → onfocus 이벤트 발동
blur() 함수 : 해당 form element 에 입력상태 해제 → onblur 이벤트 발동
submit() 함수 : 해당 form 을 submit 함
required attribute 사용 :
-->
<!--
** alert(), confirm(), prompt() 함수
https://www.w3schools.com/jsref/met_win_alert.asp
https://www.w3schools.com/jsref/met_win_confirm.asp
https://www.w3schools.com/jsref/met_win_prompt.asp
alert() 리턴값 없음
confirm() true/false 리턴, submit 하기전에 물어보기 위해 사용 가능
prompt() 입력한 string 리턴
-->
<body>
<h3>form validation</h3>
<hr>
<h4>form1</h4>
<form name="form1" action="https://www.w3schools.com/action_page.php" method="get">
First name:
<input type="text" name="firstname"> <span class="important">*</span> <!-- 기본값 value 가 없다. -->
<br><br>
Last name:
<input type="text" name="lastname">
<br><br>
<input type="submit" value="제출">
</form>
<hr> <!-- ----------------------------------------------------------------- -->
<!--
form 에 onsubmit 사용
onsubmit 에 JS 코드를 수행하고 return 받은 값이 true 이면 submit
-->
<script>
function chkSubmit(){
var frm = document.forms['form2'];
if(frm['firstname'].value.trim() == ""){
alert("First Name 은 필수 입니다");
//return false; // onsubmit 에 false 를 리턴하면 submit 안된다
frm['firstname'].focus() // return false 하기 전에 커서 위치 시키면 좋다
return false;
}
return true; // onsubmit 에 true를 리턴하면 submit 진행된다
}
</script>
<h4>form2 - 필수 항목</h4>
<form name="form2" action="https://www.w3schools.com/action_page.php" method="get"
onsubmit="return chkSubmit();" > <!-- 반드시 onsubmit 에 return 해야 한다 -->
First name:
<input type="text" name="firstname"> <span class="important">*</span> <!-- 기본값 value 가 없다. -->
<br><br>
Last name:
<input type="text" name="lastname">
<br><br>
<input type="submit" value="제출">
</form>
<hr> <!-- ----------------------------------------------------------------- -->
<h4>form3 - 숫자검증</h4>
<script>
function checkSubmit3() {
var frm = document.forms.form3;
var age = frm.age.value.trim();
// isNaN() : number 타입이면 false, number 아니면 true
if(isNaN(age) || age < 1 || age > 130) {
alert(age + " 는 유효한 값이 아닙니다.\n1~30 사이 숫자 입력 바랍니다.");
frm.age.focus();
return false; // submit 안함...!!
}
return true; // submin 함..!!
}
</script>
<form name="form3" action="https://www.w3schools.com/action_page.php"
method="get" onsubmit="return checkSubmit3()"> <!-- TODO : onsubmit -->
나이 (1~130): <input type="text" name="age">
<br><br>
<input type="submit" value="제출">
</form>
<hr> <!-- ----------------------------------------------------------------- -->
<h4>form4 - required</h4>
<!-- 브라우저가 자동적으로 필수 요소 체크하여 submit 여부 조정 -->
<form name="form4" action="https://www.w3schools.com/action_page.php" method="get">
First name:
<input type="text" name="firstname" required> <span class="important">*</span>
<br><br>
Last name:
<input type="text" name="lastname">
<br><br>
<input type="submit" value="제출">
</form>
<hr> <!-- ----------------------------------------------------------------- -->
<h4>form5 - submit()</h4>
<!-- 일반 JS 코드에서도 특정 form을 submit 시킬수 있다. -->
<script>
function chkSubmit5() {
var frm = document.forms['form5'];
if(frm['firstname'].value.trim == "") {
alert("Fist Name 은 필수 입니다.")
frm['firstname'].focus();
return;
}
//return true; // <- submit 되지 않는다.
//frm.submit(); // form 객체를 submit 수행
// confirm() 함수 : 확인 / 최소 선택에 따라 true/false 리턴
var a = confirm('제출하시겠습니까?')
if(a) {
frm.submit();
}
}
</script>
<form name="form5" action="https://www.w3schools.com/action_page.php" method="get">
First name:
<input type="text" name="firstname" required> <span class="important">*</span>
<br><br>
Last name:
<input type="text" name="lastname">
<br><br>
</form>
<!-- form 바깥에 있다!, 심지어 일반 버튼이다...!!
<button>제출</button>
-->
<!-- 위와 같이 버튼을 만들지 말고 아래와 같이 버튼 만들기! -->
<button onclick="chkSubmit5()">제출</button>
<hr> <!-- ----------------------------------------------------------------- -->
<h4>form6 - regexp</h4>
<!-- 복잡한 서식 (url, email 등은) 정규표현식(regular expression) 사용하여 체크 -->
<!-- JS 에서는 정규표현식 리터럴 //임, /정규표현식 작성한거 여기다 기재/ -->
<script>
// url 패턴에 대한 정규표현식
var urlPat = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
// email 패턴에 대한 정규표현식
var emailPat = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
function chkSubmit6() {
var frm = document.forms.form6;
var url = frm.url.value.trim();
var email = frm.email.value.trim();
document.getElementById("urlwarn").innerHTML = "";
document.getElementById("emailwarn").innerHTML = "";
// 정규표현식 객체의 test() : 패턴매칭 여부
if(!urlPat.test(url)) {
document.getElementById("urlwarn").innerHTML = "유효하지 않은 url";
frm.url.focus;
return false;
}
if(!emailPat.test(email)){
document.getElementById("emailwarn").innerHTML = "잘못된 email 입니다";
frm.email.focus();
return false;
}
return true;
}
</script>
<form name="form6" action="https://www.w3schools.com/action_page.php" method="get"
onsubmit="return chkSubmit6()">
url:
<input type="text" name="url"><span id="urlwarn" class="important"></span>
<br><br>
email:
<input type="text" name="email"><span id="emailwarn" class="important"></span>
<br><br>
<input type="submit" value="제출">
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
9. Js006_Form3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 검증2</title>
<!-- 여러개의 체크 박스의 경우, 그중에 몇개이상 체크해야 하는 경우라면? -->
<style>
table, th, td { border: 1px solid black; border-collapse: collapse;}
th, td {padding: 5px;}
</style>
</head>
<body>
<form name="frm" action="https://www.w3schools.com/action_page.php">
<table>
<tr>
<th>check</th>
<th>id</th>
<th>이름</th>
</tr>
<tr>
<td><input type="checkbox" name="id" value="43"></td>
<td>43</td>
<td>최승섭</td>
</tr>
<tr>
<td><input type="checkbox" name="id" value="27"></td>
<td>27</td>
<td>강성후</td>
</tr>
<tr>
<td><input type="checkbox" name="id" value="8"></td>
<td>8</td>
<td>하혜선</td>
</tr>
<tr>
<td><input type="checkbox" name="id" value="11"></td>
<td>11</td>
<td>이재민</td>
</tr>
</table>
<br>
<!-- onclick -->
<!-- 주의 : button을 form 안에 사용시 type 명시 안하면
자동적으로 submit 버튼으로 동작함. -->
<button type="button" onclick="chkDelete()">삭제하기</button><br>
</form>
<script>
function chkDelete() {
// name = id 인 element(들) 을 리턴
var e = document.getElementsByName('id');
var cnt = 0;
// 내 코드
for(i = 0; i < e.length; i++) {
if(e[i].checked) {
cnt++;
}
}
if(cnt == 0) {
alert('하나도 체크가 되지 않았습니다.\n1개 이상 체크하시기 바랍니다.')
} else {
document.frm.submit();
}
/*
// 강사님 코드
for(i = 0; i < e.length; i++) {
if(e[i].checked) {
// 하나라도 체크되면 submit
document.frms['frm'].submit();
return;
}
}
// for 문을 벗어났다는건 하나도 선택이 안되었다는 의미
alert('삭제할 항목을 체크해주세요')
*/
}
</script>
</body>
</html>
10. JsPractice006.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<script>
function chkSubmit() {
/*
var frm = document.forms.agreement;
var cnt = 0;
// 내코드
for(i = 0; i < frm["agree"].length; i++) {
if(frm["agree"][i].checked) {
cnt++;
}
}
if(cnt == 3) {
document.agreement.submit();
} else {
alert('모두 동의해주셔야 합니다\n' + cnt + ' 개만 동의가 되었습니다')
}
*/
// 강사님 코드
// 체크 박스 개수 파악하는 거 세 개의 방법 모두 가능
var agree = document.forms['agreement']['agree'];
//agree = document.getElementsByName("agree");
//agree = document.querySelectorAll("input[type='checkbox']");
//alert(agree.length);
for(i = 0; i < agree.length; i++) {
if(!agree[i].checked) {
alert('모든 항목에 동의하셔야 합니다.');
agree[i].focus();
return;
}
}
// submit... action 없는 경우일때 팝업창으로 대체
alert('성공적으로 가입했습니다..!!')
}
</script>
<body>
<h3>회원가입 동의 약관</h3>
<h3>아래 체크박스를 다 클릭했을때만 제출이 되도록 하고</h3>
<h3>하나라도 체크 안되면 체크 안되었다는 팝업을 띄웁니다.</h3>
<form name="agreement" action="https://www.w3schools.com/action_page.php">
<p>약관내용1 <br /> 어쩌구 저쩌구</p>
<input type="checkbox" name="agree" /> 약관에 동의하셔야 합니다 (필수)
<p>약관내용2 <br /> 주저리 주저리</p>
<input type="checkbox" name="agree"/> 약관에 동의하셔야 합니다 (필수)
<p>약관내용3<br /> 왈가 왈부</p>
<input type="checkbox" name="agree"/> 약관에 동의하셔야 합니다 (필수)
<br>
<input type="button" value="제출" onclick="chkSubmit()">
</form>
<h3 id="result"></h3>
</body>
</html>
11. Js006_Form4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" name='myname' value="홍길동">
<input type="submit">
</form>
<hr>
<form action="">
<input type="text" name='myname' value="활빈당">
<input type="button" value="제출" onclick=" /* 검증코드 코드 안에서 submit() */">
</form>
</body>
</html>
12. 14_Object.js
// object
console.log('object');
// object는 {}로 감싼다..!!
// property : value 쌍
x = {firstName : "John", lastName : "Doe"};
console.log(x, typeof x)
// value 접근하는 방법
console.log(x['firstName'], x.firstName, typeof x.firstName);
//console.log(x[firstName]); // 에러 : firstName is not defined
// object 는 length 값 없다.
console.log(x.length);
// for ~ in
for(key in x) { // property 가 추출됨 (string)
console.log(`x[${key}] = ${x[key]}`);
}
// value 는 어떠한 타입이라도 가능!
x = {
// 이런식으로 코드 작성하는건 좋은 습관...!!
name : "kim"
, age : 34
, height : 172.3
, score : [94, 35, 79]
, sayHello : function() {
console.log('안냐하세용~')
}
, getScore : function(n) {
// this 빼면 에러!
// 동일 object내 property 접근할때 this 사용!
return this.score[n];
}
, getTotal : function() {
var sum = 0;
for(i = 0; i < this.score.length; i++) {
sum += this.score[i];
}
return sum
}
, getAvg : function() {
var avg = this.getTotal() / this.score.length;
return avg.toFixed(2); // 소수점 2자리까지
}
};
console.log(x['name'], typeof x['name']);
console.log(x['age'], typeof x['age']);
console.log(x.height, typeof x.height);
console.log(x.score, x.score.length);
x.sayHello();
console.log(x.getScore(0));
console.log(x.getTotal());
console.log(x.getAvg());
console.log(x['getAvg']()); // 이런 식으로도 접근 가능...!!
console.log()
// p : v 추가 / 삭제 / 변경
x = {firstName : "John", lastName : "Doe"};
console.log(x);
x.firstName = "Make" // 변경
console.log(x);
x['age'] = 45; // 없던 property 추가
console.log(x);
delete x.firstName;
console.log(x);
// 없는 property 접근하려 하면
console.log(x.firstName); // undefined 출력
// ------------------------------------------
//console.log(a); // 에러 : ReferenceError: a is not defined
var b;
console.log(b);
// a는 에러나오고 b는 undefined 나오는 이유는
// a는 존재 자체가 없는 것이고 b는 존재하는데 초기값 설정을 해주지 않았기 때문
b='김재현';
console.log(b);
// 위의 내용의 못 다룬 부분은 html 배우면서 상세하게 다룰 예정
// '함수'가 'object 생성자'로 사용 가능...!!
function Person(firstName, lastName, age) {
// 함수 안에서 느닷없이 this...?
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
//console.log(this);
}
Person('aaa', 'bbb', 30); // 호출
// JS는 클래스가 없다는 점을 명심하기!
var p1 = new Person('aaa', 'bbb', 30); // 생성자로 동작
console.log(p1);
var p2 = new Person('김', '재현' , 25);
console.log(p2);
13. Js007_Object1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Object</title>
</head>
<body>
<h2>JavaScript object 추가</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
x = 10; // window 객체의 property x
document.write('x = ' + x + "<br>");
delete x;
//document.write('x = ' + x); // 에러 : Uncaught ReferenceError: x is not defined
x = 200;
function myFunc() {
var a = 20; // var 사용하면 지역변수
b = 30; // vat 사용하지 않으면 window 객체의 property
document.write('a = ' + a + "<br>");
document.write('b = ' + b + "<br>");
document.write('x = ' + x + "<br>");
}
myFunc();
// 함수 바깥에서 함수 안에서 선언된 변수 a 사용 불가
//document.write('a = ' + a + "<br>"); // 에러 : Uncaught ReferenceError: a is not defined
document.write('b = ' + b + "<br>");
document.write('window.b = ' + window.b + "<br>")
document.write('window.x = ' + window.x + "<br>")
//window.alert('hello');
//window.confirm('확인?');
var p1 = {
x : 1000
, showInfo : function() {
var x = 4000;
// 위의 var x를 선언하면 4000 1000 200 출력하나
// 위의 var x를 주석 처리하면 200 1000 200 출력
// 즉, window.x 값이 출력됨..!!
document.write(x + " " + this.x + " " + window.x + "<br>");
}
}
p1.showInfo(); // 3가지 x 값 출력
/* this 의 정체!
- JS code 를 소유한(own) object다!
- '함수 안'에서의 this 는 함수를 소유한(own) object다
- 'object 안'에서의 this 는 object 그 자신이다.
- '생성자(constructor) 안'에서의 this 는 그 자체가 값을 갖고 있진 않다.
단지, 생성된 새로운 object에서 치환된다.
즉 new 로 생성된 새로운 object 가 바로 this 가 된다.
- this 는 변수가 아니다!! 키워드다!! 따라서 this 의 값을 수정할수 없다
*/
</script>
</body>
</html>
14. 자바스크립트의 동작원리: 엔진, 런타임, 호출 스택 참고할만한 홈페이지
: https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/
'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글
| 2020.05.12 (0) | 2020.05.12 |
|---|---|
| 2020.05.11 (0) | 2020.05.11 |
| 2020.05.07 (0) | 2020.05.07 |
| 2020.05.06 (0) | 2020.05.06 |
| [2020.04.21] 구글 스토어 앱 출시 완료! (0) | 2020.05.02 |