그럼에도 불구하고

간단하게 encodeURIComponent로 네이버 검색을 해보자 조건 1. input text에 검색할 내용을 입력하고 버튼을 누르면 네이버 검색창에 자동 검색이 된다. + 추가기능 input text에 검색할 내용을 입력했을 때 기본적으로 합성되는 문자열을 만들어보자 ex) "포카"를 검색하면 자동으로 "칩"이 붙어 "포카칩" 검색 참고 [JavaScript] encodeURI / decodeURI란? encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유 despiteallthat.ti..

encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다. URI의 하위 개념으로 URL, URN이 있다. URI / URL / URN 이란 무엇인가 오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. despiteallthat.tistory.com /** * 완전한 URI를 문자열로 전달받아 이스케이프 ..

시간, 분, 초를 나타낼 수 있는 시계를 만들어보자 조건: 1. 현재 시간에 맞는 시간을 출력한다. 2. 시간, 분, 초를 두 자리로 출력하되 10이 넘지 않는 (1~9)의 경우 앞에 0을 붙여서 출력한다. clock.html : : clocl.css *{ margin: 0; padding: 0; box-sizing: border-box; } .container { width: 400px; height: 200px; margin: 300px auto; background-color: skyblue; border-radius: 70px; border: 5px solid antiquewhite; } .current-time { font-size: 60px; font-weight: bold; color: wh..

이미지 갤러리를 만들어보자 조건 1. 사진 6개를 보여준다. 2. 각각의 사진을 클릭하면 화면 전환이 되고 내가 누른 사진의 크기를 조절하여 보여준다. 3. 크기가 조절된 사진을 누르면 다시 사진 6개를 보여주게 만든다. 방법 1 방법 2 방법 3 CSS .row { width: 420px; margin: 30px auto; } ul { list-style: none; margin: 0; padding: 0; } ul li { display: inline-block; } #lightbox { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.694); top: 0%; left: 0%; position: fixed; display: none; } ..

오늘은 this에 대해 기록해보고자 한다. 이론적인 부분에서 공부할 때 너무 어려운 부분이 많았다. 그래서 이해가 안되는 부분이 많았는데 부족할 수 있지만 이번 계기로 확실히 정리해 보자 결론부터 말하자면 1. this는 함수가 호출될 때 결정이 된다. 2. 화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승받는다. 실습으로 내가 이해한 대로 적어봐야겠다. ver_1 car라는 객체는 name 값으로 "KIA"를 가지고 있다. 여기서 car.getName(); 으로 car라는 객체의 getName() 메서드를 호출했다. this는 함수가 호출될 때 결정이 된다. 즉, car.getName();는 car가 getName()을 호출한 것이다. 이때 getName() 안에 있는 this는 ..

DOM(document object model)에 대해 알아보자 [ 문서 객체 모델이란 ] 웹이나 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. ※ 문서 객체 모델(DOM)의 정의 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체이다. 이처럼 DOM은 웹 문서와 그 안..

숫자를 반환하는 함수를 만들어보자 조건 1. 입력 값이 ''이거나 prompt에서 취소를 누르면 null 값 표시 2. 입력 값이 숫자가 아니면 다시 prompt 호출 후기 처음에는 do while을 사용할 생각을 못했다. 그래서 문자를 입력받으면 다시 호출해야 하는데 여기서 return readNumber();를 사용했다. 하지만, 함수 본인이 자신을 계속 호출하는 방법을 사용하고 싶지 않아서 고민하다 do while을 사용하니 해결이 됐다.

오늘은 Symbol.Toprimitive에 대해 알아보자 [ 객체를 원시형으로 변환하기 ] obj1 + obj2처럼 객체끼리 더하는 연산을 하거나, obj1-obj2처럼 객체끼리 빼는 연산을 하면 어떤 일이 발생할까? 그리고 alert(obj)로 객체를 출력할 때는 무슨 일이 발생할까? 위의 두 가지 경우 모두 자동 형 변환이 발생한다. 즉, 객체는 원시값으로 변환되고, 그 후에 의도한 연산이 수행된다. 1. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 발생한다. 예를 들어 객체 Date 끼리 차감하면 (date1-date2) 두 날짜의 시간 차..

오늘은 정규 표현식으로 특정 문자를 검색해 보자 [ 정규 표현 패턴의 표기 ] 문자열의 패턴은 내용의 앞뒤에 /를 삽입한다. /패턴/ 대표적인 패턴 패턴 의미 x 문자 x xyz 문자열 xyz [xyz] x, y, z 중 하나의 문자 [a-z] a ~ z 중 하나의 문자. [a-f]. [A-Za-z] 방식도 가능 [^xyz] x, y, z 외 하나의 문자 [^a-z] a ~ z 외 하나의 문자 abc|xyz 문자열 abc 혹은 xyz {숫자} 반복 횟수 ^x 시작 문자 x x$ 종료 문자 x . 하나의 문자(줄바꿈 코드 제외) x* 0개 이상 계속되는 x* \ 다음에 오는 문자를 이스케이프(escape) 처리 \d 숫자 [0-9] \D 숫자가 아닌 문자 [^0~9] \w 영문, 숫자, 언더바 [A-Za-..

오늘은 자바스크립트 내장 객체에 대해 알아보자 [ Array 객체 ] Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. 배열을 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다. [ Array 객체의 메서드 ] Array 개체에는 여러 가지 메서드가 있다. 종류 설명 concat 기존 배열에 요소를 추가해 새로운 배열을 만든다. every 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다. filter 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다. forEach 배열의 모든 요소에 대해 주어진 함수를 실행한다. in..

오늘은 이벤트와 각종 이벤트 처리기에 대해 알아보자 [ 이벤트 ] 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다. 하지만, 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 예를 들어 브라우저 창 맨 위의 제목 표시줄을 클릭하는 것은 이벤트라고 하지 않는다. 자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. [ 마우스 이벤트 ] 마우스 이벤..

오늘은 지역 검색을 할 수 있는 code를 만들어보자 조건 지역명의 첫 번째 글자만 받아서 검색한다. (한글, 영어) 검색된 지역명과 data에 있는 지역명이 일치하는 지역만 보여준다. 일치하지 않는 지역은 보여주지 않는다. ( display: none; 속성 이용 ) [ searchName.html ] 지역명의 첫번째 글자를 입력해주세요. 속초 부산 포항 상주 서울 제주 김해 대구 울산 창원 마산 인천 평택 의정부 고양 성남 용인 부천 안산 남양주 시흥 파주 김포 광명 군포 이천 하남 과천 전주 군산 목포 나주 광양 춘천 원주 사천 광주 구리 삼척 당진 공주 천안 부천 수원 세종 대전 충주 [ search.js ] const numberMaxLength = function (e) { const MAX_..