javascipt 기초

limchard·2023년 10월 30일
Button EventCastingDateDocumentEventJavaScriptalertbuttondocument.writefunctionisNaNmethodpromptreturnvarwrite경고창날짜리터럴변수입력창전역변수지역변수함수형변환
0

javascript

목록 보기
1/3
  • 순차적으로 진행된다.
  • JavaScript는 String, Int 등 구분없이 모두 var를 사용한다.
  • script 태그 안에서 활용한다.

alert(경고창)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 가장 기본적인 alert() 함수로 경고창 띄우기
        // 순차적으로 진행
        alert("Hello~JavaScript!!!");
        alert('안녕~ 자바스크립트!!');
    </script>
</head>
<body>
    <script>
        // 연산도 가능하다.
        alert(5+5*2); // 수식 연산도 가능
        alert(10%7); // 나머지 연산도 가능
    </script>
</body>
</html>




var (출력 3가지 포함)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 변수 var(let,const)</title>
    <script>
        var name1="임";
        var name2="형";
        var name3="준";
        
        var name=name1+name2+name3;

        // 자바스크립트의 출력
        // html 요소없이 출력..
        // ()안의 것을 화면에 출력하라.
        document.write("안녕하세요?<br>"+name+"입니다.<br>");
        document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
        document.write('자바스크립트의 시작<br> "자바스크립트 1일차"<br>');
        // 소따옴표, 대따옴표 바꿔서 사용 가능. 겹치지 않게만 하면 될듯..
        
    </script>
</head>
<body>
<!--    자바스크립트의 출력 3가지
    1. document.write()\\
    2. innerHTML : HTML 요소안에 출력해라.
    3. console.log() : 브라우저의 콘솔탭에 출력  -->
    <script>
        var a;
        a="변수연습";
        a="100";

        document.write(a+"<br>");
        document.write(a+1+"<br>"); // 자바스크립트는 오류없이 문자열 인식하여 출력 된다.

        // 대입연산자
        var b=10;
        document.write(b+"<br>");
        b+=5;
        document.write(b+"<br>");

        // 증감연산자
        var b=20;
        b++;
        document.write(b+"<br>");
        b++;
        document.write(b+"<br>"); 

    </script>
</body>
</html>

형변환 (casting)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 암시적 형변환 : JavaScript에서 알아서 바꿔주는 것. -->
    <!-- 명시적 형변환 : 내가 원할때 바꾸는 것. -->
    <script>
        // 암시적 형변환 : 자바스크립트 컴파일러에 의해 자동 형변환이 일어남.
        // Test
        var result=1+"2";
        document.write("result="+result+"<br>"); // 12

        var result2="5"+true;
        document.write("result2="+result2+"<br>"); // 5true

        // 명시적 형변환
        // 1. String() 이용해서 숫자로 변경 가능

        var relt1=1+"2";
        document.write("relt1="+relt1+"<br>"); // 12

        var test1="300";
        document.write((test1)+10+"<br>"); // 30010

        var test2="300.6";
        document.write((test2)+10+"<br>"); // 30010

        // Number, parseInt : 숫자로 형변환 
        var test3=Number(test1);
        document.write((test3+2)+"<br>"); // 302

        var test4=parseInt(test2);
        document.write((test4+2)+"<br>"); // 302.. parseInt 하여 정수로 바꿔줌.. 소숫점 안나옴.

    </script>
</body>
</html>

prompt (입력창)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 당신의 키는?
    180
    표준몸무게: (키-100)*0.9
    당신의 표준 몸무게는 72kg 입니다. -->

    <script>
        // var height=window.prompt("당신의 키는?");
        // st_weight=(height-100)*0.9;
        // document.write(avg);
        
        var height=Number(prompt("당신의 키는?"));
        document.write("나의키는"+height+"cm 입니다.<br>");
        var st_weight=(height-100)*0.9;
        document.write("당신의 표준 몸무게는 "+st_weight+"kg 입니다.<br>")

        // confirm
        // confirm("정말 삭제할까요?");
        var ans=confirm("정말 삭제할까요?");
        if(ans==1){ // ture 1
            document.write("삭제되었습니다.<br>");
        }
        else{
            document.write("삭제가 취소되었습니다.<br>");
        }

        //eval() : 문자열 내에서 연산이 가능하다.
        var a=eval("10+10");
        document.write(a+"<br>") // 20

        var b=eval("10+10.5");
        document.write(b+"<br>") // 20.5

        document.write(parseFloat(b)+parseInt(b)+"<br>");

        // prompt창에 구구단(원하는단) 입력해서 출력해보자.

        var dan=Number(prompt("몇단?"));
        for(var i=1;i<=9;i++){
            document.write(dan+" x "+i+"="+(dan*i)+"<br>");
        }
    </script>
</body>
</html>




