frontend -3-

728x90

자바스크립트에서는 배열이 자동으로 늘어날수 있다

자바에서는 arraylist 를 선언을 해주게 되면 입력한 값이 배열로 들어가서 늘어났지만

자바스크립트는 조금 다르다

<!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>
    
</body>
<script>
    // 자바 스크립트 객체
    const book = {
        name: "자바 스크립트 기초",
        publisher:"좋은 출판사",
        author:"작가1",
        price:20000,
        index:{
            ch1: "소개",
            ch2: "변수",
            ch3: "연산자"
        },
        date: "2024년 1월"
    }
    const book1 = {
        name: "자바 스크립트 기초",
        publisher:"좋은 출판사",
        author:"작가2",
        price:20000,
        index:{
            ch1: "소개",
            ch2: "변수",
            ch3: "연산자"
        },
        date: "2024년 1월"
    }
    const book2 = {
        name: "자바 응용",
        publisher:"좋은 출판사",
        author:"작가3",
        price:50000,
        index:{
            ch1: "소개",
            ch2: "변수",
            ch3: "연산자"
        },
        date:"2024년 1월"


    }
    const arr = [book , book1 ,book2];
    console.log(arr);
    for(let i = 0; i < arr.length; i++){
        console.log(arr[i]);
        console.log(arr[i].name);
        console.log(arr[i].index.ch1);
    }
    console.log(book);
    // 출판사 정보만 출력
    console.log(book.publisher);
    //ch2 의 value 출력
    console.log(book.index.ch2);
</script>
</html>

클릭이벤트와 함수

우리가 평소에 보는 인터넷 화면에서 클릭을 하는 이벤트를 주는 명령어(onclick)와 버튼을 만들어주는 명령어(button)

<!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>
    <h2>javascript 함수</h2>
    <!-- onclick이라고 작성한 요소에 클릭 이벤트가 발생
         했을 때 호출 할 함수 -->
    <button onclick="fun1()">fun1 함수 호출</button>
    <button onclick="fun2()">fun2 함수 호출</button>
    <button onclick="fun3()">alert 함수 호출</button>
</body>
<script>
    // fun1();
    function fun1() {
        console.log("fun1 함수 호출");
    }
    const fun2 = () => {
        console.log("fun2 함수 호출");
    }
    const fun3 = () => {
        let var1 = "alert 입니다";
        // alert("alert 입니다");
        alert(var1);
    }
    const fun4 = () => {
        let result = confirm("선택해주세요");
        console.log(result);
        if(result){
            console.log("확인 클릭");
        }else{
            console.log("취소 클릭");
        }
    }
    const fun5 = () => {
        let value = prompt("입력해보세요")
        console.log(value);
    }
</script>
</html>

이제 값을 입력하는 명령어인 input 과 버튼을 만들어주는 명령어(button) 클릭이벤트를 만들어주는 명령어(onclick)을 사용해보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        #div1{
            background-color: orange;
        }
        #div2{
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    <h2>javascript events</h2>
    <button onclick="fun1">fun1 함수</button>
    <button onclick="fun2('hello')">fun2 함수</button>
    <button onclick="fun3(this)">fun3 함수</button>

    <div id="div1" onmouseover="fun4()" onmouseout="fun5()"></div>
    <div id="div2" onmousedown="fun6()" onmouseup="fun7()"></div>

    <input type="text" onkeydown="fun8()" placeholder="입력하시죠">
    <input type="text" onkeydown="fun9()" placeholder="입력하시죠">
    <input type="text" onblur="fun10()" placeholder="입력하시죠">

</body>
<script>
    const fun1 = () =>{
        console.log("fun1함수");
    }
    const fun2 = (param1) => {
        console.log(param1);
    }
    const fun3 = (ele1) =>{
        console.log(ele1);
    }
    const fun4 = () => {
        console.log("들어왔다");
    }
    const fun5 = () => {
        console.log("나갔다");
    }
    const fun6 = () => {
        console.log("눌렀다");
    }
    const fun7 = () => {
        console.log("뗐다");
    }
    const fun8 = () => {
        console.log("키보드를 눌렀다");
    }
    const fun9 = () => {
        console.log("키보드에서 손을 뗐다");
    }
    const fun10 = () =>{
        console.log("절 떠나셨나요");
    }
    
</script>
</html>

