STUDY/javascript29 [JavaScript] for 반복문에서 var 대신 let 사용하는 이유 보호되어 있는 글 입니다. 2024. 9. 25. [JavaScript] for 반복문 (+탭 기능) 탭 기능을 만들어 보면서 for 반복문을 배워 보자. Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc;}ul.list::after { content: ''; display: block; clear: both;}.tab-button { display: block; padding: 10px 20px 10px 20px; float: left.. 2024. 9. 25. [JavaScript] 스크롤 이벤트 스크롤 이벤트 리스너스크롤바를 조작하면 scroll 이벤트가 발생한다. scroll 이벤트 리스너를 전체 페이지에 달면 전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다.아래의 코드를 실행하면 스크롤바를 만질 때마다 '안녕'이 출력된다.window.addEventListener('scroll', function(){ console.log('안녕')}); (참고) window, document는 전체 페이지를 의미한다. window가 약간 더 큰 개념인데, scroll 이벤트 리스너는 관습적으로 window에 붙임. 스크롤 관련 유용한 기능들1. scrollY() (= pageYOffset)window.addEventListener('scroll', function(){ console... 2024. 9. 24. [JavaScript] 함수의 return 문법 & 소수 다루기 함수 function 문법- 긴 코드를 짧게 축약해서 쓸 수 있고,- 파라미터로 기능 업그레이드도 가능하다.- 오늘 배울 return을 쓰면 함수를 쓰고나서 원하는 값을 그 자리에 퉤 뱉을 수도 있다. 함수 안에서 쓸 수 있는 return 문법함수 안에서 return이라는 문법을 사용할 수 있다.return 오른쪽에 아무거나 적으면 함수가 실행되고 난 자리에 return 오른쪽에 있던 값이 남는다.function 함수(){ return 123}console.log(함수());진짜인지 확안하기 위해 함수() 실행하고 나서 123을 남기라고 적었다.출력해 보니 진짜 123이 출력된다.이렇게 함수() 실행하고 나서 그 자리에 뭔가 결과를 남기고 싶으면 return 문법을 쓰면 된다. function 함수.. 2024. 9. 23. [JavaScript] 캐러셀(이미지 슬라이드) 만들기 보호되어 있는 글 입니다. 2024. 9. 23. [JavaScript] 정규식, 이메일 형식 검증해 보기 에 입력한 값이 이메일 형식이 맞는지 검사하려면 어떻게 해야 할지 알아보자. .includes()문자열이나 배열에 특정 값이 포함되어 있는 확인하는데 사용되는 메서드. 1. 문자열에서의 .includes()string.includes(substring, start);substring : 찾고자 하는 부분 문자열.start(선택 사항) : 검색을 시작할 위치. 기본값은 0.const sentence = "안녕하세요, 만나서 반갑습니다.";// '안녕'라는 단어가 포함되어 있는지 확인console.log(sentence.includes("안녕")); // true// '헬로'라는 단어가 포함되어 있는지 확인console.log(sentence.includes("헬로")); // false// 인덱스 10.. 2024. 9. 6. [JavaScript] setTimeout(), setInterval(), clearTimeout() 타이머 주는 법 setTimeout()지정된 시간이 지난 후 한 번 실행되는 타이머를 설정하는 함수. 지정된 시간이 지나면 전달된 함수가 실행된다.setTimeout(function(){ 실행할 코드 }, delay)function(){} : 지연 시간 지나면 실행할 함수delay : 지연 시간 (밀리초 단위, 1000ms = 1초)setTimeout(function(){ console.log('안녕');}, 1000)위 코드는 1초(1000ms) 후에 콘솔에 '안녕'이라는 메시지를 출력한다. 5초 이내 구매시 사은품 증정!위 코드는 페이지 방문시 5초 후에 '5초 이내 구매시 사은품 증정'이라는 메시지가 사라진다. clearTimeout()setTimeout()으로 설정한 타이머를 취소할 때 사용되는 함수.즉.. 2024. 9. 6. [JavaScript] 변수 문법 변수 문법var 변수명 = 넣을 값; 자료를 잠깐 저장하고 싶으면 변수 문법을 사용한다. var age = '20';var name = 'kim';console.log(age); // 20 출력console.log(name); // kim 출력문자, 숫자 외에도 거의 모든 걸 다 집어 넣을 수 있다. document.getElementById()도 변수에 넣어 사용할 수 있다.영어로 작명시에는 함수를 작명하듯 camelCase로 하면 된다. 변수 문법을 사용하는 이유1. 길고 복잡한 자료가 있을 때 변수에 저장해서 사용하면 편리하다.예를 들어 사이트를 만드는데 '안녕하세요. 반갑습니다. 오랜만입니다.'라는 인삿말이 매우 자주 필요하다고 가정해 보자.var 인삿말 = '안녕하세요. 반갑습니다. 오랜만입.. 2024. 8. 26. [JavaScript] input, change 이벤트와 and, or 연산자 input 이벤트와 change 이벤트 태그에서 발생하는 input 이벤트와 change 이벤트가 있다. 안에 입력할 때 발생하는 이벤트들이다. document.getElementById('email').addEventListener('input', function(){ console.log('안녕')});▲ 에 입력된 값이 변경될 때 input 이벤트가 발생한다. 에 값을 입력할 때마다 콘솔창에 안녕이 출력된다.document.getElementById('email').addEventListener('change', function(){ console.log('안녕');});▲ 에 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생한다. 에 값을 입력하고 커서를 다른 곳에.. 2024. 8. 26. [JavaScript] <form>, 조건문(if/if else/else if) 과 기능을 만들면서 조건문을 배워 보자. 로그인하세요 전송 닫기 Bootstrap을 이용해서 모달창 안에 을 만들었다.그리고 같은 폴더에 success.html 파일을 하나 만들어 '전송 완료' 이라는 내용을 넣었다.은 서버로 유저 정보를 전송하려고 사용한다. action="url"에 작성한 url로 폼 데이터가 전송된다.(현재 서버가 없기 때문에 로컬에 파일, success.html 을 만든 것) (주의) 안의 은 전송 버튼은 type="submit"으로 그 외.. 2024. 8. 26. [JavaScript] UI 애니메이션 🌱 들어가기 전에버튼을 누르면 모달창을 띄워 보자.로그인 로그인하세요 닫기 .black-bg { display: none; width : 100%; height : 100%; padding: 30px; background : rgba(0,0,0,0.5); position : fixed; top: 0; left: 0; z-index : 5; }.white-bg { padding: 30px; border-radius: 5px; background: #fff;}.show-modal {display: block;}class 부착식으로 만들기 위해 모달창에 display:none을 추가하고 show-mo.. 2024. 8. 26. [JavaScript] jQuery 사용법 자바스크립트는 코드가 매우 길고 복잡한 특징이 있다. 그래서 html 조작을 쉽게 바꿔 주는 라이브러리들을 사용할 수 있다. React, Vue, jQuery 등이 html 조작을 쉽게 바꿔 주는 라이브러리들이다. React, Vue는 자바스크립트 문법을 어느 정도 알아야 사용 가능하기 때문에 우선 jQuery를 사용해 보자.jQuery는 언어가 아니라 라이브러리일 뿐으로 자바스크립트랑 다른 문법을 쓰는 것이 아니라 함수명, 셀럭터 이름들을 짧게 바꿔 주는 것이다. jQuery 설치구글에 jQuery cdn 검색하면 나오는 사이트(https://releases.jquery.com/)에서 jQuery 3.x 버전 이제 jQuery 설치한 곳 하단에서 jQuery 문법을 사용할 수 있다.(거의 모든 .. 2024. 8. 26. 이전 1 2 3 다음
