티스토리

jinny

검색하기

블로그 홈

jinny

hyojinny.tistory.com/m

일상기록

구독자: 0

방명록 방문하기

주요 글 목록

앵귤러 이벤트 전파 막기 한 영역 클릭시 모달이 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.. 공감수 1 댓글수 1 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}} 이때 클릭이벤트를 걸어 클릭시 해당.. 공감수 1 댓글수 1 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'); /.. 공감수 1 댓글수 0 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; } } } 자바스크립트로 요소 선택 //인디케이터 요소 선.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 1 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. .. 공감수 0 댓글수 0 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('🤬'); }.. 공감수 0 댓글수 0 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 로 지정.. 공감수 0 댓글수 0 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 .. 공감수 0 댓글수 0 2023. 8. 29.
자바스크립트 작성시 .은 무엇을 뜻할까 ? . 은 자바스크립트에서 접근 연산자이다. 즉 아래 명령어는 console.log('접근연산자란?'); console안에 . 으로 log 에 접근한다 라고 해석된다. 공감수 0 댓글수 0 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; // 아이.. 공감수 0 댓글수 0 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 변수에 담.. 공감수 0 댓글수 0 2022. 12. 28.
객체와 메소드 객체의 종류 실행문 입력 형식 document.write('문장'); 객체.메소드('실행내용'); 누가.어떻게('무엇을'); documen는 객체 / .write 는 메소드 객체의 종류 내장객체(기본 객체) - 윈도우에 내장되어있는 객체 date와 math만 실습 (시간을 지칭, 문자를 지칭, 예 컴퓨터에 내장된 객체가 자동으로 시간을 체크) 브라우저 객체 - document, window 등 브라우저에서 쓰이는 객체 (크롬, 익스플로어 같이 브라우저 안에 내장되어있는 객체 사용자지정 객체 - 사용자가 상황에 따라 만들어내는 객체 공감수 0 댓글수 0 2022. 12. 28.
자바스크립트 false 판정 / ! false 판정 - 0, -0, '빈칸', NaN, undefined, false , null true 로 변경시 ! 사용 (반대로도 사용가능) function test() { // 서브페이지에서 실행하면 안되는 경우, 존재여부 판단하여 return if (!$('main_about .box').length) return; console.log($('main_about .box').offset().top); } test(); 빈페이지에서 스크롤을 테스트해보았다. length 가 없는 false 상태이기 때문에 아무것도 나오지 않으므로 ! 를 줘서 true 로 리턴시켜라 . 참고 : 10_파크원(스크롤애니메이션,페이드슬라이더,슬라이드내부애니메이션) 그럼 false 상태에서 top 을 찾을 수 없다고 나오지.. 공감수 0 댓글수 0 2022. 10. 27.
자바스크립트 자료형 데이터타입 / 연산자 종류 데이터형 자바스크립트란? 프로그램제작에 쓰이는 여러 데이터 기본자료형 (데이터타입) : 변수에 담을 수 있는 데이터 유형을 말한다. 1. 문자열 string 1. 문자열 string 문자를 사용할때 '' 홑따음표와 사용 ,, 쉽표로 연결 연산가능 문자열 안에 따음표를 쓸때 "test1", 'test1' 같이 내부와 외부 다른 따음표 사용가능 이스케이프 문자 활용 (한가지 따옴표로 일관되게 사용하고싶을때 따옴표 앞에 \ 입력 문자 그대로 사용) var str = '문자'; 이스케이프 문자 종류 \' 작은따옴표 \" 큰따음표 \\ 역슬래쉬 \n 줄 바꿈 \r 캐리지 리턴 \t 수평탭 \b 백 스페이스 \f 폼 피드 2. 숫자 Number 정수와 유리수의 구분 없이 숫자를 저장할수 있음 연산자를 이용해 사칙연.. 공감수 1 댓글수 1 2022. 10. 15.
자바스크립트 변수 자바스크립트 변수란? 프로그램을 만들때 필요한 데이커, 데이터를 관리하는 시스템 , 관리체계 변수 만들기 1. 변수 선언하기 데이터를 담을 변수를 만들어 이름 지정 var 변수명; 2. 변수 초기화 만들어진 변수를 데이터에 담기 변수명 = 데이터; 3. 변수의 변형과 사용 데이터 변경을 위해 데이터 바꾸기 or 추가 메서드 함수 사용 4. 프로그램 완성 완성 출력하기 예시 var num01 ; num01 = 5; var num01 = 5; console.log(num01); 명령어 변수명; 면수명 = (대입연산자) 데이터 ; 결과 num01 = 5이다 console.log(num01); 크롬출력하기 변수만들기 응용 결과값 풀이 1 var num01; num01=5; console.log(num01); 5.. 공감수 0 댓글수 0 2022. 10. 15.
자바스크립트 기본지식- 용어,문장,서식 자바스크립트란 무엇인가? 웹페이지는 3 레이어로 이루어져 있다. 1차 html 마크업 2차 css 디자인 3차 자바스크립트로 동적구현 자바의 용어 이해하기 카페라떼 만들기에 비유해보자 1. 라떼커피를 만들기 위한 재료방 - 변수 2. 커피 옵션을 계산하기 위한 계산식 - 연산식 3. 조건에 맞는 반복적인 작업문 - 제어문 4. 주문버튼 - 실행문 자바스크립트 문장 만들기 로봇에 명령하듯이 단계를 나누어 하나하나 명령해야한다. 선언식 : var main = "text" 오브젝트. 메서드 (); 오브젝트. 속성; 이때 메서드와 속성의 작성 방식이 조금 다르다. 메서드와 속성은 작성방법 메서드 객체(오브젝트) . 메서드 (); 뒤에 (); 속성 객체(오브젝트) . 속성 ; ; 문장을 끝낼땐 ; 사용 만든 문장.. 공감수 0 댓글수 0 2022. 10. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.