분류 전체보기 328

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 (``) 선언과 호..

HTML 기초 개념

HTML(Hyper Text Markup Language) = 웹을 구성하는 가장 기초가 되는 뼈대 HTML을 구성하는 기본 단위는 태그입니다. 여는 태그와 텍스트 문구 그리고 닫는 태그를 이용하여 만든 것들을 하나의 element(엘레먼트 혹은 요소)라고 부릅니다. : 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다. : 아직 여러분이 사용하지는 않겠지만, 주로 외부 소스를 참조해야할때 사용하곤 합니다. : 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다. 이미지 태그는 src라고 부르는 하나의 속성을 갖고 있습니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. 이미지 주소 얻는 방법 1. 웹에서..

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; //재선언, 재할당 가능 함수 선언 방법 함수 선언식 => 호이스팅에 영향을 받는다. - 선언 전에 호출되도 정상적으로 동작! (호이스팅: 자바스크립트의 특징으로, 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올..

컴퓨터 내부의 언어 체계

프로그래머는 컴퓨터가 프로그래머를 위해 할 일을 하는 방법을 컴퓨터에게 가르쳐준다. 컴퓨터는 천재가 아니고, 누군가가 컴퓨터가 이런 일을 할 수 있도록 미리 작성해둔 프로그램이 있기 때문이다. 비트는 2진수를 사용한다. 2진수에서 가장 오른쪽의 비트를 가장 작은 유효 비트(LSB :least significant bit)라고 부르고, 가장 왼쪽의 비트를 가장 큰 유효 비트(MSB: most significant bit)라고 부른다. 4비트는 0부터 15까지 16가지 수를 표현할 수 있다. 3비트는 0부터 7까지 8가지 수를 표현할 수 있다. 2진수 (1111) 부호와 크기 => -7,+7 1의 보수 => -0 2의 보수 => -1 인코딩은 다른 비트 패턴을 표현하기 위해 사용하는 비트 패턴을 뜻한다. 유..

실력있는 개발자가 되기 위한 첫걸음, 질문하는 법, 페어프로그래밍 하는 방법, 구글 검색 잘하는 법, stackoverflow 사용방법, 마크다운 사용법

왜 좋은 질문을 할 줄 알아야 하나요? 실력이 뛰어난 개발자는 잘 질문합니다. 좋은 질문하는 방법 질문하기 전에 먼저 검색하자! 내 문제를 설명하는 키워드를 찾자! (구글에 how to resolve ~~, how to use -- in js?, difference between a and b ) 일단 질문하세요. JUST ASK! (틀릴 수 있는 용기를 가지자!) 질문에 좋은 제목을 달자! ( Bad : "코플릿 알고리즘 00번 질문입니다." 답변자는 여러분이 어떤 문제를 풀고 있는지 알 필요가 없습니다. 어떤 것을 질문할지도 예상할 수 없는 제목입니다. Good : "array의 reduce 메서드 사용 시 accumulator 인자의 작동이 이해되지 않습니다." 제목만 보고도 어떤 답을 해 줘야 할..

깃헙 배포할 때 에러 해결방법

1. html 파일을 index.html로 바꾸자 2. 이렇게 삽입하자. 3. 깃허브를 올릴 땐 경로를 잘 확인하자. (1) html 안의 js 파일들의 경로 예를들자면 가 아니라 왜냐면 깃헙에 커밋할 때 폴더 그대로 안올리기 때문 (2) 파일의 대소문자 확인하기 (3) 이미지 파일을 삽입했다면 경로 잘 확인하기 4. 그래도 문제라면 콘솔창을 잘 확인해서 문제를 파악하자!

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..

미디어쿼리로 만드는 반응형 웹 만들기 / 웹 디스플레이 크기별 색 바꾸기

1. 디스플레이 크기에 따른 body요소의 background-color 변경하기 0~767px 이면 : gold 768px~1024px 이면 : lightblue 1025px~ 이면 : lightpink @media screen and (max-width: 767px) { body {background-color: gold;} } @media screen and (min-width: 768px ) and (max-width: 1024px) { body {background-color: lightblue;} } @media screen and (min-width: 1025px) { body {background-color: lightpink;} } ⬆️위 식처럼 정직하게 크기별로 3가지 색상에 대한 식을..

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

어린이날을 기준으로 카운트다운 웹페이지를 만들어봤어요! 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..