본문 바로가기
자바과정/자바스크립트

자바스크립트 기초 1일차

by Parkej 2021. 2. 26. 
-- 함수 및 변수
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
   <title>함수 및 변수</title>
    <script language = "javascript">
      document.write("처음 만드는 자바 스크립트!<br>");
      // 만들지 않고 바로 쓸 수 있는 객체 : 내장객체 (자바의 스태틱)
    </script>
</head>

<body>
 <script language = "javascript">
  // 배열 선언과 푸쉬 후 값 출력
  var arrNumber = new Array();
  arrNumber.push(1);
  arrNumber.push(true);
  arrNumber.push("java");
  arrNumber.push(4);
  arrNumber.push(5);
  for(var i=0;i<arrNumber.length;i++){
    document.write(arrNumber[i]+"<br>");
  }

  // 변수 선언 후 에러 출력해보기
  // var firstName = "도현";
  // try{
  //   document.write("내 이름은" = lastName +"입니다.<br>");
  // }
  // catch(ex){
  //   document.write(ex.message);
  // }

  // 함수 호출
  function sayHello(){
    document.write("<br>안녕하세요 자바스크립 함수임.<br>");
  }
  sayHello();

  // 함수 사용
  function add(num1,num2){
    document.write(num1+"+"+num2+"="+(num1+num2)+"입니다.<br>");
  }
  add(1,3);

  // 함수 리턴
  function add2(num1,num2){
    return num1+num2;
  }
  var result = add2(1,3);
  document.write("1 + 3 = "+result+"입니다.<br>");
  
  </script>
</body>
</html>


-- 팝업
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
   <title>팝업</title>
    <script language = "javascript">
      document.write("처음 만드는 자바 스크립트!<br>");
      // 만들지 않고 바로 쓸 수 있는 객체 : 내장객체 (자바의 스태틱)
    </script>
</head>

<body>
 <script language = "javascript">
  // 팝업창
  // window.alert("");
  // alert("어서와 alert야")


  // 팝업창 확인 후 리턴한 값이 뜨게 함.
  // prompt 내가 쓴 값을 리턴해준다
  // var userInput = prompt("당신의 이름을 무엇이냐","");
  // alert(userInput + "님 환영합니다.");


  // 확인 취소를 누르면 새로운 팝업메세지를 띄움.
  // var result = confirm("2021년에 이루고자 하는게 있음 ?");
  // if(result){
  //   alert("고생햇음 22년에도 화이팅");
  // }
  // else
  // {
  //   alert("22년에는 이루도록..");
  // }

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

-- 윈도우 오픈
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
   <title>window.open 메서드</title>
    <script language = "javascript">
      document.write("처음 만드는 자바 스크립트!<br>");
      // 만들지 않고 바로 쓸 수 있는 객체 : 내장객체 (자바의 스태틱)
    </script>
</head>

<body>
 <script language = "javascript">
   window.open("http://www.naver.com","popup1","left=0,top=0,width=300,height=150,location=yes,status=no");

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


-- 타이머
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
   <title>window.setTimeout 메소드</title>
    <script language = "javascript">
      document.write("처음 만드는 자바 스크립트!<br>");
      // 만들지 않고 바로 쓸 수 있는 객체 : 내장객체 (자바의 스태틱)
    </script>
</head>

<body>
 <script language = "javascript">
   function sayHello(){
     alert("안녕 3초 후 등장");
   }

  var timer = setTimeout(sayHello,3000);
  // clearTimeout(timer);
 </script>
</body>
</html>


-- 6번 호출후 정지
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
   <title>window.setTimeout 메소드</title>
    <script language = "javascript">
      document.write("처음 만드는 자바 스크립트!<br>");
      // 만들지 않고 바로 쓸 수 있는 객체 : 내장객체 (자바의 스태틱)
    </script>
</head>

<body>
 <script language = "javascript">
  
  var timer = setInterval(function(){
    alert("setInterval 함수 호출 6번 출력 후 정지");
    if (i==6){
      clearInterval(timer);
    }
    i++
  },1000);

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


 <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>getElementById 메서드로 객체 찾기</title>
      <script language = "javascript">
        function sayHello(){
          var textBox = document.getElementById("myName");
          if(textBox != null){
            alert(textBox.value + "님 안녕하세요!");
          }
        }
      </script>
    </head>

  <body>
    <input type="text" id="myName">
    <input type="button" value="인사하기" onclick="sayHello()">
  </body>
</html>

 <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>getElementById 메서드로 객체 찾기</title>
      <script language = "javascript">
        function findSubject(){
          var arrRadio = document.getElementsByName("subject");
          for(var i=0;i<arrRadio.length;i++){
            if(arrRadio[i].checked){
              alert(arrRadio[i].value + " 과목을 좋아하시네?");
              break;
            }
          }
        }
      </script>
    </head>

  <body>
    <h2> 제일 좋아하는 과목은? </h2>
    <input type="radio" name="subject" value="HTML">HTML<br>
    <input type="radio" name="subject" value="CSS">CSS<br>
    <input type="radio" name="subject" value="자바스크립트">자바스크립트<br>
    <input type="button" value="답안지 제출" onclick="findSubject()">
  </body>
</html>

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>getElementById 메서드로 객체 찾기</title>
      <script language = "javascript">
        function findSubject(){
          var arrRadio = document.getElementsByTagName("input");
          for(var i=0;i<arrRadio.length;i++){
            if(arrRadio[i].type == "radio" && arrRadio[i].checked){
              alert(arrRadio[i].value + " 과목을 좋아하시네?");
              break;
            }
          }
        }
      </script>
    </head>

  <body>
    <h2> 제일 좋아하는 과목은? </h2>
    <input type="radio" name="subject" value="HTML">HTML<br>
    <input type="radio" name="subject" value="CSS">CSS<br>
    <input type="radio" name="subject" value="자바스크립트">자바스크립트<br>
    <input type="button" value="답안지 제출" onclick="findSubject()">
  </body>
</html>

 

반응형

'자바과정 > 자바스크립트' 카테고리의 다른 글

자바스크립트 회원가입 지도 API 사용  (0) 2021.03.04
회원가입 유효성 검사 (비정규식과 정규식)  (0) 2021.03.04
카카오 우편번호 서비스 API  (0) 2021.03.04
자바스크립트 실습(계산기)  (0) 2021.03.02
자바스크립트 기초 2일차  (0) 2021.03.02

관련글

댓글

티스토리툴바