[자바스크립트] 1214 수업 소스코드 아카이브 - 계산기 만들기, 윈도우 브라우저 활용,메서드가 안열리는데 디버그 콘솔에 아무것도 안뜸,

    <body>
        <h2>속성만 가진 객체 만들기</h2>
        <p id="var1"></p>
        <p id="var2"></p>
        <p id="var3"></p>
        <script>
            var car ={name:'sonata',speed:100, color:'white'};
            document.getElementById("var1").innerHTML="자동차 이름: "+car['name'];
            document.getElementById("var2").innerHTML="자동차 속도: "+car.speed;
            document.getElementById("var3").innerHTML="자동차 색상: "+car.color;
        </script>
        <h2>메서드를 호출하여 연산 결과를 출력하기</h2>
        <p id="msg1"></p>
        <p id="msg2"></p>
        <p id="msg3"></p>

        <script>
            var obj ={
                m1: function(){
                    return "hello sonata";
             },
             m2: function(a){
                var result = a;
                return result;
             },
             m3: function(a,b){
                var result = a+b;
                return result;
             }
            };
            document.getElementById("msg1").innerHTML=obj.m1();
            document.getElementById("msg2").innerHTML=obj.m2(100);
            document.getElementById("msg3").innerHTML=obj.m3(100,200);
        </script>
        <br/>
        <h3>객체 생성하기</h3>
        <p id="carName"></p>
        <p id="carColor"></p>
        <p id="carSpeed"></p>

        <script>
            var car1 = {
                name:'sonata',
                speed: 50,
                color:'white',
                start: function(){
                    return this.speed+10;
                }
            };
            var cname = document.getElementById("carName");
            cname.textContent = car1.name;
            var colname = document.getElementById("carColor");
            colname.textContent=car1.color;
            var cspeed = document.getElementById("carSpeed");
            cspeed.textContent=car.start();
        </script>
       
    </body>

    결과

    더보기

    속성만 가진 객체 만들기

    자동차 이름: sonata

    자동차 속도: 100

    자동차 색상: white

    메서드를 호출하여 연산 결과를 출력하기

    hello sonata

    100

    300

     

    객체 생성하기

    sonata

    white

    60

        </script>
        <br/>
        <h2>Array 생성자로 배열 객체구조 선언하기</h2>
        <p id="car"></p>
        <p>[car1 속성]</p>
        <p id="car0"></p>
        <p>[car2 속성]</p>
        <p id="car1"></p>
        <p>[car3 속성]</p>
        <p id="car2"></p>
        <script>
            var car2 = new Array(
                ['sonata','blue',100],
                ['jeep','red',70],
                ['passt','white',150]
            );
            var cname1 = document.getElementById("car");
            cname1.textContent="car[2][1]:"+car2[2][1];

            for(var i=0;i<3;i++){
                var cname2 =document.getElementById("car"+i);
                cname2.textContent=car2[i];
            }

        </script>
    더보기

    Array 생성자로 배열 객체구조 선언하기

    car[2][1]:white

    [car1 속성]

    sonata,blue,100

    [car2 속성]

    jeep,red,70

    [car3 속성]

    passt,white,150

    아래는 이벤트 처리(1)

    -문서가 로드되고 나서 이벤트를 발생하는 방법 (onload)

    -클릭하면 이벤트 발생

    -body 자체에 id 부여하기

     <title>자바스크립트(이벤트 처리)</title>
        <script>
            function changeColor(c){
                document.getElementById("target").style.backgroundColor=c;
            }
            //현재 페이지가 전체 로드되고 나서 실행
            function onLoadDoc(){
                alert("문서가 모두 로드되었습니다.");
                document.body.style.backgroundColor='pink';
            }
        </script>
    </head>
    <body id="target" onload="onLoadDoc();">
        <form method="get" nmae="form1" action="1213.html">
            <input type="radio" name="c1" value="v1" onclick="changeColor('lightblue');"/>파란색
            &nbsp;
            <input type="radio" name="c1" value="v2" onclick="changeColor('lightgreen');"/>연두색
        </form>
       
    </body>

    결과

     

    클릭할 때에 누르기/떼기로 나눠서 이벤트를 처리할 수도 있

        <title>자바스크립트-이벤트처리</title>
        <script>
            function sub(){
                var x =document.getElementById("name");
                x.value=x.value.toLowerCase();
            }
            function onButtondDown(a){
                a.style.color='#ff0000';
            }
            function onButtonUp(a){
                a.style.color='blue';
            }
        </script>
    </head>
    <body>
        영어단어 <input type="text" id="name" name="name" onchange="sub()"/>
        <p>입력필드를 벗어나면 소문자로 변경됩니다. </p>
        <br/><br/>
        <button onmousedown="onButtondDown(this)" onmouseup="onButtonUp(this)">버튼을 눌러 보세요.</button>
    </body>
    </html>
        <title>자바스크립트-계산기</title>
        <script>
            var expression ="";
        function add(c){
            expression+=c;
            document.getElementById("display").value=expression;
        }
        function clearDisplay(){
            expression="";
            document.getElementById("display").value="0";
        }
        function compute(){
            document.getElementById("display").value=eval(expression);
        }
        </script>
       
    </head>
    <body>
        <form name="form1" action="1214.html" method="get">
            display <input id="display" value="0" size="30">
            <br/>
            <input type="button" value="    7    " onclick="add('7')"/>
            <input type="button" value="    8    " onclick="add('8')"/>
            <input type="button" value="    9    " onclick="add('9')"/>
            <input type="button" value="    /    " onclick="add('/')"/>
            <br/>
            <input type="button" value="    4    " onclick="add('4')"/>
            <input type="button" value="    5    " onclick="add('5')"/>
            <input type="button" value="    6    " onclick="add('6')"/>
            <input type="button" value="    *    " onclick="add('*')"/>
            <br/>
            <input type="button" value="    1    " onclick="add('1')"/>
            <input type="button" value="    2    " onclick="add('2')"/>
            <input type="button" value="    3    " onclick="add('3')"/>
            <input type="button" value="    -    " onclick="add('-')"/>
            <br/>
            <input type="button" value="    0    " onclick="add('0')"/>
            <input type="button" value="    +    " onclick="add('+')"/>
            <br/>
            <input type="button" value=" Clear " onclick="clearDisplay()"/>
            <input type="button" value="    Enter    " name="enter" onclick="compute()"/>
        </form>
    </body>
    </html>

    위는 계산기 만들기...

    eval()은 함수로 string을 expression 해준다고 하는데, 쓰지 말라고(?)한다. 참고는 아래 링크에서

    https://velog.io/@modolee/javascript-eval-is-evil

     

    JavaScript - eval 함수란 무엇이고, 왜 사용하지 말라고 하는가? (eval() is evil)

    JavaScript의 eval 함수가 무엇이고, 왜 사용하지 말라고 하는지에 대한 정리해 보았습니다.

    velog.io

    window 객체

    모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨. 

    window 객체의 메서드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 됨. 

    문서 객체 모델 dom의 요소들도 모두 window 객체의 프로퍼티가 됨. 

        <p>웹 브라우저 창 크기를 조절한 뒤, 페이지 리로드 + 결과 확인</p>
        <script>
            var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            var windowheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

            document.write("웹 브라우저의 넓이는 "+windowWidth+"픽셀이고, 높이는 "+windowheight+"픽셀 입니다.<br/>");
        </script>

    참고! 윈도우 넓이와 높이를 알아낼 수 있다는 것은, 웹 페이지 크기를 고정하는 것도 가능하다는 뜻이다. 

    더보기

    브라우저 창 크기 조절

    웹 브라우저 창 크기를 조절한 뒤, 페이지 리로드 + 결과 확인

    웹 브라우저의 넓이는 150픽셀이고, 높이는 604픽셀 입니다.

    -브라우저 새 창 열기: window.open() 메서드 

    var strWindowFeatures = "menubar=yeslocation = yes .resizable=yes.scrollbars=yes.statys=yes";

    function openWindow(){

    newWindowObj=window.open("http://~", "google",strWindowFeatures);

    -브라우저 창 닫기: window.close() 메서드

    newWindowObj.close(); 하면 닫힘

     

    메서드가 안열리는데 오류도 안 뜬다? >>이거 메서드 이름 뒤에 소괄호 여닫기 빠졌을 가능성 확인...

     var strWindowFe = "menubar=yes, location=yes, resizable=yes, scrollbars=yes status=yes";
            function openWindow(){
                newWindowObj=window.open("1214.html","HTML 개요", strWindowFe);
            }
            function closeWindow(){
                newWindowObj.close();
            }

     

    Location 객체

    현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용

    -현재 문서의 url 주소

    ex. document.write("현재 문서의 주소는 "+lacation.href+"입니다.");

        버튼 선택시 페이지 이동
        <input type="button" value="페이지 이동" onclick="fn_chech()">
        <script>
            function fn_chech(){
                location.href="http://www.daum.net";
            }
        </script>

    위는 아예 현재 페이지가 이동하는 경우. 

     

    History 객체

    브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체

    -히스토리 목록 접근(이전 페이지로 가기) : window.history.back(); 또는 window.history.go(-1);

    -다음 페이지로 가기: window.history.forward();

     

    Screen 객체 (screen.width / screen.height) 현재 사용자의 모닡터 크기를 반환 

    window.outerWidth/window.outerHeight 현재 브라우저 창의 크기를 반환...

    <h2>사용자의 화면 크기</h2>
        <script>
            document.write("현재 모니터 화면의 넓이는 "+screen.width+"픽셀 입니다.<br/>");
            document.write("현재 모니터 화면의 높이는 "+screen.height+"픽셀 입니다.<br/>");
            document.write("현재 브라우저 창의 넓이는 "+window.outerWidth+"픽셀입니다. <br/>");
            document.write("현재 브라우저 창의 넓이는 "+window.outerHeight+"픽셀입니다. <br/>");
        </script>

     

    정규표현식

    문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색패턴. 

    이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용. 

    문법) 검색패턴/플래그

    search() 메서드는 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 첫번째 문자열의 위치를 반환해주는 자바스크립트의 String 메서드임. 

    -regExp 객체: 정규 표현식을 구현한 자바스크립트 표준 내장 객체

    test() method: 인수로 전달된 문자열에 특정 패턴과 일치하는문자열이 있는지를 검색. 패턴과 일치하는 문자열이 있으면 true를, 없으면 false를 반환함.    

    메타문자의 의미

    식 기능 설명
    ^ 시작 문자열의 시작
    $ 끝 문자열의 끝
    . 문자 한개의 문자와 일치
    \d 숫자 한개의 숫자와 일치
    \w 문자와 숫자 한개의 문자나 숫자와 일치
    \s 공백문자 공백/탭/줄바꿈/캐리지 리턴 문자와 일치
    [] 문자 종류, 범위 [abc] a || b || c
    [a-z] from a to z
    [1-9] except 0, all of num

     

    ex

    /abc/ : 정확히 /abc/ 만 가능

    /./ : 한 자리의 문자, 예를 들면 "A" "$" "1"

    /\d\d\d/ : 3자리의 숫자. 예를 들어 "001" "003"

    /[a-z]/ : a부터 z까지

    /\w\ : 한자리 문자나 숫자. ex "8"

    /^\d\/ : 문자열의 시작이 한자리의 숫자, 예를 들어 "123" "2nd"

    /\d\d$/ 끝에 2자리 숫자가 있는 문자열. 예를 들어 "car01" "dfhdk09"

    //아이디패턴(특수문자는 '-'와 '_'만 허용, 6글자이상 20글자미만)
                var idPattern =/^[a-zA-Z0-9-_]{6,20}$/;

     

    예시~

    메타문자 뒤에 수량 한정자를 붙일 수 있음 . 수량 한정자는 문자가 몇 번 반복되느냐를 나타 냄

    수량한정자 기능 설명
    * 0회 이상 반복 "a*"는"","a","aa","aaa"를 나타낸다.  
    + 1회 이상 반복 "a+"는 "a","aa","aaa"를 나타낸다
    ? 0 또는 1회 "a?"는 "","a"를 나타낸다.
    {m} m회 "a{3}"는 "aaa"만 나타낸다. 
    {m,n} m회 이상 n회 이하 "a{1,3}"은 "a","aa","aaa"를 나타낸다
    (ab) 그룹화 (ab)*은 "","ab","abab" 등을 나타낸다. 

    /^[1-9][0-9]*$/ 가격

    /^\d{6}-\d{7}$/  중간에 -이 있는 주민등록번호

    언제 쓰느냐? 가장 흔한 것이 회원가입할 때에. input type="text"로 두고, 메타문자 수량한정자 사용해서 넘버로 받거나 하는 것. 어떤 방식이냐는 물론 회사나/사이트에 따라 다름. 

     //이름 패턴
                var namePattern =/^[a-zA-Zㄱ-힣]*$/;

    한글의 경우!

     

    대화상자(dialog box)

    -. alert() : 사용자에게 간단한 메세지를 보여주고, 그것에 대한 사용자의 확인을 기다림. 

    -.prompt() 사용자에게 간단한 메세지를 보여주고, 사용자가 입력한 문자열을 반환함. (인수가 두개일 경우, 첫 번째는 위에, 두 번째는 placeholder와 같이 text박스 안에서 입력하기 전까지 보여주는 것.)

    -. confirm() : submit 하기 직전에 보여주는것이 confirm() 이다. 사용자가 확인이나 취소를 누르면, 그 결과를 boolean으로 반환함.   

     

        <script>
            var city = new Array("Seoul","Busan","Incheon");
            function printArr(){
                if(city instanceof Array){
                    document.write("배열 객체가 생성되었습니다. <br/>");
                    var i;
                    for(i=0;i<city.length;i++){
                        document.write("배열 데이터 ["+i+"] = "+city[i]+"<br/>");
                    }
                }
                else {
                    document.write("배열객체가 아닙니다. <br/>");
                    document.write("data : "+city+"<br/>");
                }
            }
            printArr();

            document.write("<h3>city변수 타입: "+typeof city+"</h3><br/>");
            document.write("<h3>배열객체 확인 결과 : "+Array.isArray(city)+"</h3>");
        </script>

    결과

    더보기

    배열 객체가 생성되었습니다.
    배열 데이터 [0] = Seoul
    배열 데이터 [1] = Busan
    배열 데이터 [2] = Incheon

    city변수 타입: object

     

    배열객체 확인 결과 : true

    결과적으로 isArray() 라는 메서드는 instanceof Array와 똑같이 사용할 수 있다는 것을 알 수 있다. 

        <title>자바스크립트-</title>
    </head>
    <body>
        <script>
            //배열의 1~100까지 저장한 후 모두 더하기.
            var arrData=[];
            var gubun="";
            function selectArr(){
                var i;
                for(i=0; i<arrData.length;i++){
                    document.write(arrData[i]+" ");
                }
                addArr();
            }
            function insertArr(chk){
                gubun =chk;
                var i;
                for(i=0;i<100;i++){
                    arrData[i]=i+1
                }
                if(gubun=="I"){
                    selectArr();
                }
                else if(gubun=="D"){
                    delArr();
                }
            }
            function addArr(){
                var i,sum=0;
                for(i=0;i<arrData.length;i++){
                    sum+=arrData[i];
                }
                if(gubun=="I"){
                    document.write("<p>배열 데이터 덧셈 연산 결과: "+sum+"<p/>");
                }
                else if(gubun=="D"){

                    document.write("<p>홀수번째 데이터 초기화 완료: "+sum+"</p>");
                }

                document.write("<a href='1214_8.html'>돌아가기</a>");
            }
            function delArr(chk){
                //홀수번째 0으로 초기화
                for(i=0;i<arrData.length;i++){
                    if(i%2==0){        //if(arrData[i]%2!=0){
                        arrData[i]=0;
                    }
                }
                selectArr();
            }
        </script>
        <!--1)생성>조회>연산 우선 적용. 2)홀수번째를 0으로 초기화 적용. -->
        <input type="button" value="배열 생성.조회.연산" onclick="insertArr('I')"/>
        <br/>
        <input type="button" value="배열의 홀수번째를 0으로 초기화" onclick="insertArr('D')"/>
    </body>
    </html>

    첫 번째 버튼> insertArr>selectArr>addArr

    결과

    더보기

    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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

    배열 데이터 덧셈 연산 결과: 5050

    돌아가기

    두 번째 버튼>insertArr>delArr>selectArr>addArr

    결과

    더보기

    0 2 0 4 0 6 0 8 0 10 0 12 0 14 0 16 0 18 0 20 0 22 0 24 0 26 0 28 0 30 0 32 0 34 0 36 0 38 0 40 0 42 0 44 0 46 0 48 0 50 0 52 0 54 0 56 0 58 0 60 0 62 0 64 0 66 0 68 0 70 0 72 0 74 0 76 0 78 0 80 0 82 0 84 0 86 0 88 0 90 0 92 0 94 0 96 0 98 0 100

    홀수번째 데이터 초기화 완료: 2550

    돌아가기

     

    각 함수 기능 설명

    addArr(): 다 더한 다음에 구분해서 문장과 sum, 돌아가기 찍어줌. 

    selectArr(): 숫자 찍고 addArr() 호출

    delArr(): 홀수번째 초기화 후 selectAll호출

    insertArr(): 배열에 값 넣은 다음에 del혹은 select 각각 구분해서 호출. 

    function allDelArr(){
                //배열 크기 초기화
                arrData.length=0;
                selectArr();
            }

    자바스크립트 배열 크기를 0으로 만드는 방법_냅다 length를 0만들기. 

     

    회원가입!

     //아이디패턴(특수문자는 '-'와 '_'만 허용, 6글자이상 20글자미만)
                var idPattern =/^[a-zA-Z0-9-_]{6,20}$/;

    아이디패턴 변수 지정

    //아이디 입력 체크
                if (document.form1.userid.value.trim()==""){
                    alert("아이디를 입력하세용");
                    document.form1.userid.focus();
                    return;
                }

    아이디를 아예 안썼을

     if(!idPattern.test(document.form1.userid.value)){
                    //정규표현식에 해당하지 않을 경우'!'를 찾는 중...
                    alert("아이디는 6~20자로 영문 대소문자, 숫자, 특수기호(-,_)만 사용 가능합니다.");
                    document.form1.userid.value="";
                    document.form1.userid.focus();
                    return;
                }

    패턴이 틀렸을 때

    <form name="form1" action="1214.html" method="get">
            아이디(6~20 자):
            <input type="text" id="userid" name="userid" maxlength="20" /><br/>

    바디

    비밀번호 확인에서 유의할 점:

    <input type="button" value="확인" onClick="validate()"/>
            &nbsp;
            <input type="reset" value="다시 입력"/>
            <input type="hidden" name="pwd" id="pwd" value=""/>
        </form>

    hidden버튼만들고, value값 반드시 넣 

    'Study > JavaScript' 카테고리의 다른 글

    [자바스크립트] <br/> 과 &nbsp 의 차이점 / a href의 활용  (1) 2023.12.17
    [jQuery] 1215 제이쿼리 기본 문법+선택자+요소를 구하는 방법  (1) 2023.12.17
    [자바스크립트] 1213 수업 소스코드 아카이브  (0) 2023.12.13
    [자바스크립트] 1212 수업 아카이브  (0) 2023.12.12
    [자바 스크립트] 1211 수업 소스코드 아카이브  (0) 2023.12.11

    관련글

    댓글

    라이브러리 브랜드 그룹 | 뇌약간고침

    티스토리툴바