DOM(Document Obeject Model, 문서 객체 모델)
1. html(문서)에 표현된 여러 요소들을 계층적으로 표현하고 각 요소의 속성이나 값을 javascript도 제어하기 위해 제공되는 여러 함수
2. DOM 함수를 이용하여 javascript 에서 처리한 결과를 화면에 보여줄 수도 있고 화면에 보이는 데이터를 javascript함수로 가져올 수도 있음
3. DOM api 라고 하며 document.으로 시작함

기초

<!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>
    <h2>안녕하세요</h2>
    <h2>반갑습니다</h2>
    <h2>javascript</h2>
    <h3>오늘은 목요일</h3>
    <h3>hello</h3>
    <h3>html ,css ,javascript ,재밌다</h3>
    <h4></h4>
</body>
<script>
    console.log(document);
    // 현재 문서에 있는 모든 h2 요소
    console.log(document.getElementsByTagName("h2"));
    const h2All = document.getElementsByTagName("h2");
    console.log(h2All);
    console.log(h2All.length);
    console.log(h2All[0]);
    console.log(h2All[0].innerText);
    // 반복문으로 h2 태그의 innerText 출력
    for(let i = 0; i<h2All.length; i++){
        console.log(h2All[i].innerText);
    }

    //querySelector(css 선택자 문법)
    console.log(document.querySelector("h2"));
    console.log(document.querySelectorAll("h2"));
    const h2All2 = document.querySelectorAll("h2");
    for(let i = 0; i < h2All2.length; i++){
        console.log(h2All2[i].innerText);
    }

    console.log(document.querySelectorAll("h3"));

    //h4 태그에 내용 추가 하기
    // h4 태그 가져오기
    const h4 = document.querySelector("h4");
    // h4에 innerText 값 주기
    // h4.innerText = "이 값이 보일까?"
    document.querySelector("h4").innerText = "ㅎㅎㅎㅎ";
</script>
</html>

<특정 id와 class 가 적용된 요소 가져오기>

<!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>
    <!-- id1이 적용된 h2 태그 -->
    <h2 id="id1">html</h2>
    <h2 id="id2">css</h2>
    <h2 id="id3">javascript</h2>

    <h2 class="class1">frontend</h2>
    <h2 class="class2">backend</h2>
</body>
<script>
    console.log(document.getElementsByTagName("h2"));
    console.log(document.querySelectorAll("h2"));

    // 특정 id 가 적용된 요소 가져오기
    const ele1 = document.getElementById("id1");
    const ele2 = document.querySelector("#id1");

    // 특정 class 가 적용된 요소 가져오기
    const ele3 = document.getElementsByClassName("class1");
    const ele4 = document.querySelectorAll(".class1")
</script>
</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>
    <div id="id1">
        <p>
            안녕하세요
        </p>
    </div>
    <div id="id2">

    </div>
    <div>
        <button onclick="fun1()">fun1 함수</button>
    </div>
</body>
<script>
    const id1 = document.getElementById("id1");
    console.log(id1.innerText);
    console.log(id1.innerHTML);

    const fun1 = () => {
        let output = "<h2>이게 보일까?</h2>";
        // id2.innerHTML = output;
        document.getElementById("id2").innerHTML = output;
        // id.innerText=output;
    }
</script>
</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>
    <img src="../images/고양이.jpg" width="100" height="100" id="img1" alt="">
    <button onclick="changeImg()">이미지 교체</button>
</body>
<script>
    const changeImg = () => {
        const img = document.getElementById("img1");
        // img 태그의 src 속성값 확인
        console.log(img.src);
        img.src = "../images/다운로드.png";
    }
</script>
</html>

css 제어

<!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>
    <h2 onclick="fun1()" id="id1">오늘은 목요일</h2>
</body>
<script>
    const fun1 = () => {
        const ele = document.getElementById("id1");
        // css 제어
        ele.style.color = "yellow";
        ele.style.backgroundColor = "black";
    }
</script>
</html>

기초 응용1

<!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>
    입력1: <input type="text" id="id1" name="id1" onkeyup="fun1()"> <br>
    입력2: <input type="text" id="id2" name="id2" onblur="fun2()"> <br>
    <!--입력 2에 값을 입력하고 아래 버튼을 클릭 했을때 id= result로 지정한 p 태그에 입력한 값을 출력해보기 -->
    <button onclick="fun3()">fun3함수</button>
    입력값: <p id="result"></p>
