[TIL 2nd] 나도 조가 생겼다 + Javascript와 JQuery활용하기
by 노실언니Java와 Javascript의 상관성 → 인도와 인도네시아, 햄과 햄스터 (...)
어제 내가 심하게 헤맸던게 맞다.
오늘 새로 조편성을 받고 온보딩교육을 다시 받았다.
내가 속하게 된 7조는 어제말고 오늘부터 합류하신 분들로 구성되었다.
7조 팀 노션을 만들고, 자신을 소개할 수 있는 섹션도 만들고, 다같이 모여서 오늘 어떤 공부를 할 지/했는지 이야기도 했다.
어색어색이었지만 어찌저찌 굴러감 v
CSS코드를 html 파일에 작성하려면, <style> 태그 안에 작성하면 되듯이
Javascript코드를 html 파일에 작성하려면 <script> 태그 안에 작성하면 된다.
오늘은 기존에 만들어뒀던 추억앨범과 스파르타플릭스에 Javascript를 끼얹어서
① 특정 버튼을 누르면, 특정 박스가 접혔다가 펴졌다가 하도록 만드는 법과
② input 박스에 값을 기입하고 특정 버튼을 누르면, 기입한 값이 반영된 새로운 박스가 추가되도록 만드는 법을 배웠다.
Javascript(웹기초2주차)부터는 완전 처음이다.
아무 것도 모르는 채로 강의만 줄줄 따라가다보니 작품이 만들어지긴 하는데, 바로바로 까먹는 느낌이다.
TIL 쓰는 규칙에 조금 어긋날지도 모르겠지만, 복습 겸 오늘 배웠던 내용을 정리해보려고 한다.
배운 내용 1 ─ Javascript
- console 에 □ 출력하기 → console.log(값이나 변수) ;
- 함수 만들기 → function 함수명 (파라미터 ) { · · · ; }
- 변수 선언 → let 변수명 = value ;
- 리스트 → let 변수명 = [ val1, val2, val3, · · · ] ;
- 원소 | 변수명 [ Index ]
- 딕셔너리 → let 변수명 = { key1:val1, key2:val2, · · · };
- 원소 | 변수명[ key ]
- 리스트 → let 변수명 = [ val1, val2, val3, · · · ] ;
- 문자열을 특정 문자를 기준으로 반으로 나누어 리스트로 반환하려면 → 문자열 .split('기준문자 ')
- 예 | "abcdefg".split('d') → ["abc", "efg"]
- 예 | "abcdefg".split('d')[1].split('f') → ['e', 'g']
- 조건문 → if (조건) { · · · ; } else { · · · ; }
- 리스트 반복문 → 리스트.forEach( (변수) => { 반복해야 할 명령모음 ; } )
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})- 알림 메세지 띄우기 → alert("메세지내용");
- 버튼을 클릭하는 경우 특정 함수 실행하기 → html영역에서 <button> 의 attribute 인 onclick 설정
- <button onclick="함수명()"> 버튼 내용 </button>
- CSS가 아닌 Javascript 로도 HTML 요소의 내용이나 스타일을 변경할 수 있다.
- document.getElementById('셀렉하고 싶은 요소의 id ').style.color = 'tomato' ;
배운 내용 2 ─ JQuery
JQuery 란 Javascript library ; 미리 작성해둔 Javascript 코드집합들이며, <head> 에서 import하여 사용한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>좋은 글 - 제이쿼리(jQuery)를 아직도 사용하나요? - 제이쿼리의 현재와 미래
- 특정 HTML 요소에 코드 추가 → $('ID').append(`코드`) ;
- `는 백틱
- 코드 내용에 변수를 사용하고 싶은 경우 → ${변수명 }
버튼을 클릭할 때마다, 특정 box element가 열리고 닫히는 기능 구현하기
- JQuery 임포트했는지 체크
- 특정 box를 열고 닫는 함수정의 | 구체적인 구현은 JQuery를 사용
- function openclose () { □ }
- $('#열고 닫을 box의 ID').toggle() ;
- 버튼 클릭 시, 특정 box를 열고 닫는 함수를 호출하도록 설정
- <button onclick="openclose()"> 버튼 내용 </button>
input box에 내용을 기입하고 버튼을 클릭하면, 그 내용대로 새로운 box를 생성하는 기능 구현하기
- JQuery 임포트했는지 체크
- 기존 box들의 컨테이너에, input대로 새로운 box를 생성하는 html코드를 이어붙이는 함수 정의
- function newBox() { □ }
- let 임시변수명 = $('#input element의 ID').val() ;
- let newBox_html = ` · · · <input값을 기입해야하는 요소>${ 임시변수명 } </tag> · · · ` ;
- $('#기존 box들의 컨테이너요소의 ID').append(newBox_html) ;
- 버튼 클릭 시, 위 함수를 호출하도록 설정
- <button onclick="openclose()"> 버튼 내용 </button>
끝
반응형
'Today I Learned' 카테고리의 다른 글
| [TIL 6th] SQL 완강-빠르게 핥은 SQL / 애증의 group by (1) | 2024.12.12 |
|---|---|
| [TIL 5th] 웹개발종합반 완강/오타와 배포는 괴로워 (2) | 2024.11.29 |
| [TIL 4th] 웹개발종합반 3주차의 과제를 해보았다 (0) | 2024.11.22 |
| [TIL 3rd] 실제 기상청 Open API를 사용해보았다 (1) | 2024.11.21 |
| [TIL 1st] 내배캠 사전캠프 미션 ─ 스타터 노트 (2) | 2024.11.19 |
블로그의 정보
노력하는 실버티어
노실언니