Loading [MathJax]/jax/output/CommonHTML/jax.js
본문 바로가기

Programming/JavaScript

01 Programming/JavaScript 2023. 11. 7.
Tap(for)
Tap(for) 탭은 이런걸 말하는거다. 새 HTML에 부트스트랩과 Jquery만 남겨놓고 Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 이렇게 집어넣어고 일단 시작하자. 참고로 JS가 너무 길면 다음과 같이 파일로 따로 뺄 수 있다 그런데 필자는 저렇게 바로 js파일이 안먹어서 "/tap.js"를 사용했다. 아무튼 첫 번째 버튼을 클릭하면 위에 오렌지 표식이 나면서 해당하는 content를 띄우는 JS는 $('.tab-button').eq(0).on('click', function(){ (′.tab−button′).removeClass(′orange′);('.tab-button').eq(0).addClass..
02 Programming/JavaScript 2023. 11. 7.
Scroll
Scroll 아이디어: 스크롤바 100px누르면 상단에 고정된 글씨 작게만들기 우선 스크롤 생성을 위해 JS 직전 부분에 아래의 코드를 생성한다 css에 navbar 관련 내용을 추가한다. .navbar { position: fixed; /*이러면 스크롤 내려도 상단고정*/ width:100%; /*앞 or 뒤로 보내기*/ z-index: 5; } .navbar-brand { font-size: 30px; transition: all 1s; } 스크롤 관련 조작은 다음과 같다. window.addEventListener('scroll', function(){ console.log('안녕') }); 스크롤한 만큼 안녕 출력하기 window.addEventListener('scroll', function(){ conso..
03 Programming/JavaScript 2023. 11. 7.
Regular Expression(정규식), 캐러셀, toFixed, parseFloat
Regular Expression(정규식), 캐러셀, toFixed, parseFloat '문자'.includes('찾을단어') 'abc'.includes('a') 사실 이렇게만 하면 문자 검사는 가능하다. 이러면 True, False를 출력한다. 그러나 이건 단순이 존재여부를 검증하는 용도이다. 그래서 정규식(Regular Expression) / / 을 쓴다. /a/.test('abcde') a가 'abcde'에 있는지를 판별하는 코드이다. 이것만보면 includes랑 같아보이지만 /[a-z]/.test('abcde') a - z 중 아무 글자 1개가 있는지 검증하라는 의미 可 단. 대소문자 구별하니 유의! 그래서 한글은 [ㄱ-ㅎ], [ㅏ-ㅣ], 숫자는 [0-9] 이렇게 쓸 수 있다. 아무 문자 하나라도 있는지(특수기호 포함)를 판정: \S
04 Programming/JavaScript 2023. 11. 7.
JS에 if문 적용해서 로그인 창, 다크모드, time
JS에 if문 적용해서 로그인 창, 다크모드, time if (3 < 1){ console.log('안녕') } else { console.log('안녕2') } JS의 if문 문법은 이런 구조이다. and는 && or는 || 그리고 ===도 있는데 type도 같은지 비교해준다. 1과 '1'이 ==인지에 비교하면 true이지만 ===에서는 false가 나온다. (그래서 !==도 있다.) 삼육구 게임을 예로들면 function 삼육구(N) { if (N % 9 == 0) { console.log('박수 박수') } else if (N % 3 == 0) { console.log('박수') } else { console.log('통과'); } } 삼육구(숫자) 입력시 3의 배수에 대하여 실행된다. 그러면 기존에 만든 것에 대하여 로그인하세요 전송 닫기 Shirt ..
05 Programming/JavaScript 2023. 11. 3.
bootstrap이용한 서브메뉴, classList, jQuery
bootstrap이용한 서브메뉴, classList, jQuery bootstrap: css, html, js 디자인을 편하게 쓰기 위한 라이브러리 https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 여기 아래에 start templete를 통쨰로 복사에서 새 html에 붙여넣고 시작해보자. 가령 버튼이 필요하면 사이트에서 button을 검색하면 각종 디자인이 나온다. 이를 body안에 넣..
06 Programming/JavaScript 2023. 11. 3.
기본 JS 및 동적 UI 만들기
기본 JS 및 동적 UI 만들기 JS는 playdata와 관계없이 혼자 공부하는 내용이 기록될 카테고리입니다. JavaScript(JS) 쓰는 가장 중요한 이유: HTML 조작 可 환경 구축하기: 1.VS code에서 extension에 live server 설치하여 실행결과 띄우도록 설정 2. JS전용 폴더 만들고 그 안에서 index.html 설정. 3. index.html에서 html:5 입력및 선택시 자동으로 기본 템플릿 형성 index.html에 html:5를 선택하면 이렇게 기본 템플릿이 자동으로 형성된다. 안녕하세요 JS 초보예요 innerHTML은 기존에 h1에 작성된 내용을 변경하는 목적으로 쓰인다. fontsize와 color와 같은 css요소는 style을 통해 연결하여 변경한다. 이를 실행하면?
728x90
반응형

티스토리툴바