코딩애플 / Javascript (기초)

 

 

 

 

 

 

 

※ 강의 무료분만 필기하였습니다. (유료분 필기는 비공개)

 

 

 

 

document.getElementById('hi').innerHTML='자스고수에요';

       //문서의~바꿀요소(셀렉터라고 부름)~무엇을 = 어떻게

 

 

 

//폰트사이즈 16px로 줄여오기

       document.getElementById('hi').style.fontSize = '16px';

 

 

 

 

- 이렇게 onclick 안에다가도 자스를 짤수 있다

<button onclick="document.getElementById('alert-box').style.display='block'">버튼</button>

 

 

 

- 셀렉터 of null : 셀렉터 아이디나 클래스 오타

 

 

 

- 파라미터넣는건 함수에 구멍을 뚫는것

 

 

- 기능이 비슷한 함수가 많다면 가변적인 부분을 구멍을 뚫어 파라미터로 놓기

 

 

 

- 파라미터 넣기 연습

    <div id="alert-box" class="alert">
        알림창임
    <button onclick="닫기('none')">닫기</button>
    </div>

    <button onclick="열기('block','아이디를 입력하세요')">버튼1</button>
    <!-- 아이디를 입력하세요 -->
    <button onclick="열기('block','비번을 입력하세요')">버튼2</button> 
    <!-- 비번을 입력하세요 -->
    
    

    <script>

        
        function 열기(구멍,구멍2){
            document.getElementById('alert-box').style.display=구멍;
            document.getElementById('alert-box').innerHTML=구멍2;
        }
        
        열기(구멍,구멍2);


        function 닫기(){
            document.getElementById('alert-box').style.display='none';
        }

 

 

 

 

 

- className이 중복이면 [0] 이런식으로 인덱스 번호로 찾는다

 

 

- addEventListener는 인자가 두개. ('click',함수(){})

 

 

- 콜백함수 : 파라미터자리에 들어가는 함수. 순차적 진행을 원할때

 

 

- 쿼리셀렉터는 맨위에 나오는 애 한개만 찾아줌

 

 

 

 

<제이쿼리>

 

- 제이쿼리는 라이브러리다 (사용하면 함수명 짧게 만들기 가능)

 

- $는 쿼리셀렉터,쿼리셀렉터올이랑 같은 애다