임호준 / WebPractice

Go to a project
Toggle navigation Toggle navigation pinning
임호준
c5bb7634 1 parent b5ddc0d8

0516 실습업데이트

Inline Side-by-side
Showing 14 changed files with 386 additions and 37 deletions
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("li").each(function() {
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>Alert the value of each list item</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
<!--https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hover<!DOCTYPE html>
$("img").hover(function(){
$("img").attr("width", "500");
},
function(){
$("img").attr("width", "284");
});
-->
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
$("#p2").text("1234");
alert($("#p1").attr(value));
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
<p id="p2"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>test</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("div div").hide();
$(".button1").click(function() {
$(".div2").show();
});
$(".button2").dblclick(function() {
//$("a[target=_blank]").text("12345");
$("a[target=_blank]").html("<b>12345</b>");
alert($("a[target=_blank]").attr("href"));
});
$("div div").click(function() {
$(this).hide();
});
$("#input1").focus(function() {
$(this).css("background-color", "#cccccc");
});
$("#input1").blur(function() {
$(this).css("background-color", "#ffffff");
});
});
</script>
<div class="div1">
이거 보이니
<div class="div2">
이것도 보이닝?
</div>
</div>
<a href="#" target="_self">123</a>
<a href="#" target="_blank">1234</a>
<button type="button" name="button" class="button1">showButton</button>
<button type="button" name="button" class="button2">doubleClick</button>
<br> name:
<input type="text" name="" id="input1" value="">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>test</title>
</head>
<body>
<div>
<input type="text" id="a">
<select id="op">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" id="b">
</div>
<button type="button" id="exec">계산</button>
<span>result:</span>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var a = parseFloat(Number($("#a").val()));
var b = parseFloat(Number($("#b").val()));
if (isNaN(a) == true || isNaN(b) == true) {
alert("숫자를 입력하세요");
$("span").html("result = error");
} else {
var c = $("#op option:selected").val();
if (c == "+") {
var d = a + b;
$("span").html("result ="+d);
} else if (c == "-") {
$("span").html("result ="+d);
var d = a - b;
} else if (c == "*") {
var d = a * b;
$("span").html("result ="+d);
} else if (c == "/") {
if (b == 0) {
alert("0으로 나눌수 없음");
$("span").html("result = error");
} else {
var d = a / b;
$("span").html("result ="+d);
}
}
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var a = $('tr th#1').text();
document.write(a);
$('tr').each(function() {
var customerId = $(this).find("#1").html();
if(customerId!=undefined)
alert(customerId);
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<th id="1">Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td >Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</body>
</html>
function message(){
document.write("????");
var d = new Date(300000000);
document.getElementById("demo").innerHTML = d;
var d = new Date();
document.getElementById("demo").innerHTML = d;
//location.assign("http://www.naver.com");
}
var a = "1234";
console.log(a.substr(1,a.length-1));
......
......@@ -11,22 +11,39 @@
<div id = "div1">
</div>
<div id = "div2">
</div>
<script type="text/javascript">
function call(){
// var birth = prompt("생년월일을 입력해주세요","6자리 입력");
var year;
var birth = document.getElementById("input1").value;
if(birth!=""){
if(parseInt(birth.substr(0,2))>=00&&parseInt(birth.substr(0,2))<=50){
var temp= document.getElementById("div1");
var a = birth.substr(0,2);
var b = birth.substr(2,2);
var c = birth.substr(4,2);
//temp.innerHTML = birth.length;
temp.innerHTML = "생일:19"+a+"년 "+b+"월 "+c+"일";
temp.innerHTML = "생일:20"+a+"년 "+b+"월 "+c+"일";
year = "20"+a;
}
else{
var temp= document.getElementById("div1");
var a = birth.substr(0,2);
var b = birth.substr(2,2);
var c = birth.substr(4,2);
//temp.innerHTML = birth.length;
temp.innerHTML = "생일:19"+a+"년 "+b+"월 "+c+"일";
year = "19"+a;
}
var date = new Date();
var arr = date.toString().split(" ");
var t = parseInt(arr[3])- parseInt(year);
document.getElementById("div2").innerHTML ="나이:"+ t+"살";
}
}
</script>
</body>
......
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<title>practice10</title>
</head>
<body>
<title>practice11</title>
</head>
<body>
학점:
<input type="text" name="" value="" id="input1">
<input type="button" name="" value="입력" onclick="call()">
<div id = "div1">
<div id="div1">
</div>
<script type="text/javascript">
function call(){
<script type="text/javascript">
function call() {
var score = document.getElementById("input1").value;
if (score != "") {
var temp = document.getElementById("div1");
if (score >= 90) {
temp.innerHTML = "<h1>your grade is A</h1> ";
} else if (score >= 80 && score <= 89) {
temp.innerHTML = "<h1>your grade is B</h1> ";
} else if (score >= 70 && score <= 79) {
temp.innerHTML = "<h1>your grade is C</h1> ";
} else {
temp.innerHTML = "<h1>your grade is F</h1> ";
}
}
var score = document.getElementById("input1").value;
if(score!=""){
var temp= document.getElementById("div1");
if(score>= 90){
temp.innerHTML = "<h1>your grade is A</h1> ";
}else if(score>=80 &&score<=89){
temp.innerHTML = "<h1>your grade is B</h1> ";
}else if(score>=70 &&score<=79){
temp.innerHTML = "<h1>your grade is C</h1> ";
}else{
temp.innerHTML = "<h1>your grade is F</h1> ";
}
}
}
</script>
</body>
</body>
</html>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>구구단</title>
</head>
<body onload="func()">
<div id="div1">
"dltglqkf"
</div>
<script type="text/javascript">
function func() {
var total = "";
var temp;
for (var i = 2; i <= 9; i++) {
temp = "";
for (var j = 1; j <= 9; j++) {
temp += (i + "*" + j + "=" +(i * j));
temp += "<br>";
}
total += temp;
}
document.getElementById("div1").innerHTML = total;
}
</script>
</body>
</html>
var sort = function(arr){
for(var i = 0; i < arr.length-1; i ++){
for(var j = i+1; j < arr.length; j++){
if(arr[i]>arr[j]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
};
var arr = [5,4,3,2,1,0];
console.log("before sort" + arr);
sort(arr);
console.log("after sort " + arr);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>구구단</title>
</head>
<body>
<div id="div1">
<h1>** 구구단 출력 **</h1>
</div>
<div id="div2">
단:<select class="" name="dan" onchange="selectEvent(this)">
<option value="2">2단</option>
<option value="3">3단</option>
<option value="4" selected>4단</option>
<option value="5">5단</option>
<option value="6">6단</option>
<option value="7">7단</option>
<option value="8">8단</option>
<option value="9">9단</option>
</select>
</div>
<div id="div3">
</div>
<script type="text/javascript">
function selectEvent(selectObj) {
var value = selectObj.value;
func(value);
}
function func(number) {
var total = "";
var temp= "";
for(var i = 1; i <= 9; i++){
temp+=( number + " * " + i + " = " + number*i + "<br>")
}
total +=temp;
document.getElementById("div3").innerHTML = total;
}
</script>
</body>
</html>
......@@ -14,4 +14,4 @@ var _b = 2;
console.log(_a+_b);
console.log(parseFloat("23FF2"))
console.log(parseFloat("23FF2"));
......
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").mouseenter(function(){
$(this).css("background-color", "#cccccc");
});
$("input").mouseleave(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
......@@ -29,7 +29,7 @@
function myFunction3() {
var x = document.getElementById("id2");
x.innerHTML = "<img src=../punch.gif>"; //src 뒤에 "" 가 오면 이 코드는 ""<img src = .."까지 밖에 인식하지못해 error발생함
x.innerHTML = "<img src=../punch.gif>";
}
function myFunction4(){
......