본문 바로가기
Javascript/Javascript(2024 version)

Javascript(1) - 회원 가입 예제, Javascript 출력 예제 / 기본 문법(변수, 데이터 타입)

traveler-Hwang 2024. 6. 4. 21:00
728x90
반응형

<목차>

1) 회원 가입 예제

2) Javascript 출력 예제

3) Javascript 기본 문법(변수, 데이터 타입)

 

 

 

 

 

1) 회원 가입 예제

memberJoin.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>회원 가입</title>
    <link rel="stylesheet" href="./CSS_folder/memberJoin.css" />
    <script>
      // window : "BOM"이라 하는 객체
      // onload 이벤트 : 페이지가 로딩되는 시점을 인식하는 이벤트
      window.onload = function () {
        // document가 가지고 있는 element(요소)들 중에서 요소의 id 속성값이 "userid"인 요소(태그)를 찾아서 "userid"라는 변수에 저장시키는 코드
        let userid = document.getElementById("userid"); // getElementById 메서드 사용
        let userpw = document.getElementById("userpw");
        let checkpw = document.getElementById("checkpw");

        // keyup : keyboard를 눌렀다가 떼는 순간 발생하는 이벤트
        userid.addEventListener("keyup", function () {
          if (userid.value.length >= 8) {
            userid.style.backgroundColor = "lightblue";
          } else {
            userid.style.backgroundColor = "lightpink";
          }
        });

        checkpw.addEventListener("keyup", function () {
          if (userpw.value == checkpw.value) {
            checkpw.style.backgroundColor = "lightblue";
          } else {
            checkpw.style.backgroundColor = "lightpink";
          }
        });
      };

      function infoCheck() {
        let userid = document.querySelector("#userid");
        let userpw = document.querySelector("#userpw");
        let checkpw = document.querySelector("#checkpw");

        if (userid.value.length < 8) {
          alert("ID는 8자 이상 쓰세요!");
          return false; // return 값을 false로 반환하면 submit되지 않기 때문에 이렇게 처리함!
        }
        if (
          userpw.value == null ||
          checkpw.value == null ||
          userpw.value == "" ||
          checkpw.value == "" ||
          userpw.value != checkpw.value
        ) {
          alert("PW가 작성되지 않거나 일치하지 않아요!");
          return false;
        }
        return true;
      }
    </script>
  </head>
  <body>
    <div>
      <h1>회원 가입</h1>
    </div>
    <!-- onsubmit="return infoCheck();" => submit할 때 해당 함수를 호출하는 속성 -->
    <!-- onsubmit="return false;"인 경우에는 submit이 되지 않는다!! -->
    <form action="" method="get" onsubmit="return infoCheck();">
      <fieldset>
        <label for="userid">아이디</label>
        <input
          type="text"
          name="userid"
          id="userid"
          class="joinForm"
          placeholder="아이디는 8자 이상"
        />
        <br />
        <label for="userpw">비밀번호</label>
        <input type="password" name="userpw" id="userpw" class="joinForm" />
        <br />
        <label for="checkpw">비밀번호 확인</label>
        <input type="password" id="checkpw" class="joinForm" />
        <br />
        <input type="submit" value="가입" class="inputButton" />
        <input type="reset" value="취소" class="inputButton" />
      </fieldset>
    </form>
  </body>
</html>

 

 

memberJoin.css

body {
  width: 100%;
}

div {
  width: 700px;
  margin: 0 auto;
  text-align: center;
}

form {
  width: 700px;
  margin: 0 auto;
}

fieldset {
  text-align: center;
  font-weight: bold;
}

fieldset > label {
  display: inline-block;
  width: 150px;
  margin-right: 100px;
  font-size: 20px;
}

fieldset > input {
  margin: 40px 0;
}

fieldset > .joinForm {
  width: 250px;
  height: 40px;
}

fieldset > .inputButton {
  width: 100px;
  font-weight: bold;
}

 

 

 

 

 

 

※ 회원 가입 후 쿼리스트링 결과 화면 : form 태그의 method 속성값으로 "get" 지정함!

 

 

 

2) Javascript 출력 예제

