STUDY/javascript29 [JavaScript] classList 다루기 버튼을 누르면 등장하는 서브메뉴를 만들며 자바스크립트로 class 탈부착하는 문법을 배워 보자. Bootstrap 설치Bootstrap css 파일을 설치해 놓으면 버튼, 탭, 메뉴 같은 걸 가지고 와서 개발할 수 있다.1. Bootstrap 공식 사이트(https://getbootstrap.com/)에서 get started 버튼을 누른다.2. 우측 위에서 버진이 5.x 버전인지 확인한다.3. css 파일은 태그 안, js 파일은 태그 끝나기 전에 붙여 넣으면 설치는 끝이다. Navbar 만들기Bootstrap 사이트에 원하는 웹 UI를 검색해서 복사 붙여넣기 하면 된다.상단 메뉴 Navbar부터 만들어 보자.(index.html) Navbar 이러면 상단바 .. 2024. 8. 23. [JavaScript] EventListener, 이벤트리스너 getElementsByClassName 셀렉터테스트1테스트2이런 html 요소가 있다.셀렉터로 찾아 변경하고 싶으면 class명이 title인 것을 찾아라고 명령을 줄 수 있다. 테스트1테스트2이러면 태그 내용이 안녕으로 바뀐다.getElementsByClassName('클래스명')[순서] 이렇게 쓰면 된다. [0] 이렇게 [순서]를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아 주기 때문이다.그래서 그 중에 몇 번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여 줘야 한다.[0] : 찾은 것 중 위에서부터 1번째 요소[1] : 찾은 것 중 위에서부터 2번째 요소... (참고)getElementsByTagName (태그명으로 찾아 줌).. 2024. 8. 23. [JavaScript] function 문법, function의 파라미터 문법 자바스크립트 function 문법- function(일명 함수)라는 문법은 길고 더러운 코드를 한 단어로 축약하고 싶을 때 쓰는 문법.- 특정 기능을 다음에도 쓰기 위해 모듈화해 놓은 문법. function 함수명(){ 축약하고 싶은 긴 코드}1. function 키워드 쓰고 소괄호, 중괄호 붙인다.2. 소괄호 왼쪽에 함수명은 작명한다.3. 긴 코드를 중괄호 안에 담으면 코드 축약은 끝이다.그러면 함수명() 쓸 때마다 그 자리에 긴 코드가 실행된다. Alert 박스 코드 function으로 축약해 보기지난 포스팅에 만들었던 Alert 박스 코드를 보자. 알림창입니다. 닫기열기버튼의 onclick 안에 있는 긴 자바스크립트 코드를 함수 문법을 사용하면 짧게 축약해서 쓸 수 있다. .. 2024. 8. 23. [JavaScript] 동적 UI 만드는 법(Alert 박스 만들기) 기본적인 UI 만드는 법1. HTML/CSS로 미리 디자인(필요하면 미리 숨김)2. 버튼을 누르거나 할 경우 UI 보여 달라고 자바스크립트 코드 짜기 Alert 박스 만들기1. Alert UI 디자인작업 폴더에 main.css 파일 생성 후 index.html 태그 안에 첨부(index.html)알림창입니다.(main.css)#alert-box { display: none; padding: 20px; border-radius: 5px; color: #fff; background-color: #87ceeb;}UI를 평소에 숨기고 싶으면 display: none, 다시 보여 주고 싶으면 display: block 넣으면 된다.visiblity: hidden도 있다. 2. .. 2024. 8. 23. [JavaScript] 자바스크립트, 개발 환경 세팅 🌱 개발 환경 세팅0. 에디터 설치 (VS Code 사용)1. 작업 폴더 생성 후 에디터에서 [파일]-[폴더 열기]로 작업 폴더 열기2. index.html 파일 만들고 코딩 시작3. html 파일 미리보기 띄우고 싶으면 VS Code 에디터에서는 왼쪽 패널 Extensions 메뉴에서 Liver Server 설치, html 파일 우클릭 - Live Server 띄우기 클릭 자바스크립트란?HTML 파일 안에 "HTML 조작과 변경"을 담당하는 언어 자바스크립트 사용하는 이유- HTML 조작 가능- 서버와 통신 가능- 클릭, 타이핑 감지- 비동기 처리- 자료 다루기 자바스크립트로 HTML 조작하는 법안녕하세요 위의 코드를 실행해 미리보기로 확인해 보면 안녕하세요였던 태그가 안녕으로 바뀌어 .. 2024. 8. 22. 이전 1 2 3 다음
