[JavaScript] 이론, Test

JavaScript

JavaScript : Front-End 언어, Client code(script), 절차지향적언어

 

기본타입 : String, Number, Boolean, Undefined

 

발전 : JavaScript -> XML -> JSON

 

 

 

사용 목적

1. 유효성 검사(서버에서 유효성 검사를 할 경우 사용자가 많으 서버에 부담이 됨)

2. tag를 접근하기 위한 script

3. 화면을 제어하기 위한 요소(동적 처리)

4. complie을 하지 않는다(소스 -> 기계어 변환X) -> 처리가 가볍다

 

변수 정리

• var = 권장X, 위치에 상관없이, 타입에 상관없이 선언 가능, 동일 이름으로 충복선언(2개이상)가능 => 충돌 가능성 UP
• let = 권장O, 타입에 상관없이 선언 가능, 1개만 선언가능, 형변환없이 형태, 값을 바꿀 수 있다. => 충돌 확률 DOWN
• const = 상수 선언, 선언 후 변경 불가능, 상수인 걸 표기하위해 대문자로 변수명을 설정하는 경우가 많다.
• ex

let nnumber=246;
const nnumber = 346;
nnumber=246; // 오류 발생, 상수라서 변경 불가
let cars = ["volvo","bmw","benz"]; // 크기 4, 마지막에 cars의 배열 크기를 담은 length(readonly)가 포함되어 크기는 4이다.
alert('내용') // 경고창, 최근에는 사용자에 요구에 따라 잘 사용하지 않고 페이지에 오류를 표시한다.
prompt("내용","초기값") // 간단한 입력창

 

함수정리

• 선언 :  window.onload() 이후에 실행되도록 선언 or 필요한 태그 이후에 script 선언 or onclick 같은 function은 이미 선언해도 상관 X , 대소문자 구분 O
• 설정법 
• 1. 내장함수 <button onclick="alert()">
• 2. 사용자정의함수 <button onclick="checkPassword()">
• 콜백 함수 : 함수의 파라미터로서 다른 함수에 전달하고 감싼 함수의 내부에서 그 함수를 호출

document.querySelector(선택자) //tag이름, #id, .class
document.querySelectorALL(선택자)
document.getElementById() // 태그 전체를 들고와서 필요한 값이 있을 때는 .을 통해 확장해줘야 한다.
let obj = { //json key : value
            firstname : "sc",
            lastname :"k",
            age : 26,
            print:function(){
                console.log(this.lastname+this.firstname);
                // this를 안 붙이면 funtion 내에 있는  lastname,firstname을 호출한다
          		};
          }
console.log(obj.age);
let getAge = obj.age;
getAge.parseInt() // int형으로 변형
console.log(print);//this가 없으면 에러가 뜬다=> function에 선안된 lastname, firstname이 없어서
class Person{
            constructor(name,age){ //생성자
                this.name = name;
                this.age = age;
            }
            printing(){
                console.log(this.name,this.age);
                console.log(`${this.name}`,`${this.age}`);
            }
        }
let person = new Person("ksc",22);
person.printing();

// Array=ArrayList=LinkedList, Object 타입
// Date(날짜)
let date = new Date(); //Date 현재 날짜
let date2 = new Date("2024-05-03");
//                           month가 0~11이어서 +1해줘야 정확한 달이 나온다.    
console.log(date.getFullYear(),date.getMonth()+1,date.getDate(),date.getDay());
console.log(date.getHours(),date.getMinutes(),date.getSeconds());
//이번달의 마지막 날짜 확인하는 방법
console.log(date);
date.setMonth(date.getMonth()+1);
date.setDate(0); //0= 전달의 마지막일, 1= 이번달의 첫 날
console.log(date.getDate()); //이번달의 마지막 날짜 출력
        
// Map(key,value) xml = > tag+String, key 값은 보통 영어 사용
let map = new Map();
            // insert
            map.set("apple","사과");
            map.set("가격",2500);
            map.set("수량",3); // 다른 타입이 들어가도 상관 없다.
            // {
            //     "apple": "사과",
            //     "가격" : 2500,
            //     "수랑" : 3
            // }

            // size
            console.log(map.size); //3
            // select -> key를 통해 value를 구할 수 있다.
            console.log(map.get("가격")); //2500 출력
            console.log(map.get("color")); //undefined 출력
            if(map.get("color") ==undefined){ // 없는 key일 경우 ""가 아닌 undefind 타입으로 비교해야한다.
                console.log("result");
            }
            
            // delete
            map.delete("수량");
            console.log(map.get("수량")); //undefind console은 출력

            // 존재여부
            console.log(map.has("가격"));//key가 있으면 true, 없으면 false

            // for
            for(let key of map.keys()){ console.log(map.get(key));}
            
            //forEach
            map.forEach(function(item,index){ console.log(item,index);})
            map.forEach((item,index)=>{ console.log(item,index) }) //둘은 같은 의미이다.
            
            // key값만
            console.log(map.keys());
            
            // value값만
            console.log(map.values())
            
        // Set(중복을 허용하지 않는 집합)
        let set = new Set();
        set.add("t");
        set.add("s");
        set.add("g");
        set.forEach((item,index)=>{
            console.log(item);
        })

