javascript와 JQeury | 스파르타 코딩클럽 강의노트

일상기록/IT공부

책읽고글쓰는새댁 2022. 2. 14. 14:27

1주차에서는 HTML과 CSS로 웹페이지에 데이터를 원하는 모습으로 표현하기를 맛보았다면

2주차는 웹에서 javascirpt가 어떻게 적용되는지와 서버에 대해서 이해하는 커리큘럼이 이어진다.

웹 브라우저에서 사용하는 프로그래밍 언어 중 하나

HTML에 움직임, 반응성을 줄 수 있다

ex. 클릭 후 5초가 지난 뒤 반응하게 할것, 클릭했을 때 깜박이게 해라.

java 와 javascript는 다른 것! 인도와 인도네시아 같은 관계.

javascript는 코드가 길어 프로그래밍 시 복잡해 진다.

JQuery는 JQuery재단에서 미리 사용하기 쉽도록 자바스크립트로 작성해둔 라이브러리 중 하나이다.

프로그래밍 파일에 임포트 시키면 복잡한 javascipt 대신에 간단한 코드만으로 자바스크립트 구현이 가능하다.

위 링크 페이지 하단에 google CDN 스크립트 복사 후 html 파일 <head>태그 안에 붙혀넣기.

*부트스트랩 코드를 사용한다면 이미 부트스트랩에서 임포트 시켜 사용하고 있으므로 중복될 수 있음.

보통의 형태 ; $('#선택자 id').실행코드();

css에서 태그의 선택자로 class를 사용한 것 처럼 jQuery는 선택자로 id= "" 지칭을 해줘야 함/

(1) input 박스 값 가져오기

$('#선택자id').val();

<input id= "선택자id" ~

(2) div 숨기기/ 보이기

숨기기 : $('# div 선택자id').hide();
보이기 : $('#div 선택자id').show();

(3) CSS 가져오기

$('#선택자id').css('속성값 or 클래스값');

(4) 태그 내 텍스트 입력하기

$('#텍스트 바꿀 위치의 id값 ').text('바꿀 텍스트 입려하기');

(5) 태그 내 html 입력하기(동적 요소)

let temp_html = ``

으로 먼저 동적요소 줄 html 태그 선언해주기

$('#선택자id').append (temp_html);