본문 바로가기

javascript🪓28

앵귤러 이벤트 전파 막기 한 영역 클릭시 모달이 2개 뜰때 (빈부분 영역 클릭과 / 버튼클릭시 나오는 모달이 다름) e.stopPropagation() 과 toPromise(); 로 이벤트 전파 막기 가능 async openScheduleModal(e: Event) { e.stopPropagation() const dialogRef = this.dialog.open(ScheduleDetailModalComponent, { panelClass: ['reed-modal', 'schedule-detail-panel'], autoFocus: false, }); const closeRes = await dialogRef.afterClosed().toPromise(); } async openScheduleWriteModal() { cons.. 2023. 11. 22.

드롭다운 카테고리 선택시 하위카테고리 (앵귤러) 대분류 카테고리 만들기 categoryList 변수안에 2중 배열을 만든다. categoryList = [ { category : 'IT', children : [ {name: '기획'}, {name: '디자인'}, {name: '개발'}, {name: '데이터사이언스'}, {name: '마케팅'}, ], }, { category : '어학', children : [ {name: '회화'}, {name: '작문'}, {name: '자격증'}, {name: '언어교환'}, ], }, ] for문을 돌릴 위치에 배열을 만든 categoryList 를 categorylistbig 으로 받아와 대분류인 category에 접근 {{categorylistbig.category}} 이때 클릭이벤트를 걸어 클릭시 해당.. 2023. 11. 22.

Animate.css 활용 fadeIn효과 걸기 기존 제이쿼리로 fade - in, out 을 걸었던 방법과는 다르게 , animate 사이트에 나온 자바스크립트를 활용해 효과주기 text 를 페이드인 으로 나오게 한다 https://animate.style/ 적용방법은 2가지 install 로 설치하거나 CDN 로 링크삽입 작성중인 html.index 파일에 link 태그로 CDN 방식 추가 사이트 안내를 보고 자바스크립에도 적용 //텍스트박스 에니메이션 적용 const currentSlice = slides[currentIndex]; const textBox = currentSlice.querySelector('.text-box'); textBox.classList.add('animate__animated', 'animate__fadeIn'); /.. 2023. 10. 23.

자바스크립트로 슬라이드 인디케이터 indicator 구현하기 (active or forEach) 아래에 indecator 요소를 넣어 하나 선택시 상태값이 바뀌게 한다. 예시로 빨갛게 색이 바뀌게 적용 기본 html 코드를 적어준후 scss로 자리잡아주기 &.active 로 색상값을 변경하고 자바스크립트로 css 요소에 접근한다 .slide_pagination { @include flex-row(); gap: 15px; position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); li { width: 7px; height: 7px; border-radius: 50%; background-color: #fff; &.active { background-color: red; } } } 자바스크립트로 요소 선택 //인디케이터 요소 선.. 2023. 10. 23.

자바스크립트로 자동 슬라이드 구현하기 (querySelector / setInterval) copy 사이트 hb paper html / css 영역 display flex 를 이용 슬라이드 박스안에 슬라이드들을 배치해 가로로 배치해준다 전체 박스를 만들어 overflow:hidden 을 사용해 슬라이드 영역을 가려주고 윈도우 창에 꽉 차게 배치 html 그 소중한 가치를 알기에 우리는 돌아가려고 합니다. 자연으로, 스마트하게 그 소중한 가치를 알기에 우리는 돌아가려고 합니다. 2 그 소중한 가치를 알기에 우리는 돌아가려고 합니다. 3 css .main-slide { width: 100%; height: 100%; overflow: hidden; position: fixed; .slide-box { height: 100%; width: 100%; display: flex; position: re.. 2023. 10. 18.

function 이란? function? -프로그램을 하는 가장 기본적인 building block -subprogram 이라고 불리며 재사용이 가능하다 -한가지의 작업이나 어떤값(value)을 계산하기 위해 쓰임 사용법 function 함수이름(파라미터1, 파라미터2) { 내용 } 리턴; 하나의 function은 === 한가지일만 한다. 함수이름 작성법 변수는 명사로 함수는 동사로 (doSomething) 함수는 object 이다. 1. 변수에 할당이 2. function 에 파라미터로 전달 3. 리턴값으로도 리턴 1. function function 으로 printHello함수를 만들고 그 함수를 리턴한다. function printHello() { console.log('hello'); } printHello(); 2. .. 2023. 9. 5.

자바스크립트 헷갈리는 논리연산자 : || (or) $$ (and) !(not) 6. logical(논리) operators : || (or) $$ (and) !(not) 1. or : 3중에 1개 라도 true 면 true 리턴 const value1 = false; const value2 = 4 < 2; // 4가 2보다 작다? 틀리므로 false console.log(`or: ${value1 || value2 || check()}`); //여기서 check 함수는 리턴값인 true를 리턴한다. //value1 or value2 or check 중 하나라도 true 라면 true로 계산이 되는 연산자 function check() { for (let i = 0; i < 10; i++) { //시간을 잡아먹지만 결국 리턴값인 true 를 반환해줘 console.log('🤬'); }.. 2023. 8. 30.

변수가 저장되는 방법 variable types (primitive or object) primitive > single item : numver, string, boolean , null , undefined , symbol object > box container (일상생활에서 볼 수 있는 물건 물체등을 대표하는 박스형태) primitive 타입과 object 의 타입이 메모리에 저장되는 형태 primitive type let name = 'ellie'; // name이란 변수에 ellie 선언 name = 'hello'; // 변수 재할당 console.log('name: ', name); // name = hello 가됨 값 자체가 메모리에 저장됨 object type const ellie = { name: 'ellie', age: 20 }; //이 ellie 는 const 로 지정.. 2023. 8. 29.

자바스크립트 변수선언 : let vs var / const variavle 변수 > 변경될 수 있는값 - read / write = 메모리에 저장되어 쓰고 읽는것 가능 - 변수를 선언하고 재 할당이 가능하다. 변수의 global scope 와 block scope let 의 global scope - 실행시 처음부터 끝까지 메모리 사용 let name = 'ellie'; // name이란 변수에 ellie 선언 name = 'hello'; // 변수name에 hello 재할당 console.log('name: ', name); // 확인시 name = hello 가됨 let 의 block scope {} - 블럭안의 코드 작성시 블럭밖에선 블럭안의 내용을 읽지못함 (블럭밖에서 작성된 코드들은 global scope 로 어디서나 접근 가능) { let name2 .. 2023. 8. 29.

자바스크립트 작성시 .은 무엇을 뜻할까 ? . 은 자바스크립트에서 접근 연산자이다. 즉 아래 명령어는 console.log('접근연산자란?'); console안에 . 으로 log 에 접근한다 라고 해석된다. 2023. 4. 6.

onclick 이벤트와 getElementById 함수 실습 객체를 이용해서 이벤트를 실행하는 사용자의 행위 함수는 객체가 실행하는 실행문 버튼 클릭시 next 버튼 이미지가 다음으로, prev 버튼클릭시 이미지가 이전으로 html 로 바로 이벤트를 걸어 실행시켜보자. button 에 클릭 이벤트를 걸어 return 함수로 next, prev 함수명을 각각 실행시키자. 스크립트 문에 함수 입력 // 변수설정 var num = 1; /* 함수 next()설정 1. 변수 num이 1씩 증가 (단, num이 7보다 커지면 다시 1) 2. #gallery의 src 속성 중 속성값의 일부를 변경 */ function next() { // num이 1씩 증가 (아직은 변수에만 반영) num++; // 7다음에는 다시 1이된다 if (num > 7) num = 1; // 아이.. 2022. 12. 28.

내장객체 실습 내장객체의 종류 Date 객체 날짜와 시간에 대한 정보를 얻거나 설정 getDate는 날짜 getDay는 요일 Math 객체 수학 연산을 위한 객체 Math.random() 형식을 주로 사용 Date 객체 실습 자동완성 기능으로 오늘의 날짜에 해당하는 이미지를 가져와보자. 내장객체는 컴퓨터에 내장된 기본객체를 뜻한다 시간. 날짜 . 요일 을 인터넷에 연결하지않아도 컴퓨터에 내장된 시스템을 자동으로 불러올수있다. // 새로운날짜 today 변수지정 var today = new Date(); 내가 today란 변수를 만들어 날짜 내장객체인 Date를 담는다. // nowDay에 today의 요일을 대입 var nowDay = today.getDay(); 내가 만든 today 변수를 또 nowDay 변수에 담.. 2022. 12. 28.

이전 1 2 3 다음

티스토리툴바