📌Language/JavaScript 84

TIL) JS 조건문, 문자열, 논리연산자 not, falsy 값, concat(), indexOf(), slice(), substring(),property & method 차이

논리연산자 NOT 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환된다. !false // true !(3>2) // false !undefined // true (undefined를 false로 취급-falsy) !"hello" // false ("hello"를 true로 취급-truthy) !0; // true 기억해야 할 9가지 falsy 값 if 문에서 false로 변환되기 때문에, if 구문이 실행되지 않습니다. if (false) if (null) if (undefinded) if (0) if (-0) if (NaN) if ('') if ("") if (``) 선언과 호..

TIL) JS 기초, let vs const vs var, 함수 선언 3가지 방법, 원시형, 객체형, undefined 와 null의 차이

let 키워드와 const 키워드의 차이 const - always let - sometimes var - never const 재선언 금지, 재할당 금지 let 재선언 금지, 재할당 가능 var 재선언 가능, 재할당 가능 const a = b; const a = c; //재선언 금지 const a = b; a = c; //재할당 금지 let a = b; let a = c; //재선언 금지 let a = b; a = c; //재할당은 가능 var a = b; var a = c; a = d; //재선언, 재할당 가능 함수 선언 방법 함수 선언식 => 호이스팅에 영향을 받는다. - 선언 전에 호출되도 정상적으로 동작! (호이스팅: 자바스크립트의 특징으로, 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올..

Javascript에서API키를 숨기는 방법

아래 사이트 참고해서 해결했습니다! 👇👇👇👇👇 https://stackoverflow.com/questions/41255861/how-to-pass-variable-from-one-javascript-to-another-javascript-file How to pass variable from one Javascript to another Javascript file I tried the following, trying to pass a variable from one JavaScript file to another JavaScript variable. My first JavaScript file: var x = "sachin"; My other JavaScript file can't access tha..

javascript로 html body 요소 찾기, 추가하기 // js에서 linear-gradient 사용하기

오늘은 javascript로 html 안에 있는 body 요소를 찾고 추가하는 방법에 대한 포스팅입니다. 나의 목표! html에 있는 버튼을 누르면 js에 쓴 함수인 function 실행하고 이걸 html에 넣기! 1. html 요소를 가져오자. 나는 html - body - button을 가져올겁니다. const button = document.querySelector("button"); // html의 button을 불러오고, 이걸 js에서 button이라고 부를거야! const body = document.querySelector("body"); // html의 body을 불러오고, 이걸 js에서 body라고 부를거야! 2. js에 button을 누르면 기능이 나타나게 하자. button.addEv..

자바스크립트로 만드는 디데이 카운트다운 페이지 만들기

어린이날을 기준으로 카운트다운 웹페이지를 만들어봤어요! const clockTitle = document.querySelector(".js-clock"); function getClock() { const dday = new Date("December 25, 22 00:00:00").getTime(); const today = new Date().getTime(); const gap = dday - today; console.log(gap); const day = Math.floor(gap / (1000 * 60 * 60 * 24)); const hour = String(Math.floor((gap / (1000 * 60 * 60)) % 24)).padStart( 2, "0"); const min = S..

visual studio code 설치 없이 코드 짜기, 핸드폰으로 코딩하기, 코딩할 수 있는 사이트 추천

항상 컴퓨터로만 코드를 짜보다가 문득 자기 전에 생각난 코드가 있다면 여러분들은 어떻게 하시나요? 메모장에 저장해두고 컴퓨터 앞에 앉으면 그때 가서 실현해본다. 그냥 기억만 잘 하려고 노력한다. ...!! 해보고 싶어서 안달난다. 저 같은 경우에는 시작한지 얼마안되기도 하고, 지금 쉽고 재밌는걸 배워서 그런지 1번인 상태입니다. 그래서 이리저리 검색하다가 핸드폰으로 코딩할 수 있는 사이트를 발견해서 공유하고자 합니다. https://codepen.io/pen/?editors=0011 Create a New Pen ... codepen.io 이 사이트는 로그인할 필요없이 바로 사용가능합니다! 저는 현재 할 줄 아는 언어가 자바스크립트인데 자바스크립도 문제없이 잘 구현됩니다. 다음으로 소개할 사이트는 vis..

DOM 이벤트 참조 사이트 & Mouse event 참조

DOM 이벤트 참조 사이트! https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org Mouse event의 종류는 위와 같다. (출처: https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events) auxclick: 이 이벤트는 마우스 왼쪽버튼을 제외한 다른 버튼을 클릭했을 때 작동한다. 오른쪽 버튼, 휠버튼, 다른 매크로 버튼 등이 이 이벤트를 작동시킨다. clic..

무조건 알아야하는 코딩용어를 정리해보자! ft. 스파르타 코딩클럽

스파르타 코딩클럽에서 진행하는 무료 강의인 "1시간만에 끝내는 직장인 코딩용어 해설"를 듣고 내용을 정리했습니다. 다음 수업을 어떤 것을 들어야할지 정리하던 중에 스파르타 코딩클럽에 접속하게 되었고, 무료 수업이라서 간단하게 회원가입을 하고 강의를 들었습니다. 총 1시간 가량의 강의이고, 저는 내용을 정리하면서 들어서 시간은 좀 더 걸렸습니다. 비전공자인 제가 대략적인 용어에 대해 알 수 있어서 정말 좋았고, 무엇보다 지루하지 않고 빨리빨리 진행되서 좋았습니다. 아이티 회사에 재직하고 있거나, 개발자와 소통이 많으신 분들도 들으면 좋을 것 같습니다. 귀여운 그림과 함께해서 좋았어요! ㅎㅎ 총 8개의 강의이고, 부담없는 시간이라서 출퇴근할 때 들으면 좋을 것 같습니다. 컴퓨터와 인터넷 컴퓨터는 기본적으로 ..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #13 위치 불러오기, API란 , Json viewer 크롬확장 프로그램 사용 방법

navigator.geolocation.getCurrentPosition() user의 위치(geolocation)를 켜준다. 성공했을 때 실행될 함수 에러가 발생했을 때 실행될 함수 API 란? application programming interface 프로그램들이 서로 소통하는 방법 / 코드들끼리 서로 소통하기 위해 만들어진 것 공공 API 날씨 API 각 어플들의 API 과거 날씨 API 공기 오염 API API 는 데이터, 서버를 가지고 있는 사람들이 원하는대로 디자인할 수 있다. 그래서 어떤 API는 접근권한이 정해져있다. 가끔은 API 사용에 제약이 있거나, 사용하기 위해 지불해야할때도 있다. web API = 브라우저를 위해 만든 API. ex) 구글 크롬, 파이어폭스 등등 https://..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #12 Date.now, filter 함수, 화살표 함수

const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "toDos"; const toDos = []; function saveToDos (){ localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } function deleteToDo (event){ const li = event.target.parentElement; // 우리가 삭제하고 싶은 내용 li.remove(); } function p..

반응형