그날의 공부기록

seokachu's Front-End Archive 🙂

🐶 etc/2022기록

// 2. 이 코드는 Iframe Player API를 비동기적으로 로드한다. !!필수!! var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. API 코드를 다운로드 받은 다음에 을 생성하는 기능 (youtube player도 더불어) var player; function onYouTubeIframeAPIReady() { player = new YT.Player..

2024. 1. 13.

🐶 etc/2022기록

a태그의 경우 href와 target 속성이 있어 편하게 외부 파일을 링크할 수있지만 a 태그를 제외하고 button,div등 href 속성이 없는 태그는 인라인 자바스크립트 외부 파일을 링크해야만 한다. location.href 또는, window.open 모두 사용할 수있다. → 새탭으로 외부파일을 띄울때는 window.open을 사용한다 _self 라는 부분을 넣지 않으면 기본적으로 새 탭으로 외부파일이 열린다. 현재 탭에서 띄울때 _self를 넣어줘야 함. 인라인 자바스크립트로 이전 페이지로 이동하기 history.go(-1); → 이전페이지 (한단계 뒤로 이동) history.go(-2); → 두단계 전 페이지로 이동 history.back(); → history.go(-1)과 동일 histor..

2023. 10. 17.

🐶 etc/2022기록

/* 탭메뉴를 클릭하면 관련 내용이 나타나고 하이라이트 배경이 활성화된 메뉴위치로 이동합니다. */ // javascript 사용버전 const tabMenu = document.querySelectorAll('.tab-menu li'); const tabContent = document.querySelectorAll('#tab-content > div'); const highLight = document.querySelector('.highlight'); //클래스명 추가&삭제 /* 클래스명 제어 대상.classList.add('클래스명'); 대상.classList.remove('클래스명'); */ /* 요소의 위치를 찾아내는 법 대상.offsetLeft -> 가까운 부모중에 position 기본값이 ..

2023. 6. 29.

🐶 etc/2022기록

let panelQuestion = document.querySelectorAll('.panel-question'); let collapseBtn = document.getElementById('btn-collapse'); /* panelQuestion을 클릭하면 모든 panelQuestion에서 active를 제거 클릭된 그 요소에만 active 추가 for(원소배열변수 of 배열명) { 반복할 일 ; } */ console.log(panelQuestion); panelQuestion.forEach(function(item){ item.addEventListener('click',function(){ hideAll(); this.classList.add('active'); }); }); //collap..

2023. 6. 29.

🐶 etc/2022기록

var add = function(){ }//이름이 없는 함수 var add = ()=>{ } function add(x,y){ return x + y; }//이름이 있는 함수 var add = (x,y)=>{ return x + y; } let add2 = function(x,y){ return x+y; } let add3 = (x,y)=>{ return x + y; } let add3 = (x,y)=> x + y; 중괄호 줄일 수 있음, 리턴 생략가능 에로우함수에서는 이름이 꼭 있는 함수로 만들어줘야한다. 매개변수가 하나일 때는 괄호 생략 가능 let add = x=> { return x*3; } 함수내에서 바로 리턴만 있을때 중괄호 생략 가능 즉시실행함수 function(){} --> ()=>{} ..

2023. 6. 29.

🐶 etc/2022기록

백틱으로 묶기 let str1 = 'javascript'; let str2 = '기초'; // let msg = '여러분은 지금 ' + str1 + str2 + '를 학습하고 있습니다.';

2023. 6. 28.

🐶 etc/2022기록

setTimeout → 시간을 한번만 체크한다, 지정한 시간이 소진되면(timeout) 구문 실행 setTimeout(할일,시간) 할일 = function(){실제할일...} 시간 = milisecond, 1000 = 1s; ex) 4초가 지나면 경고창을 출력 //4초가 지나면 경고창을 띄운다 setTimeout(function(){ alert('4초뒤'); },4000); 멈추기 → clearTimeout //멈추기 clearTimeout(멈추려고 하는 대상의 이름); //4초가 지나면 경고창을 띄운다 let timer = setTimeout(function(){ alert('4초뒤'); },4000); //멈추기 clearTimeout(timer); 멈추려면 변수명이 필요한데 이름을 지정안해주었으므로..

2023. 6. 27.

🐶 etc/2022기록

String (문자열과 관련되어 있는 함수) charAt 인덱스번호에 해당하는 문자열 출력(공백도 포함) let str = 'hello world'; document.write(str.charAt(4)); //답 o IndexOf, Search(같은 내용) let str = 'hello world'; document.write(str.indexOf('world')); //출력 : 6 document.write(str.search('world')); //출력 : 6 찾고자하는 문자열이 몇번째에 있는지 찾아줌. 만약에 찾는 문자열이 없으면 -1로 출력 → 주소표시줄에서 실무에서 많이 사용함 concat → 문자열을 합침 let str = 'hello world' let str2 = 'welcome unive..

2023. 6. 27.

🐶 etc/2022기록

let i = 0; document.write(i+' '); i += 2; document.write(i+' '); i += 2; document.write(i+' '); i += 2; 2/4/6 let i = 0; document.write(i+' '); i += 2; document.write(i+' '); i += 2; document.write(i+' '); i += 2; for(초기문; 조건문; 증감문){ //반복할 구문 } 초기문 : 초기값을 설정한다 조건문 : 언제까지 반복할지 조건문을 설정한다 증감문 : 반복문을 수행하고 초기값을 늘리거나 줄이는 문장을 설정한다. for(let i = 0; i

2023. 6. 27.

🐶 etc/2022기록

if조건문 if(조건){ 참일 때 할일 }else{ 거짓일 때 할일 } 1과 1은 같기 때문에 두 값은 같다라고 출력됨. 1과 1은 같기 때문에 두 값은 다르다고 출력됨. 타입이 다름 //typeof(값) 타입 확인 하는법 string, number, object 중첩 조건문 → 조건문 안에 조건문 조건문의 축약 중괄호 생략가능 & if, else 생략 if,else생략은 else까지 모두 기술해야한다. 논리연산자 switch switch(조건){ case 1: 할일; case 2: 할일; case 3: 할일 break; } let number = prompt('숫자를 입력해주세요','0'); console.log(number); switch(number % 2){ case 0: alert('짝수'); ..

2023. 6. 26.