데일리로그C:
article thumbnail

1. <230105 1교시>

-적용안된다면-

innerHTML : HTML 안에 있는 내용물을 그대로 보여줄 때 사용

 

 var str = aa.innerHTML;    --> innerHTML이 우측에 있다면 "그대로 가져오기"

aa.innerHTML = sky.value;   --> innerHTML이 좌측에 있다면 "내용변경 or 대입"

 

id 는 약식으로 쓰일 수 있음(추천)
class는 document.class.이름 으로 사용됨

3. <230105 3교시>

input 태그는 .value 이용(innerHTML X)
div 태그는 innerHTML 이용

4. <230105 4교시>

this : '나' 를 의미 --> id 대신 사용 가능

true, false --> 문자열이 아닌 이미 만들어진 예약어
this --> 문자열이 아닌 이미 만들어진 예약어

onchange="변경하고하는 문장" or "해당id =들어가야하는id"

window.open( ) ;   : 팝업창 띄우기
 ㄴ> 3개 영역 가짐 
      1) 파일명
      2) 파일의 이름 : 이름 없다면 새로운 팝업창 계속 띄움
      3) 속성(CSS) : 없다면 기본크기 제공

*option 태그 이용할 때 무조건 value 값 넣기!!*

부모창 --> 자식창 열기( window.open( ) )
자식창 --> 값을 부모창에 보내기 & 보냈으면 창 닫기
               ( opener.부모창id.value = 자식창id.value )
               ( window.close( ); )

<bash />
0105_01.html <p id="f">안녕하세요.</p> <!--100%, 상하좌우 여백 있음--> <p id="s">안녕하세요.</p> <p id="t">안녕하세요.</p> <script> document.getElementById("f").style.color = "red"; s.style.color = "blue"; // 위와 동일한 의미임 s.style.backgroundColor = "yellow"; function change() { a.style.color ="green"; } function mover() { a.style.color = "red"; } function mout() { a.style.color = "black"; } </script> <h1>다음 문제</h1> <p style="color: orange" id="a">이것은 문장이다.</p> <button onclick="change()" >칼라 변경</button> <!--onclick 함수를 이용--> <button onmouseover="mover()">마우스</button> <!--마우스 올렸을 때 --> <button onmouseout="mout()">마우스</button> <!--마우스 올라왔다가 탈출할 때 -->

 

<bash />
0105_02.html <img src="../img/1.jpg" id="img01" onmouseover="ch_over()" onmouseout="ch_out()"> <script> function ch_over() { img01.src = "../img/2.jpg"; } function ch_out() { img01.src = "../img/1.jpg"; } </script> <img src="../img/1.jpg" id="img01" onmouseover="ch_over()" onmouseout="ch_out()">

 

