230105_함수, 팝업창, 피라미드, 계산기

<230105 1교시>

html 문서 전체 대표하는 객체 = document (DOM 트리의 루트)

DOM이 제일 상위체 --> 그 아래 html, css 등등 있음

html DOM 객체
--> html 태그가 출력된 모양과 콘텐츠 제어하기 위해 사용

document.getElementById( "id명" ).style.원하는속성 = "값" ;
--> 적용안된다면 <script> 순서 바꾸기

<img src =../img/ > 이런식으로 경로 잘 잡기!!

<230105 2교시>

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

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

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

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

<230105 3교시>

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

<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( ); )

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> <!--마우스 올라왔다가 탈출할 때 -->

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()">

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>

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>

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>

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>

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>

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>

0105_09.html

<script>
    function abc() {
        window.open("0105_10.html","a","width=400, height=400");  // 자식창 열기
    } 

</script>
<input id="x">
<span onclick="abc()"> 팝업 띄우기 </span>  <!-- 부모창 -->

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>

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>

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>

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>

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>

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>

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

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

<230105 1교시>

<230105 3교시>

<230105 4교시>

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

검색 태그

티스토리툴바