00.스크립트.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>
    <script src="./js_folder/jsTest.js"></script>
    <script>
      document.write("안녕하세요2222<br>");
    </script>
  </head>
  <body>
    <script>
      document.write("안녕하세요3333<br>");
    </script>
    <h1>자바스크립트</h1>
    <script>
      document.write("안녕하세요4444<br>");
    </script>
    <!-- 
        * 스크립트 코드 작성 영역
        코드가 실행되기 위해서는 <script> 태그 안에 넣어서
        사용하며, <head>에 오던 <body>에 오던 아무데나
        와도 상관이 없고, 여러 번 사용해도 상관없다.
        but 실행되는 순서가 다르다. 
     -->
  </body>
</html>

 

 

jsTest.js

/*
    document.write()은 자바스크립트에서 HTML 문서에
    텍스트를 직접 작성할 때 사용된다.
    HTML을 처리하는 방식으로 문자열을 출력하기 때문에
    문자열 내의 개행 문자(\n)가 HTML에서 개행으로 해석되지 않음!
*/
document.write("안녕하세요1111<br>");

 

 

 

3) Javascript 기본 문법

01.기본문법.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>
    <script>
      // 주석
      /*
            여러 줄 주석
        */

      // 변수
      // var, let, const
      // 자바스크립트는 변수의 데이터 타입이 정해지지 않아도 변수 키워드를 통해 정의할 수 있다!
      var a = 10;
      a = 1.2;
      var a = "안녕"; // var는 두 번 초기화가 가능하다는 에러를 가지고 있어 문제가 된다!
      var b = "Hello";
      let c = 20;
      // let c = 30; --> var의 error를 잡아냄: 동일한 이름의 변수명 재선언 불가
      const d = true;
      // d = false; --> error: const는 상수를 정의하는 변수 키워드로, 값을 재할당할 수 없음!

      console.log(a);
      console.log(b);
      console.log(c);
      console.log(d);

      // 데이터 타입
      /*
            1. Number
            2. String
            3. Undefined
            4. Null
            5. Boolean
            6. Object
      */

      console.log("----숫자----");
      let point = 123;
      console.log(point);
      console.log(typeof point);
      point = -1.23;
      console.log(typeof point);

      // NaN : Not a Number
      point = 1 * "A";
      console.log(point);
      console.log(typeof NaN); // NaN은 "Number 타입"으로 간주함!!
      console.log(typeof point);

      // String : "", '' 사이의 문자
      // ex. "아이디 : 'asdf1234'입니다."

      /*
            undefined : 변수가 선언되었지만 아직 값이
            할당되지 않았을 때의 기본값
      */
      let e;
      console.log(e); // 값이 할당되지 않았을 때의 값을 "undefined"이라 한다!

      /*
            null : '값이 없는 상태'를 의미함
            변수나 객체 속성이 빈 값임을 명시적으로 나타낼 때 사용함
     */
      console.log("----null----");
      f = null;
      console.log(f);
      console.log(typeof f);

      /*
            null vs undefined
            == 연산자 : null과 undefined는 동등 연산자(==)로
            비교할 때 같다고 말할 수 있다.
            두 값이 모두 '비어 있음'을 나타냄
            === 연산자 : 일치 연산자(===)는 값과 타입을
            모두 비교하므로 null과 undefined는 일치하지 않는다.
      */
      console.log(null == undefined); // true
      console.log(null === undefined); // false
      console.log(typeof undefined); // "undefined"
      console.log(typeof null); // "object"
      // "null" 데이터 타입의 경우, 값이 없는 상태이기는 하지만 typeof를 적용했을 때 "Object" 타입이 나올 뿐이라고 이해하면 된다!

      // Boolean : true, false

      // Object : { name : value } 형태
      let book = {
        title: "책",
        point: 123,
      };
      console.log(book);
      console.log(typeof book);
    </script>
  </head>
  <body></body>
</html>

 

 

 

 

 

 

 

 

 

 

저작자표시

'Javascript > Javascript(2024 version)' 카테고리의 다른 글

Javascript(6) - 예제(간단한 계산기, window)  (0) 2024.06.14
Javascript(5) - 예제(class 추가/삭제, selectBox를 통한 이미지 선택, 데이터 출력, 주민등록정보 조회)  (0) 2024.06.12
Javascript(4) - HTML DOM 이벤트, HTML BOM, 예제(배경색 변경 / 글자수 표기)  (0) 2024.06.11
Javascript(3) - Object 객체, JSON, 함수, 객체생성자 함수, HTML DOM  (0) 2024.06.10
Javascript(2) - 연산자, 제어문, 배열, Date 객체, Math 객체, String 객체  (0) 2024.06.05

'Javascript/Javascript(2024 version)' Related Articles

티스토리툴바