//document = 문서 자체 (내장 객체)
console.log(document.body.innerHTML); // 현재 document의 body 태그의 모든 내용 가져오기
console.log(document.documentElement.innerHTML) // 현재 document의 모든 html의 내용 가져오기
let arrp = document.getElementsByTagName("p"); // 모든 p 태그 | getElementsByTagName 모든 태그(배열) , getElementByTagName 태그 하나만 
console.log(arrp[2].innerHTML);
arrp[1].innerHTML="변경하고 싶은 내용"; // 값 변경
document.getElementById("hobby").value="사진찍기"; // 값 변경

//location = 주소 (내장 객체)
location.herf = www.naver.com //주소창이 www.naver.com으로 바뀐다.

 

BootStrap

//Bootstrap URL 형식으로 지정 연결

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<input type="text" id="commmentInPut" class="form-control" placeholder="댓글을 입력하세요">
<button class="btn btn-primary" onclick="addComment()">댓글달기</button>

 

 

Test

문제 1 : Id값이 설정된 값과 같은지 확인 및  주소 연결

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        function checkId(){
            let id = document.getElementById("userId").value;
            if(id=="root"){
                let result = document.getElementById("result");
                document.getElementById("result").innerHTML="<span style='color : red'>아이디 성공</span>"; 
            }
            else{
                document.getElementById("result").innerHTML="<span style='color : black'>아이디 실패</span>";
            }
        };
        </script>
        <script>
        function find(){
            let find_val=document.getElementsByTagName("input")[2].value;
            if(find_val.trim()==''){
                alert('검색어를 입력해 주세요');
            }
            else{
                location.href = "https://kin.naver.com/search/list.naver?query="+find_val;
            }
        }
    </script>
</head>
<body>
    아이디 <input type="text" value="root" placeholder="아이디를 입력하세요" id="userId">
    <input type="button"  class="btn btn-primary" onclick="checkId()" value="아이디 체크">
    <br>
    <div id="result"></div>
    <hr/>
    지식인검색어 <input type="text" value="" >
    <input type="button"  class="btn btn-primary" onclick="find()" value="지식인검색">
</body>
</html>

 

결과

문제 2 : 비밀번호 값이 동일한지 확인

<!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>
<script>
    function checkuserId(){
        const userid= document.getElementById("userID").value;
        if(userid.length<5){
            alert("글자수가 5 미만 입니다. 다시 입력해 주세요.");
        }else{
            console.log("아이디 입력 완료");
        }
    }
    function checkpassword(){
        const userpw= document.getElementById("password").value;
        const checkpw = document.getElementById("confirmpassword").value;
        const passwordmatchmsg =  document.getElementById("passwordmatchmsg");
        if(userpw === checkpw){ //2개는 주소 비교, 3개는 value 비교 
            passwordmatchmsg.innerHTML="일치<img src = '/imgs/Imageno.png' width='100' height='100'";
            passwordmatchmsg.style.color='red';
        }else{
            passwordmatchmsg.innerHTML="불일치<img src = '/imgs/Imagyes.png' width='100' height='100'"
        }
    }
</script>
<body>
    <label for="userId">아이디입력</label>
    <input type="text" id="userID"/>
    <button onclick="checkuserId()">확인</button>
    <hr />
    <label for="userId">비밀번호 입력</label>
    <input type="password" id="password"><br>
    <label for="confirm">비밀번호 재입력</label>
    <input type="confirmpassword" id="confirmpassword"><br>
    <button onclick="checkpassword()">비밀번호 확인</button>

    <p id="passwordmatchmsg"></p>

</body>
</html>

 

결과

 

 

문제 3 : 버튼 클릭시 이미지 변경

 

<!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 change(img){
            const imgDisplays = document.getElementById("imgDisplay");
            switch (img){
                case 'img1':
                imgDisplays.src="/imgs/image1.png";
                    break;
                case 'img2':
                imgDisplays.src="/imgs/image2.png";
                    break;
                case 'img3':
                imgDisplays.src="/imgs/image3.png";
                    break;
            }
        }
    </script>
</head>
<body>
    <button onclick="change('img1')" style="background-color: limegreen; width: 400px;">제주도로</button>
    <button onclick="change('img2')" style="background-color: orange; width: 400px">일본으로</button>
    <button onclick="change('img3')" style="background-color: purple; width: 400px">하와이로</button>
    <hr color="red" width="600">
    <h3>힘들다 우리도 떠나자!</h3>
    <hr color="red" width="600">
    <img src="/imgs/Imagyes.png" id = "imgDisplay" width="400" height="250"/>
</body>
</html>

 

결과

 

 

 

문제 4 : 댓글 입력 구현하기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function addComment(){
            let comment = document.getElementById("commmentInPut");
            let commentValue= comment.value.trim();
            if(commentValue !== ""){
                const commentsComtainer = document.getElementById("commentsComtainer");
                const div = document.createElement("div"); // div tag 생성
                div.classList.add("commentstyle") // <div class="commentstyle">
                div.innerHTML="<img src='/imgs/reply.png'> " + commentValue +"<hr style='style=border-top:2px solid red;'>" ;
                commentsComtainer.appendChild(div);
                comment.value=" ";
                document.querySelector
            }
            else{
                alert("댓글을 입력해 주세요");
            }
        }
    </script>
    <style>
        .commentstyle{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-5"> 그림을 본 느낌은?</h1>
        <img src="/imgs/image2.png">
        <div class="mt-5">
            <div class="input-group mb-3">
                <input type="text" id="commmentInPut" class="form-control" placeholder="댓글을 입력하세요">
                <button class="btn btn-primary" onclick="addComment()">댓글달기</button>
            </div>
        </div>
    </div>
    <hr class="mt-5">
    <div id="commentsComtainer"></div>

</body>
</html>

 

결과