스터디 4주차 🐬
-JS 강의 섹션4 (HTML을 위한 자바스크립트)까지 듣기
JavaScript
Section 04. HTML을 위한 JS
1. HTML element control
<button type="button" onclick="doSave();">Save</button><script>
function doSave(){
console.log("doSave");
var oText1=document.getElementById("text1"); //하나만 가져옴
//id는 유일한 하나의 값이니까 element 하나만 가져옴
console.log(oText1.value);
var textValue=oText1.value;
var oText2=document.querySelector("#text1");
console.log(oText2);
var oCheckbox=document.getElementsByName("chk_interest");
console.log(oCheckbox);
//Name은 같은거가 여러개일수도 있으니까 elements 인거임
//방법 1
for(var i=0;i<oCheckbox.length;i++){
if(oCheckbox[i].checked){
console.log(oCheckbox[i].value);
}
}
//방법 2
var oCheckbox2=document.querySelectorAll("[name=chk_interest]:checked");
//selectorAll 은 배열형태로 리턴
console.log(oCheckbox2);
//selector는 하나의 객체만 리턴
var oRadio=document.querySelector("[name=radio_email_yn]:checked");
console.log(oRadio);
var oSelect=document.getElementById("select1");
console.log(oSelect.value);
var oSelect=document.getElementById("select1");
console.log(document.getElementById("div1").innerText);
console.log(document.getElementsByTagName("div"));
}</script>2. HTML event control
<input type="text" id="text1" onfocus="doFocus();" onblur="doBlur(this);">
<br>
<select id="select1" onchange="doChange();">
<option value="KO">korea</option>
<option value="UK">UK</option>
<option value="US">US</option>
</select>
<input type="text" id="text2" onkeydown="doKeydown(event);">
<button type="button" onclick="doSearch()">조회</button>
<br>
<button onclick="doSave();">click</button><script>
function doFocus(){
console.log("doFocus");
}
function doBlur(obj){
if(obj.value==""){
alert("필수값이니까 반드시 입력 ㄱ");
}
console.log(obj.value);
}
function doChange(){
var selectedValue=document.getElementById("select1").value;
console.log(selectedValue);
}
function doSearch(){
//enter키 누르면 조회 일어나지요
console.log("조회를 시작합니다");
}
function doKeydown(event){
if(event.keyCode==13){
doSearch(); //엔터를 입력하면 doSearch를 시작해라
}
console.log(event);
}
function doSave(){
console.log("doSave");
}
</script>3. HTML style control
<head>
<title>Document</title>
<style>
.border-red{
border:4px dashed red;
}
.border-green{
border:4px solid green;
}
.border-default{
border-width:1px;
border-color:blue;
border-style:solid;
}
</style>
</head> <input type="text" id="text1" onblur="changeBorder();">
<br>radio(email):
<br>
<label>
<input type="radio" name="radio_email_yn" value="y" onclick="showEmail();">agree
</label>
<label>
<input type="radio" name="radio_emil_yn" value="N" onclick="hideEmail();" checked> deny
<div id="divEmail" style="display:none;">email<input type="text" id="email"></div>
</label>
<br> Select:
<br>
<select id="select1" onchange="doChange(this);">
<option value="Ko">Korea</option>
<option value="US">US</option>
<option value="UK">UK</option>
</select>
<select id="select2" style="display:none;">
<option value="Ko">seoul</option>
<option value="US">busan</option>
<option value="UK">jeju</option>
</select>
<button type="button" onclick="doSave();">save</button>4. data table
<input type="text" id="searchTxt" onkeydown="checkEnter(event);">
<button type="button" onclick="doSearch();">조회</button>
<table id="tb">
<thead>
<tr>
<th onclick="doSort('name');">name</th>
<th onclick="doSort('email');">email</th>
<th onclick="doSort('company');">company</th>
<th onclick="doSort('address');">address</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var currentData = [];
function doSort(key) {
currentData.sort(function(a,b){
return a[key]>b[key]? 1: a[key]<b[key]?-1 : 0;
});
renderTable(currentData);
}
function checkEnter(event) {
if(event.keyCode == 13) {
doSearch();
}
}
function doSearch() {
var searchText = document.getElementById("searchTxt").value;
if(searchText == "") {
currentData = userList;
renderTable(userList);
}else {
// /pattern/gi
var regExp = new RegExp(searchText,"i");
var data = userList.filter(item => {
if(regExp.test(item.name)) {
return true;
}else if(regExp.test(item.email)) {
return true;
}else if(regExp.test(item.company)) {
return true;
}else if(regExp.test(item.address)) {
return true;
}else {
return false;
}
});
currentData = data;
renderTable(data);
}
}
function renderTable(data) {
var h = [];
data.forEach(item => {
h.push(`<tr>`);
h.push(`<td>${item.name}</td>`);
h.push(`<td>${item.email}</td>`);
h.push(`<td>${item.company}</td>`);
h.push(`<td>${item.address}</td>`);
h.push(`</tr>`);
});
document.querySelector("#tb>tbody").innerHTML = h.join("");
}
</script>
목표는 감자탈출