기록장

alert () 또는 window.alert() : 사용자에게 메시지를 보여주고, 확인을 기다림alert("안녕하세요!"); // 메시지를 보여주고 확인 버튼을 기다림confirm() 또는 window.confirm() : 메세지를 보여주고 확인/취소를 누르면 불리언값으로 결과보임let result = confirm("계속하시겠습니까?"); // 확인을 누르면 true, 취소를 누르면 false 반환prompt() 또는 window.prompt() : 사용자에게 메세지를 보여주고 입력한 문자열을 리턴let name = prompt("이름을 입력해주세요:"); // 메시지를 보여주고 입력한 문자열을 반환 이렇게 반환한 t/f 값으로 다음 js를 작성해서 연계 할 수 있음! 👍👍👍

📌자바스크립트의 타입변환자바스크립트의 변수는 타입이 고정되어 있지 않음. 같은 변수에 다른 타입 값을 대입할 수 있음.let a = 10; // 숫자형a = "안녕"; // 문자열형  1. 암시적 타입 변환암시적 타입 변환: 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환해서 사용함.NaN은 '정의되지 않은 값'이나 '나타낼 수 없는 값'을 의미함.예시: 0을 0으로 나누거나, 숫자로 변환할 수 없는 연산을 시도한 경우 NaN 반환.NaN (Not a Number)2. 명시적 타입 변환자바스크립트는 자동으로 타입 변환을 수행하지만, 명시적으로 타입을 변환해야 할 때도 있음.이를 위해 사용할 수 있는 함수는 다음과 같음:[명시적 타입 변환의 종류] Number() : 문자를 숫자..

📌 자바스크립트의 특징 웹의 동적 동작을 구현하기 위한 언어웹 브라우저에서 실행되며, 서버 환경에서는 Node.js로 동작 가능HTML 문서 내에서 태그 안에 작성대소문자를 구별함 (let과 Let은 다른 변수로 인식)객체 기반의 스크립트 언어로, 다양한 객체를 활용하여 동작을 구현웹 브라우저 자바스크립트 엔진이 내장되어 있어 별도의 설정 없이 사용 가능 📌 use strict (js 작성시 최상단에 작성) 자바스크립트에서 strict mode를 사용하겠다는 선언엄격한 문법을 적용하여, 실수를 줄이고 코드 품질을 높이는 역할예: 변수 선언 없이 사용 불가, 대소문자 명확하게 구분상단에 "use strict";를 추가하여 활성화 가능use strict 없이도 코드를 작성할 수 있지만, 이를 사용하면 ..

| 방법ifream 가져올때, 아래의 해상도별 파라미터를 추가함144p: &vq=tiny240p: &vq=small360p: &vq=medium480p: &vq=large720p: &vq=hd7201080p: &vq=hd10801440p: &vq=hd14402160p (4K): &vq=hd2160  | 예시코드*loop나 playlist 파라미터는 개인적으로 넣은 부분이라 무시하셔도 됩니다// &vq=tiny ​

| 문제상황영상이 재생 되기전, 썸네일 이미지를 보여 주고 싶은데, 따로 서버에 이미지를 올리지 않고 스크립트를 쓰지않고 빠르게html과 css로만 가져오려면 어떻게 해야할지 고민중인 상황(원래 모든 영상을 내 자체 서버에 올리려고 했는데 용량이 너무 크고(30분이상의 영상 X 7), 서버가 닫히면 영상을 불러올수없는 상황이 발생하는 등의 이유로 사용을 지향하는편)   | 방법 | 전체 코드  위 처럼 일반적으로 유튜브 영상 불러오는 iframe 위에 썸네일을 불러오는 아래의해결코드 (이미지 주소)를 넣고css로..

| 방법 - 개발자 도구 (F12) - Network 탭 - 와이파이 아이콘 클릭 - Throttling (스로틀링) 설정 - 새로고침[스로틀링 종류]- Offline: 인터넷 연결이 없는 상태를 시뮬레이션.- GPRS: 매우 느린 모바일 네트워크(50kb/s)를 시뮬레이션.- Regular 2G: 일반 2G 속도.- Good 3G: 중간 정도의 3G 네트워크 속도.- Regular 4G: 빠른 4G 속도를 시뮬레이션.- DSL: 일반적인 DSL 네트워크 속도를 시뮬레이션.-  Fast 3G: 빠른 3G 속도를 시뮬레이션.

| 문제상황click이벤트를 사용한 반응형 웹페이지 제작시데스크탑에서는 정상작동하지만 갤럭시 폰에서 특정버튼에 터치이벤트가 걸리지 않음= > click touchend 를 줬더니 대부분 동자갛나, 몇개의 터치 이벤트 동작이 안됨 | 문제의 코드 $(document).ready(function () { $(".drag_box_inner_btn .box_playlist").on("click touchend ", function () { let img = $(this).find("img"); if (img.hasClass("widget_active_bgm")) { img.re..

| 목표안경 낀 고양이 외의 요소(플레이리스트, 시계, 왼쪽 사이드의 고양이들 등) 들은각 sub/ 의 html 안에서 공통적으로 쓰일 div이며,js의 script 또한 동작해야함    | 방법  1. 공통으로 넣을 div를 가진, html 파일을 만듬 (common_widget.html)⚠️ meta tag 빼고 div 알맹이만 가지는 파일이 돼야함 ⚠️ Insomnia's Room .... 그 외 div요소들 2. 공통으로 넣어질 html (common_widget.html) 파일의 css와 js를 만듬(common.css /sub_common.js)// 아래는 이해를 돕기위한, sub_comm..

| 문제상황안드로이드 폰이나 윈도우에서 의도대로 잘 나오던 높이값이,아이폰에서 (사파리,크롬)보면 자꾸 없어진 상태로 나옴 온갖 방법(flex만 주기, padding, margin, position주기...) 을 다 써본 결과flex + line-height를 주면 해결된다는걸 알게 되어서 기록...player_info { position: absolute; top: 24%!important; left: 50%; transform: translateX(-50%); width: 80%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; /* line-h..

| 문제상황제이쿼리 기본 draggable 메서드를 사용해서 화면내에서 드레그로오브젝트를 이동시키는 환경에서오브젝트를 html바깥쪽으로 이동하면 그만큼 가로세로축이 늘어나는 상황..    $(document).ready(function () { // 드래그 가능한 요소 생성 $(".draggable_clock, .draggable_bgm").draggable({ touchAction: "auto", // 터치 이벤트 활성화 grid: [10, 10], containment: 'main'// 드레그 영역 제한 }); ..