<bash />
0105_03.html <script> function ch(num, str) { // num 이라는 매개변수 document.body.style.backgroundColor = str; // 변수명으로 지정 if(num == 1) { // over img01.src = "../img/2.jpg"; } else if(num == 2) { // out img01.src = "../img/1.jpg"; } else { location.href="0105_02.html"; } } </script> <body style="background-color: orange"> <img src="../img/1.jpg" id="img01" onmouseover="ch(1,'red')" onmouseout="ch(2,'blue')" onclick="ch(3,'')"> <!--같은 함수 사용 : 매개변수 이용--> </body>

 

<bash />
0105_04.html <script> function abc() { var str = aa.innerHTML; // innerHTML이 우측에 있다면 "그대로 가져오기" alert(str); } function abc_ch() { // innerHTML이 좌측에 있다면 "내용 변경" aa.innerHTML = "내용 변경되었다."; aa.style.color = "red"; } function aaa() { var s = sky.value; // input 안에 있는 내용 가져올 때는 .value 사용 alert(s); } function aaaa() { aa.innerHTML = sky.value; // 우측 내용을 좌측에 대입 } </script> <h3>innerHTML</h3> <hr> <p id="aa">어떤 효과를 줘 볼까나?</p> <!--이 문장을 경고창으로 띄우기--> <button onclick="abc()"> 확인</button> <button onclick="abc_ch()">내용변경확인</button> <hr> <br> <h3>.value</h3> <input id="sky" name="sky" value=""> <button onclick="aaa()">확인</button> <button onclick="aaaa()">내용변경</button> <hr> <br>

 

<bash />
0105_05.html <style> input { width: 100px; } </style> <script> function sum() { ab.value = parseInt(a.value) + parseInt(b.value); } </script> <input id="a"> + <input id="b"> = <input id="ab"><br> <button onclick="sum()">계산</button>

 

<bash />
0105_06.html <script> function xy() { var a = Number(x.value); var b = giho.value; var c = Number(y.value); //eval() 함수 사용 가능 /* if(b == "/" && c == 0) { result.innerHTML = "0으로 나눌 수 없습니다." ; } else { result.innerHTML = eval(a+b+c) ; // 수식처리해주는 함수 } */ //eval() 함수 금지 if(b=="+") { result.innerHTML = a+c ; } else if(b=="-") { result.innerHTML = a-c ; } else if(b=="*") { result.innerHTML = a*c ; } else { // 0으로 나눌 수 없음 if(b=="/" && c==0) { result.innerHTML = "0으로 나눌 수 없습니다." ; } else { result.innerHTML = a/c ; } } // 결과물 식 /* result.innerHTML = parseInt(x.value) giho.value parseInt(y.value); */ } </script> <input id="x"> <select id="giho"> <!-- 변수 전달하는게 아니므로 name 속성은 필요 X--> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input id="y"> = <div id="result">결과물 출력 영역</div> <button onclick ="xy()">계산</button>

 

<bash />
0105_07.html <script> var a = giho.value; function lb(num) { x.value = x.value + num; } function rb(num) { y.value = y.value + num; } function end() { var a = Number(x.value); var b = giho.value; var c = Number(y.value); if(b=="+") { result.innerHTML = a+c ; } else if(b=="-") { result.innerHTML = a-c ; } else if(b=="*") { result.innerHTML = a*c ; } else { if(b=="/" && c==0) { result.innerHTML = "0으로 나눌 수 없습니다."; } else { result.innerHTML = a/c ; } } } </script> <input id="x" > <select id="giho"> <!-- 변수 전달하는게 아니므로 name 속성은 필요 X--> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input id="y" > = <div id="result">결과물 출력 영역</div> <!--div는 innerHTML--> 좌측 : <button onclick ="lb(1)">1</button> <button onclick ="lb(2)">2</button> <button onclick ="lb(3)">3</button> <br> 우측 : <button onclick ="rb(1)">1</button> <button onclick ="rb(2)">2</button> <button onclick ="rb(0)">0</button> <br> <button onclick ="end()">계산</button>

 

<bash />
0105_08.html <script> function c(obj, size, color) { obj.style.color = color; obj.style.fontSize = size; } </script> <style> input { width: 170px } </style> <button onclick="c(this, '30px', 'red')">버튼1</button> <button onclick="c(this, '40px', 'blue')">버튼2</button> <button onclick="c(this, '50px', 'green')">버튼3</button> <br> <br> <!--1번째 방법(함수 이용), 2번째방법(함수 + 매개변수 이용)--> <script> function aaa() { email2.value = domain.value; // 매개변수 사용한다면 this.value } </script> 메일주소 : <input id="email1"> @ <input id="email2"> <select id="domain" onchange="aaa()"> <!--매개변수 : aaa(this.value)--> <option value="">== 직접 선택 ==</option> <option value="nate.com">nate.com</option> <option value="naver.com">naver.com</option> <option value="gmail.com">gmail.com</option> </select> <br> <!-- 3번째 방법(함수없이) --> 메일주소 : <input id="email1"> @ <input id="email2"> <select id="domain" onchange="email2.value = this.value"> <option value="">== 직접 선택 ==</option> <option value="nate.com">nate.com</option> <option value="naver.com">naver.com</option> <option value="gmail.com">gmail.com</option> </select>

 

<bash />
0105_09.html <script> function abc() { window.open("0105_10.html","a","width=400, height=400"); // 자식창 열기 } </script> <input id="x"> <span onclick="abc()"> 팝업 띄우기 </span> <!-- 부모창 -->

 

<bash />
0105_10.html <script> function bbb() { // opener.x.value = y.value; // x.value(부모창)에 y.value 값을 전달하자 opener.location.href="0105_07.html"; // 이동 window.close(); // 현재 윈도우 창을 닫자(페이지를 이동시키고 자식창을 닫기) } </script> <!--자식창에서 얻은 값을 부모창에 전달--> <input id="y"> <button onclick="bbb()">부모창에 값을 전달해보자</button>

 

<bash />
0105_11.html <script> // 부모창(값만 받으면 됨) function order() { window.open("0105_12.html","a","width=400, height=400"); // 자식창 열기 } </script> 커피명 : <input id="result1"> <br> 가격 : <input id="result2"> <br> <span onclick="order()">주문</span>

 

<bash />
0105_12.html <script> // 자식창 function end() { opener.result1.value = menu.value; // 부모창에 menu 선택한 값(커피명) 전달 opener.result2.value = price.value; // 부모창에 크기 선택한 값(가격) 전달 window.close(); // 창 종료 } </script> 커피명 : <select id ="menu"> <option value="">==선택==</option> <option value="아메리카노">아메리카노</option> <option value="카리멜마끼야또">카라멜마끼야또</option> <option value="카페모카">카페모카</option> </select> <br> <br> 컵 사이즈 : <select id="price"> <option value="">==선택==</option> <option value="3000">small</option> <option value="4000">tall</option> <option value="5000">grande</option> </select> <br> <br> <button onclick="end()">주문완료</button>

 

<bash />
0105_13.html <script> // id : 1111, pass : aaaa --> 둘중 하나라도 틀리면 실패 // 값 비교를 해서 일치한다면 로그인 성공 : 경고창 출력 // 실패한다면 로그인 실패 : 경고창 출력 /* 첫번째 방법 function login() { var x = "1111"; var y = "aaaa"; if(id.value==x && pass.value==y) { alert("로그인 성공"); } else { alert("로그인 실패"); } } */ // 두번째 방법 function login() { var a = id.value; var b = pass.value; if(a=="1111" && b=="aaaa") { alert("로그인 성공"); } else { alert("로그인 실패"); } } </script> 아이디 : <input id="id"> <br> 비밀번호 : <input id="pass" > <br> <button onclick="login()">로그인</button>

 

<bash />
0105_14.html <script> // 층의 입력을 받아 // 왼쪽 정렬 피라미드 구출을 한 후 <div> 영역에 출력 function end() { var str = ""; // 모든 태그의 문자열 var num = tr.value; // 층 값 for(i=1; i<=num; i++) { // 층 for(j=1; j<=i; j++) { //방 str += "*"; } str += "<br>"; } result.innerHTML = str; // 출력영역에 모든 문자열 대입 } </script> 몇층 : <input id="tr"> <br> <button onclick="end()">확인</button> <br> <hr> <div id="result">출력 영역</div>

 

<bash />
0105_15.html <style> td { font-size: 30px; font-weight: bold; } </style> <table width=300 height=160 border=1> <tr> <td width= 100 align=center id="a" onclick="ck(1)"></td> <td width= 100 align=center id="b" onclick="ck(2)"></td> <td width= 100 align=center id="c" onclick="ck(3)"></td> </tr> <tr><td height=70 colspan=3 align=center id="result">출력 구문 영역</td></tr> </table> <script> // 1~3 사이의 랜덤 값을 td 영역에 출력시킨다 (랜덤값 Math.random) // td 영역을 클릭 시 1~3 랜덤 값 다시 부여(onclick함수) // 세 곳 td 영역의 값이 같다면 종료 처리 function ck(num) { if(num==1) { // 개별 클릭되게 a.innerHTML = parseInt(Math.random()*3+1); } else if(num ==2) { b.innerHTML = parseInt(Math.random()*3+1); } else { c.innerHTML = parseInt(Math.random()*3+1); } var aa =a.innerHTML; var bb =b.innerHTML; var cc =c.innerHTML; if(aa == bb && bb == cc) { //출력구문 result.innerHTML = "세 수가 같다. 성공" } else { result.innerHTML = "세 수가 다르다. 실패" } } //var num = parseInt(Math.random()*3+1); </script>

 

<bash />
0105_16.html <style> button { width: 50px; height: 50px; text-align: center; font-size: 18px; } .res { width:100%; height: 48px; font-size: 18px; text-align: right; padding-right: 10px; } .in_x { width: 150px; height: 30px; } .in_g { width: 50px; height: 30px; } </style> <script> //7번 참고 // 저장공간 두개 -숫자(in_x), 기호(in_g) --> 사용하면 사라지게 // 입력창 계산결과 나오게 , 지워지게 // 함수명 num() : 숫자, gh() : 기호 c2() :C end() : = // x.value = result.value; 저장공간에 넘길때 /* if(x.value="") { x.value = result.value; } else { } */ function bt(num) { if(num==1) { result.value = result.value + 1; } else if(num==2) { result.value = result.value + 2; } else if(num==3) { result.value = result.value + 3; } else if(num==4) { result.value = result.value + 4; } else if(num==5) { result.value = result.value + 5; } else if(num==6) { result.value = result.value + 6; } else if(num==7) { result.value = result.value + 7; } else if(num==8) { result.value = result.value + 8; } else if(num==9) { result.value = result.value + 9; } else { result.value = result.value + 0; } } function gh(gi) { x.value = result.value; // 기호누르는 동시에 result 입력창에서 저장공간으로 이동 if(gi=="+") { giho.value = giho.value + "+"; } else if(gi=="-") { giho.value = giho.value + "-"; } else if(gi=="*") { giho.value = giho.value + "*"; } else { giho.value = giho.value + "/"; } result.value=""; // 저장공간 이동한 후 result 입력창은 비우기 } function c2() { // 한번 누르면 다 지워지기 x.value=""; giho.value=""; result.value=""; } function end1() { //계산구문 다 적기(if문) var a = Number(x.value); // 숫자 저장공간 var b = giho.value; // 기호 저장공간 var c = Number(result.value); // 숫자2 if(b=="+") { result.value = a+c; } else if(b=="-") { result.value = a-c; } else if(b=="*") { result.value = a*c; } else { result.value = a/c; } } </script> <table width=200> <tr> <td colspan="3"><input id="x" class="in_x"></td> <!--저장공간--> <td><input id="giho" class="in_g"></td> </tr> <tr> <td colspan="4"><input id="result" class="res"></td> <!--입력창--> </tr> <tr> <td><button onclick="bt(1)">1</button></td> <td><button onclick="bt(2)">2</button></td> <td><button onclick="bt(3)">3</button></td> <td><button onclick="gh('+')">+</button></td> </tr> <tr> <td><button onclick="bt(4)">4</button></td> <td><button onclick="bt(5)">5</button></td> <td><button onclick="bt(6)">6</button></td> <td><button onclick="gh('-')">-</button></td> </tr> <tr> <td><button onclick="bt(7)">7</button></td> <td><button onclick="bt(8)">8</button></td> <td><button onclick="bt(9)">9</button></td> <td><button onclick="gh('*')">*</button></td> </tr> <tr> <td><button onclick="c2()" >C</button></td> <td><button onclick="bt(0)">0</button></td> <td><button onclick="end1()">=</button></td> <td><button onclick="gh('/')">/</button></td> </tr> </table>

'JAVA > html' 카테고리의 다른 글

230104_함수(array, math, string 등), 랜덤  (0) 2023.01.04
230103_구구단, form  (1) 2023.01.03
230102_교재, form, 구구단  (0) 2023.01.02
221230_JS, 조건문, 반복문, 짝홀  (1) 2022.12.30
221229_로또, dance블로그  (0) 2022.12.29
profile

데일리로그C:

@망밍

포스팅이 도움됐다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!