웨일의 블로그 웨일의 블로그

문자형으로 변환 String() let value = true; alert(typeof value); // boolean value = String(value); // "true" 저장 alert(typeof value); // string 숫자형으로 변환 Number() let str = '123'; str = Number(str); alert(typeof str); // number 불린형으로 변환 숫자0,빈 문자열, null, undefined, NaN같이 직관적으로 비어있다고 느껴지는 값들은 false가 된다. 그 외의 값들은 true로 변환된다. alert(Boolean("Hello")); // true alert(Boolean('')); // false

자바스크립트 미니 프로젝트 클론코딩을 진행하다가 자바스크립트 개념이 부족한 느낌을 받아서 이론공부를 시작했다. https://ko.javascript.info 모던 JavaScript 튜토리얼 ko.javascript.info alert 메세지가 있는 작은 창을 모달 창(modal window)라고 부르고, 모달이란 단어에는 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 내포되어 있다. 확인버튼을 눌러야 상호작용이 가능하다. 모달창이 떠있는 동안은 스크립트 실행이 일시중지된다. prompt 브라우저에서 제공하는 함수로, 두 개의 인수를 받는다. result = prompt(title, [default]); title: 사용자에게 보여줄 문자열 default: 초깃값 [default]에서 대괄호의 ..

Flex Panels Image Gallery 요구사항 1. 패널을 클릭하면 패널이 확장되고 확장이 완료되면 위아래에서 문구가 들어온다. 2. 확장된 패널을 클릭하면 패널이 축소되고 문구가 위아래로 나간다. 1. HTML 구성 - 패널박스 panels 안에 패널 5개가 들어가 있고 각 패널은 p태그 3개로 이루어져 있다. Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 2. CSS 구성 - body margin: 0으로 해서 화면에 꽉 차게 한다. - panels클래스 display: flex로 가로정렬, min-height:100vh로 사용자 화면에 꽉차게, overflow:hidden으로 빠져나온..

Array Cardio Day 1 배열의 메서드 몇가지를 사용해보면서 익혀보자. 1. 1500년대 태어난 발명가 리스트를 filter하기 - inventor.year>1500과 inventor.yeara>b? 1:-1) 하면 낮은 숫자부터 앞에 놓인다. 4. 모든 발명가의 나이를 모두 더한 값을 구하기 - reduce 메서드 사용, inventor.passed-inventor.year로 나이를 구한다. acc는 합친 값이 저장되며 0으로 초기화하고 진행한다. 5. 나이 순서대로 작은 순부터 나열하기 - sort 메서드 이용, 3번 방법과 동일하다. 6. 거리명에 'de'가 들어간 거리 나열하기 - includes 메서드 이용 7. 사람의 성을 알파벳 순으로 나열하기 - sort 메서드와 split 메서드..

Playing WITH CSS VARIABLES AND JS 요구사항 1. 사진의 경계, 블러, 경계의 색을 조절할 수 있어야 한다. 2. 경계,블러는 마우스 클릭후 이동하는 중에도 변해야 한다. 1. HTML 구성 - 컨트롤 박스 안에 패딩,블러,색상 조절하는 부분이 있다. - 가로 정렬을 위해 span태그 사용 Update CSS Variables with JS Spacing: Blur: Base color 2. Javascript 구성 - 이벤트리스너로 mousemove,click 이벤트 감지해서 setSpacing 호출, 클릭후 움직이면 변하는 인풋값을 mousemove가 감지한다. - setSpacing 함수는 슬라이드바 클릭으로 변한 인풋값을 불러와서 경계의 색과 크기, 블러, JS의 색을 변..

CSS + JS CLOCK 요구사항 1. 실제 시계처럼 동작하게 만들기 1. HTML 구성 - clock 안에 clock-face가 있고 그 안에 초침,분침,시침이 있다. 2. CSS 구성 - body클래스에서 시계를 중앙으로 위치시키고 clock클래스에서 시계의 모양,그림자를 그린다. - hand 클래스에서 position:absolute로 해서 시침,분침,초침을 겹치게 놓은 후 transform-origin:right으로 해서 사각형의 오른쪽 선을 기준으로 회전하게 한다. body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; heigh..

1. JAVASCRIPT DRUM KIT 요구사항 1. 사용자가 A부터 L을 눌렀을 때 각각의 문자에 할당된 오디오파일을 재생해야 한다. 2. 오디오파일 재생시에 브라우저에서 사용자가 누른 키가 뭔지 UI가 바뀌면서 표시되어야 한다. 1. html에서 div의 어트리뷰트에 각 키마다 data-key를 넣어서 구별이 가능하게 한다. A boom 2. 오디오파일에도 data-key를 넣어서 누른 키에 따라 어떤 오디오파일을 실행하고자 하는지를 파악한다. 3. javascript에서 화면에 키입력이 감지되면 playsound함수를 실행한다. window.addEventListener('keydown',playsound); 4. playsound함수 - event.keyCode를 통해서 어떤 data-key가 ..

koan은 자바스크립트 기본 프로그래밍을 퀴즈 형식의 문제를 풀며 이해하는 방식으로 진행된다. https://github.com/mrdavidlaing/javascript-koans mrdavidlaing/javascript-koans Koans to learn Javascript. Contribute to mrdavidlaing/javascript-koans development by creating an account on GitHub. github.com 1. Thinking About Expects 등호를 배워보자 10=='10': a와 b의 값이 같다. 10===10: a와b는 값에다가 데이터 타입까지 같다. 2. Thinking About Arrays 배열을 배워보자 하나의 배열에는 여러 타입..