스포츠마케터의 초보 개발자 도전기
HTML / CSS / JS/ jQuery study 07 본문
ex001_js_gugudan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바 스크립트로 구구단 출력하기</title>
<script>
for(let i = 2; i <= 9; i++){
document.write("<h3>"+i+"</h3>");
for(let j = 1; j <= 9; j++){
document.write(i + "*" + j + "=" + i*j +"<br>");
}
}
</script>
</head>
<body>
</body>
</html>
ex002_js_array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 배열</title>
<script>
//자바스크립트에 배열은 index수의 제한이 없다.
let arr = new Array();
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
arr[4] = 50;
for(let i = 0; i <arr.length; i++){
document.write(arr[i] + " ");
}
document.write("<hr>");
//배열의 선언 + 생성 + 초기화
let testArr = [11, 12, 13, 14, 15];
for(let i = 0; i < testArr.length; i++){
document.write(testArr[i] + " ");
}
document.write("<hr>");
//배열 index 값의 자료형이 모두 동일하지 않아도 문제가 없다.
let testArr1 = ['A', 12, true, 14, 15];
for(let i = 0; i < testArr1.length; i++){
document.write(testArr1[i] + " ");
}
document.write("<hr>");
//자바스크립트의 2차원 배열 - 1
let myArr = new Array();
myArr[0] = new Array();
myArr[1] = new Array();
myArr[0][0] = 10;
myArr[0][1] = "test";
myArr[1][0] = 100;
myArr[1][1] = 200;
myArr[1][2] = 300;
for(let i = 0; i < myArr.length; i++){
for(let j = 0; j < myArr[i].length; j++){
document.write(myArr[i][j] + " ");
}
document.write("<br>");
}
document.write("<hr>");
let myArr2 = new Array();
let first = [10, 20];
let second = [30, 40, 50];
myArr2[0] = first;
myArr2[1] = second;
for(let i = 0; i < myArr2.length; i++){
for(let j = 0; j < myArr2[i].length; j++){
document.write(myArr2[i][j] + " ");
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
ex003_function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 함수</title>
<script>
//자바스크립트의 함수(메서드)
function greet(){
alert("버튼1 누름");
}
//함수 밖에서 요소를 검색하는 것은 불가능
//let a = document.getElementById("myInput");
function greet2(s){
//alert(s);
//body에 존재하는 특정 요소를 Id로 검색
let a = document.getElementById("myInput");
a.value = s;
//let btn = document.getElementById("btn2"); -> tag
//alert(btn.value);
let btn = document.getElementById("btn2").value; // -> 값
alert(btn);
}
function m_set(){
let myP = document.getElementById("myP");
myP.style.color = "red";
}
function send(){
let txt = document.getElementById("txt").value;
let res = document.getElementById("res");
//무결성(유효성) 체크
if(txt.trim() == ''){
alert("값을 입력하세요.");
return;
}
res.value = txt;
let div = document.getElementById("div");
//div.innerHTML = txt;
div.textContent = txt; //textContent는 br 인식 안됨
}
</script>
</head>
<body>
<input type="button" value="버튼1" onclick="greet();">
<input id="btn2" type="button" value="버튼2" onclick="greet2('하이');"><br>
<input id="myInput" size="5" value="기본값">
<p id="myP">안녕하세요</p>
<input type="button" value="버튼3" onclick="m_set();">
<hr>
<input id="txt" size="5" placeholder="input data">
<input type="button" value="확인" onclick="send();"><br>
<input id="res">
<div id="div"></div>
</body>
</html>
ex004_gallery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
a{text-decoration: none;}
</style>
<script>
let num = 1;
let path ="image/img";
function next(){
num++;
if(num > 7){
num = 1;
}
document.getElementById("gallery").src = path + num + ".jpg";
}
function prev(){
num--;
if(num < 1){
num = 7;
}
document.getElementById("gallery").src = path + num + ".jpg";
}
//1초간격으로 자동으로 next()할 수 있다.
setInterval("next()", 1000);
</script>
</head>
<body>
<div id="galleryWrap">
<a href="#" onclick="prev();">
<img src="image/left_btn.png" alt="이전버튼">
</a>
<img src="image/img1.jpg" id="gallery" width="300" height="200">
<a href="#" onclick="next();">
<img src="image/right_btn.png" alt="다음버튼">
</a>
</div>
</body>
</html>
ex005_input_test
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function submit(){
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
if(name.trim() == '' || age.trim( ) == ''){
alert("값을 입력하세요");
return;
}
alert("이름 : " + name + "\n나이 : " + age);
}
</script>
</head>
<body>
<input id="name" placeholder="이름"><br>
<input id="age" placeholder="나이"><br>
<input type="button" value="제출" onclick="submit();">
</body>
</html>
ex006_gugudan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function cal(){
let dan = document.getElementById("dan").value;
//정규식
//특정한 규칙을 가진 문자열의 집합
//정수를 판단하는 정규식
let regex = /^[0-9]*$/;
if(!regex.test(dan) || dan.trim() == ''){ //입력받은 dan이 정수구조가 아닌 경우
alert("정수만 입력하세요");
return;
}
let str="";
for(let i = 1; i <= 9; i++){
str = str + dan + "*" + i + "=" + (dan * i) + "<br>";
}
let gugu = document.getElementById("gugu");
gugu.innerHTML = str;
}
//삼항연산자, 플래그
let b_show = true;
function hide(){
b_show = !b_show;
let btn_show = document.getElementById("bt_show");
btn_show.value = b_show ? "숨기기" : "보이기";
document.getElementById("gugu").style.display = b_show ? "block" : "none";
}
//let click = 1;
//function hide(){
// click++;
//
// let gugu = document.getElementById("gugu");
// if(click % 2 == 0){
// gugu.style.display="none";
// }else{
// gugu.style.display="block";
// }
//}
</script>
<style>
hr{width:300px; margin:10px 0;}
#gugu{width:280px; height:280px; padding:10px; background-color: black; color:white;}
</style>
</head>
<body>
단 : <input id="dan">
<input type="button" value="계산하기" onclick="cal();">
<input type="button" value="숨기기" id="bt_show" onclick="hide();">
<hr>
<div id="gugu"></div>
</body>
</html>
ex007_calculator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table{border-collapse: collapse;}
th{width: 50px;}
td{width: 100px;}
.in input{width:30px; height:30px; margin:5px; padding: 5px; text-align: center; vertical-align: middle;}
#num1{border-style: none; outline: none;}
#num2{border-style: none; outline: none;}
#res{border-style: none; outline: none;}
#con{margin: 5px;}
</style>
<script>
function operator(symbol){
let num1 = document.getElementById("num1").value.trim();
let num2 = document.getElementById("num2").value.trim();
//정수만 입력 가능한지 유효성 체크
let regex = /^[0-9]*$/;
if(!regex.test(num1) || num1 == '' || !regex.test(num2) || num2 == ''){
alert("정수만 입력하세요");
return;
}
let res = document.getElementById("res");
res.value = symbol;
switch(symbol){
case '+': res.value = Number(num1) + Number(num2);
break;
case '-': res.value = num1 - num2;
break;
case '*': res.value = num1 * num2;
break;
case '/': res.value = num1 / num2;
res.value = (num2 == 0) ? 0 : (num1/num2).toFixed(2);
break;
}
prevResult = res.value;
}
function continueCalculation() {
document.getElementById("num1").value = prevResult;
document.getElementById("num2").value = "";
document.getElementById("res").value = "";
}
</script>
</head>
<body>
<h3>기깔나는 계산기</h3>
<table border="1">
<tr>
<th>수1</th>
<td><input id="num1"></td>
</tr>
<tr>
<th>수2</th>
<td><input id="num2"></td>
</tr>
</table>
<div class="in">
<input type="button" value="+" onclick="operator('+');">
<input type="button" value="-" onclick="operator('-');">
<input type="button" value="*" onclick="operator('*');">
<input type="button" value="/" onclick="operator('/');">
</div>
<table border="1">
<tr>
<th>결과</th>
<td><input id="res" readonly="true"></td>
</tr>
</table>
<input type="button" value="계속" id ="con" onclick="continueCalculation();">
</body>
</html>
'develop > WEB' 카테고리의 다른 글
| HTML / CSS / JS/ jQuery study 09 (0) | 2024.05.22 |
|---|---|
| HTML / CSS / JS/ jQuery study 08 (0) | 2024.05.22 |
| HTML / CSS / JS/ jQuery study 05 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 04 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 03 (0) | 2024.05.17 |
'develop/WEB' Related Articles
more
