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