prompt (명령창) 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>

    var rightId="bts";
    var rightPw="1234";

    function login(id,pw){
      if(id==rightId){
        if(pw==rightPw){
          document.write(id+"님 방문을 환영합니다.");
        }else {
          alert("잘못된 비밀번호입니다.");
        }
        
      }
      else {
          alert("존재하지 않는 아이디 입니다.");
        }
    }

    var userId=prompt("아이티를 입력하세요","아이디");
    var userPw=prompt("비밀번호를 입력하세요","비밀번호");

    login(userId,userPw);
  </script>
</body>
</html>

  • 아이디를 틀렸을 경우


  • 아이디를 맞췄을 경우


method (함수)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Normal 함수만들기
    1. function 함수명(){

    }

    2. function 함수명(파라메터1, 파라메터2....){

    } 

    3. function 함수명(파라메터1, 파라메터2...){
        ......
        return 반환값;
    }
    -->

    <!-- 리터럴 방식으로 함수만들기... 이 방식 또한 자주 사용함
    1. 함수명=function(파라메터1,파라메터2....){
        return 반환값;
    } 
    -->

    <script>
        // 1. Normal 방식
        function hello(){
            document.write("자바스크립트 함수만들기 시작!!!<br>");
        }

        hello();

        // 2. 리터럴 방식

        hi=function(){
            document.write("함수만들기 리터럴 방식이야<br>");
        }
      
        hi();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write("안녕하세요 순영님... 자바스크립트 재미있죠?<br>");
        document.write("안녕하세요 민규님... 자바스크립트 재미있죠?<br>");
        document.write("안녕하세요 성신님... 자바스크립트 재미있죠?<br>");
        document.write("안녕하세요 시온님... 자바스크립트 재미있죠?<br>");

        /* 중복되는것을 함수로 포장한 후.. 중복되지 않는 부분을 파라메터로 만든 후 
           함수를 호출할 때 값을 넘긴다. */

        function showName(name){
            document.write("안녕하세요 "+name+"님... 자바스크립트 재미있죠?<br>");
        }
        showName("순영");
        showName("민규");
        showName("성신");
        showName("시온");

    // Q. 안녕하세요? A님의 나이는 B살 입니다. 로 출력해보세요
    // 함수명: showInfo
        
        function showInfo(iName,age){
            document.write("안녕하세요? "+iName+"님의 나이는 "+age+"살 입니다.<br>");
        }

        showInfo("메붕",24);
        showInfo("엘리",43);
        showInfo("헤네",53);
        showInfo("커닝",34);
        
    // Q. 본인의 이름,나이,키,몸무게를 파라메터로 받아서 출력하는 변수를 만드세요
        //  이름: 홍길동
        //  나이: 26세
        //  키 : 170cm
        //  몸무게 : 64kg

        function showMy(myName,myAge,height,weight){
            document.write("이름: "+myName+"<br>나이: "+myAge+"세<br>키: "+height+"cm<br>몸무게: "+weight+"kg<br>");
        }
        showMy("마법사",29,171,73);

        myInfo=function(irum,nai,ki,mom){ // 전역변수
            document.write("이름: "+irum+"<br>나이: "+nai+"세<br>키: "+ki+"cm<br>몸무게: "+mom+"kg<br>");
        }
        myInfo("전사",26,170,64)

        var myInfo=function(irum,nai,ki,mom){  // 지역변수
            document.write("이름: "+irum+"<br>나이: "+nai+"세<br>키: "+ki+"cm<br>몸무게: "+mom+"kg<br>");
        }
        myInfo("궁수",36,156,55)
        document.write("=================================<br>");
        myInfo("도적",32,174,64)
        document.write("=================================<br>");
        myInfo("메붕이",26,167,49)

    </script>
</body>
</html>

date(날짜)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var date=new Date();
        document.write("date.getFullYear()"+date.getFullYear()+"<br>");
        document.write((date.getMonth()+1)+"<br>");
        document.write(date.getDate()+"<br>");
        document.write(date.getDay())+"<br>"; // 1: 월요일, 2: 화요일... 요일을 숫자로 출력해줌

        // 오늘은 2023년 7월 27일 입니다.
        document.write("오늘은 "+date.getFullYear()+"년 "+(date.getMonth()+1)+"월 "+date.getDate()+"일 입니다.<br>");

        // isNaN(Not a Number) : 문자가 끼어있나 안끼어있나 찾는것, 문자가 껴있으면 true, 숫자일경우 false
        document.write(isNaN(100)+"<br>"); // false
        document.write(isNaN("Hello")+"<br>"); // true
        document.write(isNaN("a100")+"<br>"); // true
        document.write(isNaN("100")+"<br>"); // false (문자형 숫자도 숫자로 인식한다.)
    </script>
</body>
</html>