</body>
<script>
    const fun1 = () => {
       const input1 = document.getElementById("id1");
       console.log(input1.value);
       const input2 = document.querySelector('input[name="id1"]');
       console.log(input2.value);
       const inputValue = document.getElementById("id1").value;
       console.log(inputValue);
    }
    const fun2 = () => {
        const input1 = document.getElementById("id2");
        console.log(input1.value);
    }
    const fun3 = () => {
        const value = document.getElementById("id2").value;
        const p = document.getElementById("result");
        p.innerText = value;
    }
</script>
</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>
    number1: <input type="text" id="num1"> <br>
    number2: <input type="text" id="num2"> <br>
    <button onclick="cal()">계산</button> <br>
    계산결과: <input type="text" id="result">
</body>
<script>
    const cal = () => {
        const num1 = document.getElementById("num1").value;
        const num2 = document.getElementById("num2").value;
        console.log(typeof num1);
        console.log(typeof parseInt(num1));
        const sum = parseInt(num1)  + parseInt(num2);
        console.log(sum);
        const result = document.getElementById("result");
        result.value = sum;
    }
</script>
</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>
    <!-- 두 점수의 평균이 90이상 A, 80이상 B 70이상 C 나머지는 F -->
    java 점수: <input type="text" id="java"> <br>
    html 점수: <input type="text" id="html"> <br>
    학점: <input type="text" id="grade">
    <!-- 아래 h2에는 당신의 학점은 OO입니다. 로 출력 -->
    <h2 id="grade1"></h2>
    <button onclick="gradeCal()">학점계산</button>
</body>
<script>
    const gradeCal = () => {
        const java = document.getElementById("java").value;
        console.log(java.length);
        const html = document.getElementById("html").value;
        const avg = (parseInt(java) + parseInt(html)) / 2;
        let grade = "";
        if (avg >= 90) {
            grade = "A";
        } else if (avg >= 80) {
            grade = "B";
        } else if (avg >= 70) {
            grade = "C";
        } else {
            grade = "D";
        }
        const result = document.getElementById("grade");
        result.value = grade;
        document.getElementById("grade1").innerHTML =
            "당신의 학점은 " + grade + "입니다";
    }
</script>

</html>

회원가입창

<!DOCTYPE html>
<html lang="ko">

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

<body>
    <h2>회원가입</h2>
    email: <input type="text" id="email" name="email" onblur="email_check()" placeholder="이메일을 입력하세요"> <br>
    <span id="email-check"></span> <br>
    password: <input type="text" id="password" name="password" onblur="pass_check()" placeholder="비밀번호를 입력하세요"> <br>
    <span id="password-check"></span> <br>
    password 확인: <input type="text" id="password-re" name="passwordRe" onblur="pass_equal_check()" placeholder="비밀번호를 입력하세요"> <br>
    <span id="password-equal-check"></span> <br>
</body>
<script>
    const email_check = () => {
        const email = document.getElementById("email").value;
        const emailCheck = document.getElementById("email-check");
        console.log(email.length);
        /*
            글자수가 5~10 글자가 안되면 5~10글자로 입력해달라고 빨간색 출력
            5~10글자로 작성하면 좋아요 녹색 출력 
        */
        if (email.length == 0) {
            // alert("필수입력입니다!");
            emailCheck.innerHTML = "필수입력입니다!!";
            emailCheck.style.color = "red";
        } else if (email.length < 5 || email.length > 10) {
            emailCheck.innerHTML = "5~10자로 입력해주세요!!";
            emailCheck.style.color = "red";
        } else if (email.length >= 5 && email.length <= 10) {
            emailCheck.innerHTML = "좋아요";
            emailCheck.style.color = "green";
        }
    }

    const pass_equal_check = () => {
        const pass = document.getElementById("password").value;
        const passRe = document.getElementById("password-re").value;
        const result = document.getElementById("password-equal-check");
        if(pass == passRe) {
            result.innerHTML = "일치합니다!";
            result.style.color = "green";
        } else {
            result.innerHTML = "일치하지 않습니다!";
            result.style.color = "red";
        }
    }
</script>

</html>

728x90

'개발일지' 카테고리의 다른 글

SpringLegacy -2- (1)	2024.02.05
SpringLegacy(MVC) (0)	2024.02.02
frontend 2일차 (1)	2024.01.10
db 마무리 ,Frontend 시작 (1)	2024.01.09
개발일지 -db 응용- (2)	2024.01.08

나도 내가 C#을 하게 될줄은 몰랐어

frontend -3-

'개발일지' 카테고리의 다른 글

티스토리툴바

frontend -3-

'개발일지' 카테고리의 다른 글

관련글

티스토리툴바