JavaScript -1

 

 

 

 

 

 

■ JavaScript

 

Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주며 서버,앱 등에서 다양하게 활용되고 있는 언어이다

 

 

 

 

 

● 변수 let과 상수 const

let은 데이터의 값을 변경 가능한 변수이고 const는 데이터의 값을 변경할 수 없는 상수이며

자바와 마찬가지로 숫자 타입, 문자열 타입 등을 결합이 가능하다

        let name; // 가능
        const title; // 불가능

        let cat = "고양이";
        cat = "강아지"; // cat이라는 변수에 다른 값이 대입될 수 있다

        const user = "손흥민";
        user = "김민재"; // 값 변경이 불가능하다

 

        let num1 = 300;
        let num2 = 500;

        let sum = num1 + num2;
        console.log(sum); // 800

        const name1 = "고양이";
        const name2 = "강아지";

        const name3 = name1 + " AND " + name2;
        console.log(name3); // 고양이 AND 강아지

 

 

 

 

 

● 함수

특정 코드를 하나의 명령으로 실행할 수 있도록 해주는 기능이며, 함수는 function() 이라는 키워드를 사용하여 () 안에 파라미터를 지정해줄수 있다

       // 매개변수가 있는경우 
       function exam(num1, num2) {
            const sum = num1 + num2;
            return sum;
        }
        exam(5,35); // 40
        
        // 매개변수 없이 
        function sum() {
            let number1 = 12;
            let number2 = 34;

            console.log(number1 + number2);
        }
        sum(); // 46

 

 

 

 

 

 

● 화살표 함수

()  => { } 를 활용하여 화살표 함수를 사용할 수 있다

        let sum = (x,y) => {
            return x + y;
        }
        console.log(sum(30,70)); // 100

 

 

 

 

 

 

●객체

       const ManCity = {
            name : "홀란드",
            position : "공격수",
            team : "맨시티"
       };

      function info(epl) {
            const result = `${epl.team} ${epl.position} ${epl.name}입니다.`;
            console.log(result); // 맨시티 공격수 홀란드입니다.
       }
       info(ManCity);

 

 

 

 

---

 

 

● Document

DOM(Document Object Model)은 문서 객체 모델이라고 하며 document는  HTML 문서를 Javascript에서 접근할 수 있도록 해준다

 

• getElementById() : 해당 아이디를 가진 요소를 선택해서 객체로 가져온다
• getElementsByTagName() : 해당 태그인 요소들을 선택해서 배열로 가져온다
• getElementsByClassName() : 해당 클래스를 가진 요소들을 선택해서 배열로 가져온다
• querySelectorAll() : 일치하는 해당 요소들을 배열로 가져온다
• querySelector() : 해당 요소의 첫번째를 가져온다

 

 

 

 

● addEventListener

addEventListener()는 특정 요소에 대한 이벤트를 처리할 때 사용되며 하나의 요소에 여러개의 이벤트를 사용할 수도 있다

        const hide = document.querySelector(".hide");
        const show = document.querySelector(".show");
        const p = document.querySelector("p");

        hide.addEventListener('click',function(){
            p.style.display = "none";
        });

        show.addEventListener('click', function(){
            p.style.display = "block";
        });

 

 

 

 

 

● classList

classList 함수를 사용하면 HTML의 요소에 class 속성을 추가,제거,변경,확인 등을 할 수 있다

classList.add	해당 요소의 클래스 속성값을 추가
classList.remove	해당 요소의 클래스 속성값을 체크하여 제거
classList.toggle	해당 요소의 클래스 속성값이 없으면 추가, 있다면 제거를 반복
classList.replace	해당 요소의 기존 클래스 이름을 변경될 이름으로 바꿔준다
classList.contains	해당 요소의 클래스의 유무를 확인하여 true 또는 false 반

 

        const btn = document.querySelector(".btn1");
        const check = document.querySelector(".checked");

        btn.addEventListener('click', function(){
            check.classList.toggle("checked");
        });

        btn.onclick = () => {
            check.classList.add("addcheck");
        }

        btn.onclick = () => {
            check.classList.remove("addcheck");
        }
        
        console.log(btn.classList.contains("btn1"));  // true

 

 

 

 

 

---

 

 

 

 

 

Today short review 

Javascript에 대해 간단히 알아보았는데 추가적으로 메소드와 이벤트 등을 잘 활용할 수 있도록 공부해볼 예정이다