실습으로 배우는 자바스크립트 기초

웹개발로 배우는 자바스크립트 기초 - YouTube

웹개발로 배우는 자바스크립트 기초

 

1. selextor

<h2 id="hello">안녕하세요</h2>

 

document.getElementById('hello').innerHTML = '안녕';

document - 웹 문서

. - ~의, ~안에 있는

get 가져오다 elemnt html요소 byid id에 의해서 근데 id는 hello야

inner내부글자

= 웹문서 ID hello인 HTML요소 가져와 내부글자를 '안녕'으로 바꿔줘

 

document.getElementById('hello').style.color = 'red';

색상을 빨갛게 변경

 

document.getElementById('hello').??? = ???';

 

 

2. alert

web에 존재하는 ui 종류는

모달, alert, tab, 툴팁, 서브메뉴, 경고문, 캐러셀.....

=> 그냥 ui 만드는 법칙 알려 준다

만드는 법 : 1) 미리 디자인해 놓고 숨김

                   2) 버튼 누르거나 하면 보여줌

 

css로 디자인 후 display: none; -> 숨김

<button onclick="">

onclick => 클릭했을때 이안에 있는 자바스크립트를 실행해 달라

<div class="alert-box" id="alert">Alert 박스</div>

<button onclikc="document.getElementById('alert').style.display = ''block';>버튼</button>

-> style {display: block; } 으로 변경

 

+ 닫기 누르면 닫히게

<button onclikck="document.getElementById('alert').style.display = 'none';">닫기</button>

 

 

3. function1 코드 축약

코드가 너무 길어~ => function사용

 

function 작명() {

          긴 코드~~~

          긴 코드~~~

        }

 

작명();을 쓸때마다 긴코드 동작

 

function 알림창열기() {

          document.getElementById('alert').style.display = 'block';

        }

 

변경할 html이 있으면 그것 하단에 js 코딩해야한다

html을 먼저 읽어야 js 실행가능

=> <button onclik="알림창열기()">버튼</button>

 

숙제 : 버튼1과 버튼2 각각 만들기

어려우면 <button onclick="1. 저거제목바꾸기 2. 알림창열기"> 한글부터 짜고 js로 번역하기

 

unction 알림창1열기() {

      1. 제목바꾸기

          document.getElementById('title').innerHTML = '아이디 입력하세요';

      2. 열기

          documentgetElementByEd('alert').style.display = 'block';

       }

function 알림창2열기() {

      1. 제목바꾸기

          document.getElementById('title').innerHTML = ' 비번 입력하세요';

      2. 열기

          documentgetElementByEd('alert').style.display = 'block';

       }

<div class="alert-box" id="alert">

        <p id="title">알림창</p>

         <button onclick="알림창('none')" class="btn_close">X</button>

      </div>

      <button onclick="아이디알림창()">버튼1</button>

      <button onclick="비밀번호알림창()">버튼2</button>

   

      <script>

        function 아이디알림창() {

          document.getElementById('alert').style.display = 'block';

          document.getElementById('title').innerHTML = '아이디를 입력해주세요.'

        }

        function 비밀번호알림창() {

          document.getElementById('alert').style.display = 'block';

          document.getElementById('title').innerHTML = '비밀번호를 입력해주세요.'

 

        }

   

        function 알림창(구멍) {

          document.getElementById('alert').style.display = 구멍;

        }

    </script>

 

4. function2 업그레이드 = 파라미터 ()안에 들은 것

function 알림창열기(구멍) {

          document.getElementById('alert').style.display = 구멍;

         }

알림창열기('block' );  ->  실행하는데 구멍에 얘 넣어줘~

알림창열기('none');

 

구멍은 여러게 콤마 로구분해 작성 가능

<div class="alert-box" id="alert">

        <p id="title">알림창</p>

         <button onclick="알림창('none')" class="btn_close">X</button>

      </div>

      <button onclick="알림창1열기('아이디입력해라')">버튼1</button>

      <button onclick="알림창1열기('비번입력해라')">버튼2</button>

   

      <script>

        function 알림창1열기(구멍) {

          document.getElementById('alert').style.display = 'block';

          document.getElementById('title').innerHTML = 구멍;

        }

    </script>

 

5. 이벤트리스너쓰면 html을 깨끗하게~

onclick 안넣어도 사용가능 : html수정 불가능 시 등등 = EventListener

<div class="alert-box" id="alert">

        <p id="title">알림창</p>

         <button id="close">X</button>

      </div>

      <button onclick="알림창1열기('아이디입력해라')">버튼1</button>

      <button onclick="알림창1열기('비번입력해라')">버튼2</button>

   

      <script>

        이벤트리스너 : 왼쪽 요소가 클릭(이벤트)이 되면 안의 코드 실행해 주세여~

        document.getElementById('close').addEventListener('click', function() {

            document.getElementById('alert').style.display = 'none';

        });

        }

    </script>

 

이벤트는 여러가지가 있어서 여러 동작 가능

something.addEventListener('mouseover', function() {

   ~~~~~}); }

=> something요소가 mosveover되면 ~~~코드 실행해줘

---

6. jQuery 빠른 기초 : 라이브러리라고 부른다

 요즘은 React를 자주 쓴다 하지만 제이커리로 개발된게 다수 존재

 

파일 다운받아 js파일경로를 삽입

jquery cdn : js파일경로 그대로 삽입

 

html은 위에서부터 한줄씩 읽어드리므로 body끝나기 전에 넣는게 이상적이다

 

자바스크립트 함수를 보다 간결하게 작성할 수 있도록 해준다

---

아직 배우지 않아 6번내용은 잘 모르겠지만

윗부분의 내용은 들어본것 같은데 실전으로 사용해보니 어버버 하고 더 햇갈리는 것 같다....

어떤식으로 공부해야할지 방향을 잘 못잡겠다..ㅜ

---

https://velog.io/@dawnrose/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

자바스크립트 기초 (1)

같은 영상을 정리해둔 브이로그