본문 바로가기
  • hello world
Language/Javascript

[JS] 자바스크립트 기초 (코딩애플 유튜브 무료강의)

by JJoajjoa 2024. 3. 28.

 

유튜브 코딩애플 수업 듣는 중

 

1. 셀렉터 사용하기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

        <h2 id="hello">hi</h2>
        <h2 id="merona">올때메로나</h2>

        <script>
            document.getElementById('hello').innerHTML = '안녕';
            document.getElementById('hello').style.color = 'red';
            document.getElementById('merona').innerHTML = '올때바밤바';
            document.getElementById('merona').style.fontSize = '30px';
        </script>

    </body>
</html>

▶ document.getElementById('어쩌구') ← 셀렉터

 

 

 

2. css 속성으로 Alert창 보이게 안보이게 하기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <div class="alert-box" id="alert"> 
            Alert 박스 
            <button onclick="document.getElementById('alert').style.display = 'none';">닫깅</button> 
        </div>
        <button onclick="document.getElementById('alert').style.display = 'block';"> 버튼! </button>

        <script>
            
        </script>

    </body>
</html>

 

 

 

3. Function 사용하기 (긴 코드 축약)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <div class="alert-box" id="alert"> Alert 박스 <button onclick="알림창닫기()">닫깅</button> </div>
    <button onclick="알림창열기()"> 버튼! </button>

    <script>

        function 알림창열기() {
            document.getElementById('alert').style.display = 'block';
        }

        function 알림창닫기() {
            document.getElementById('alert').style.display = 'none';
        }
        
    </script>

</body>

</html>

 

▶ HTML을 먼저 읽어야 JS로 조작이 가능하기 때문에 JS는 하단에 코딩해야 에러를 막을 수 있음

▼ 스크립트를 위로 올리면 콘솔창에 에러가 뜨는데, 이 에러는 'innerHTML'의 왼쪽에 있는 것이 null 이라는 뜻

▶ 자바스크립트의 요소를 잘 찾지 못했다는 뜻

 

 

 

 

4. Function 업그레이드해서 사용하기 (파라미터) 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <div class="alert-box" id="alert"> Alert 박스 <button onclick="알림창열기('none')">닫깅</button> </div>
    <button onclick="알림창열기('block')"> 버튼! </button>

    <script>

        function 알림창열기(구멍) {
            document.getElementById('alert').style.display = 구멍;
        }

        // 파라미터 예시(구멍 1개)
        function plus(구멍) {
            2 + 구멍
        }
        plus(1);
        plus(2);
        plus(3);

        // 파라미터 예시(구멍 여러개)
        function example(구멍1, 구멍2) {
            document.getElementById(구멍2) = 구멍;
        }

    </script>

</body>

</html>

▶ 함수 하나로 다양한 기능을 만들 수 있게 됨

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <div class="alert-box" id="alert"> 
        <p id="content">Alert 박스</p> 
        <button onclick="알림창닫기('none')">닫깅</button> 
    </div>

    <button onclick="알림창('아이디를 입력하세용')"> 아이디 </button>
    <button onclick="알림창('비밀번호를 입력하세용')"> 비밀번호 </button>

    <script>

        // function 아이디() {
        //     document.getElementById('content').innerHTML = "아이디를 입력하세용";
        //     document.getElementById('alert').style.display = 'block';
        // }

        // function 비밀번호() {
        //     document.getElementById('content').innerHTML = "비밀번호를 입력하세용";
        //     document.getElementById('alert').style.display = 'block';
        // }

        function 알림창(구멍) {
            document.getElementById('content').innerHTML = 구멍;
            document.getElementById('alert').style.display = 'block';
        }

        function 알림창닫기(구멍) {
            document.getElementById('alert').style.display = 구멍;
        }
        
    </script>

</body>

</html>

 

 

 

 

5. 이벤트 리스너 사용하기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <div class="alert-box" id="alert">
        <p id="content">Alert 박스</p>
        <button id="close"> X </button>
    </div>

    <button onclick="알림창('아이디를 입력하세용')"> 아이디 </button>
    <button onclick="알림창('비밀번호를 입력하세용')"> 비밀번호 </button>

    <script>

        // onclick 없애고 이벤트리스너로 닫기버튼 만들기
        document.getElementById('close').addEventListener('click', function() {
            document.getElementById('alert').style.display = 'none';
        });


        function 알림창(구멍) {
            document.getElementById('content').innerHTML = 구멍;
            document.getElementById('alert').style.display = 'block';
        }

    </script>

</body>

</html>

 

 

 

 

6. 자바스크립트를 더 짧게 쓰기위한 jQuery (라이브러리라서 설치해야함)

※ 요즘은 리액트 같은 것을 더 많이써서 제이쿼리는 잘 안씀

구글에서 jquery어쩌구.js 다운받아서 <script src="그 js 파일경로"></script> 해주면 됨

근데 설치가 귀찮으니까 구글에 jquery cdn → minified 사용해보기

 

▼ 저 빨간 화살표 눌리면 코드 뭉텅이를 뱉어줌

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <!-- 다른 사이트가 호스팅해주는 js 파일을 가져온 것-->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!-- 위치가 중요함 -->
    <!-- 헤드태그 안에도 가능하지만 HTML은 위에서부터 한줄씩 읽으니까 갑자기 이게 위에있으면 시간이 오래걸려짐 -->
    <!-- 그래서 바디태그 끝나기 바로 전이나 밑에 쓰는게 국룰 -->

    <h4 id="test"> 안뇽 </h4>
    <h5 class="test1"> 메롱 </h5>

    <script>
        // document.getElementById('test').innerHTML = '???';
        // document.querySelector('#test') // 한개밖에 못찾음
        // document.querySelectorAll('#test')[0] // 여러개는 All 해서 번호로 찾아줌
        $('#test').html('hi'); // id는 샵
        $('.test1').html('메로나'); // class는 점
        $('#test').text('hello');
        $('.test1').css('color', 'green');
        $('#test').attr('src', '어쩌구.jpg'); // 세부속성 바꾸기
    </script>
</body>

</html>

 

 

 

 

 

'Language > Javascript' 카테고리의 다른 글

[JS] <input type="radio"> 선택한 값 활용하기  (0) 2024.07.25
[JS] 상속  (0) 2024.07.25
[JS] jQuery  (0) 2023.10.23
[JS] DOM  (0) 2023.09.07
[JS] 함수  (0) 2023.09.06

관련글

티스토리툴바