전역변수, 지역변수

  • 순차적인 진행에 집중하자!!
  • window.onload=function(){ 내용 } 명령어가 없는 경우 해당 코드는 실행되지 않는다. 이유는 document.getElementById('out').innerHTML=list; 에서 get으로 가져와야 하는데 위쪽에서는 out에 대해 언급된 부분이 없기 때문이다. 그래서 window.onload=function(){ 내용 } 묶어주거나, document.getElementById('out').innerHTML=list; 를
    결과
    보다 아래쪽에 배치하면 실행된다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 전역변수 : 전역에서 사용하는 변수
        var a=10;
        var b=100;

        function outer(){
            // 지역 변수
            var a=20;

            document.write("3. a="+a+"<br>"); // 20
            document.write("4. b="+b+"<br>"); // 100
        }

        document.write("1. a="+a+"<br>");
        document.write("2. b="+b+"<br>");
        outer(); // 이걸 해서 불러와줘야 3번과 4번이 출력된다!! 주의!!
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

// 페이지의 모든요소가 로드되어야 호출...
// html 로딩이 끝나야 아래 코드가 시작이 된다.
      window.onload=function(){ // 모든것이 load가 끝난 다음에 동작을 하겠다. 라는 뜻
// dom객체(document, object, model) : JavaScript 문을 html에 가져와 실행 시 순서에 따라 결과값이 달라진다. 
// body에서 시작해야 하는 명령어가 head 단에서 시행이 안되면 window.onb

      var list='';
      
      list+='<ul>';
      list+='<li>Java</li>';
      list+='<li>JavaScript</lt>';
      list+='</ul>';

      // document.write(list);
      // html문서의 body태그에 list를 넣어줄께요.
      // document.body.innerHTML=list;

      document.getElementById('out').innerHTML=list; // id요소값을 찾아서 
      //엘리먼트를 통해 찾아와야 한다.

      // out.innerHTML=list;
    }

    </script>
</head>
<body>
  <div id="out">결과</div> <!-- script의 내용이 이 결과가 나오기 전에 바로 실행을 해버려셔.. 결과값이 나오지 않는다. -->
</body>
</html>

button event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function hello(){
            alert("두번째 버튼을 클릭했어요!!");
        }

// btn1에 이벤트 주기
window.onload=function(){
    var b=document.getElementById('btn1');
    b.onclick=function(){
        alert("3번째 버튼 클릭")
    }
}
    </script>
    
</head>
<body>
    <button type="button" onclick="alert('안녕하세요')">함수호출_직접이벤트 호출</button>
    <br><br>
    <button type="button" onclick="hello()">자바스크립트 사용자 함수 호출</button>
    <br><br>
    <button type="button" id="btn1">이벤트를 자바스크립트로</button>
</body>
</html>

  • 초기 실행화면

  • 첫번째 버튼(함수호출_직접이벤트 호출) 클릭

  • 두번째 버튼(자바스크립트 사용자

  • 세번째 버튼(이벤트를 자가스크립트로) 클릭

모든 기초를 활용한 button event 연습문제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/buttonStyle.css">
    <title>Title</title>
    <style>
        #out{
            position: absolute;
            left: 20px;
            top: 100px;
            background-color: beige;
            padding: 10px;
            width: 300px;
            height: 150px;
            border: 1px solid gray;
        }
    </style>

    <script>
        function test1(a){
            alert(a+1000);
        }
        function test2(str){
            alert("문자열 ["+str+"]을 \\n 받았어요!!!");
        }

        // test3... 데이터를 추가할까요? 확인. 추가했어요, 취소. 취소했어요... out에 출력

        function test3(){
            var ans=confirm("데이터를 추가할까요?");

            if (ans){
                document.getElementById("out").innerHTML="추가했어요";
            } else {
                document.getElementById("out").innerHTML="취소했어요";
            }
        }

        // prompt 창에 당신이 사는 지역은?, 내가사는 지역은 서울입니다. = out에 출력

        window.onload=function () {
            document.getElementById("btn4").onclick=function (){
                var city=prompt("당신이 사는 지역은?");
                out.innerHTML="내가 사는 지역은 "+city.fontcolor('pink')+"입니다."; // 자바스크립트 에서는 여기서 글씨에 바로 색상을 줄 수 있다.
            }
        }

    </script>
</head>
<body>
    <input type="button" value="alert" class="btn btn-black" onclick="test1(25)"> <!-- btn 클래스와 btn-pink 클래스 2개 적용함. -->
    <input type="button" value="alert" class="btn btn-pink" onclick="test2('hello')">
    <input type="button" value="confirm" class="btn btn-sky" onclick="test3()">
    <input type="button" value="prompt" class="btn btn-yellow" id="btn4">
    <div id="out"></div>
</body>
</html>

  • 초기화면

  • 까만색 alert을 눌렀을 때

  • 분홍색 alert를 눌렀을 때

  • confirm을 눌렀을 때

  • 확인을 눌렀을 때

  • prompt 를 눌렀을 때

  • 서울을 기입했을 때

profile
limchard
java를 잡아...... 하... 이게 맞나...
다음 포스트

javascript popup

0개의 댓글