그럼에도 불구하고

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

시간, 분, 초를 나타낼 수 있는 시계를 만들어보자 조건: 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; } ..

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

오늘은 정규 표현식으로 특정 문자를 검색해 보자 [ 정규 표현 패턴의 표기 ] 문자열의 패턴은 내용의 앞뒤에 /를 삽입한다. /패턴/ 대표적인 패턴 패턴 의미 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-..

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

제곱 함수를 구하는 코드를 짜 보자 조건 1. prompt로 입력받는 두 개의 값 중 하나라도 1보다 작은 값을 받을 경우 다시 받는다. 2. 두 개의 값을 받을 때 함수를 사용한다. 3. 1 이상의 자연수를 받았다면 최종적으로 구하는 제곱 함수를 alert로 띄워준다. code 결과: HTML 삽입 미리보기할 수 없는 소스 개선점 1 checkNum() 함수는 오로지 파라미터 값이 1 이상인 자연수를 판단하는 기능을 하는 것만이 아닌, 새롭게 값을 받고 있다. ( 함수는 하나의 기능만 수행하게 바꾸기 위해 새로운 함수를 사용한다. ) code 결과 HTML 삽입 미리보기할 수 없는 소스 개선점 2 위의 코드는 함수 선언문으로 함수를 정의했다. 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가..

기존의 day / night mode의 코드를 업그레이드해보자 기존 코드 day mode / night mode 기존 코드는 기능 수행을 하는 데 있어 문제는 없지만 아쉬운 점이 있다. 바로 아래와 같은 문장이 반복된다는 것이다. // body.style.backgroundColor // body.style.color 지금은 코드가 짧아 간단하지만, 만약 엄청나게 긴 문장을 갖고 있었다면 유지 보수하기 어렵다. 그래서 객체를 만들고, 객체 안 메서드로 배경색과 글자 색을 바꿀 수 있게 만들기로 했다. 그리고 기존의 방식처럼 setAttrubute 메서드를 사용하지 않고, button을 onclick 했을 때 toggle 메서드 안에 this를 넣었다. 그 후 script구문 안 toggle메서드에 파라미..

day/ night mode를 만들어보자 [ 조건 ] 1. day / night mode를 만들 수 있는 버튼은 1개만 사용하자 2. 버튼을 누르면 body의 backgroundColor과 fontColor를 해당 모드에 맞게 바꾸자 3. 해당 모드에 맞는 버튼의 value를 변경하자 HTML 삽입 미리보기할 수 없는 소스 code day mode / night mode 핵심 [ element.setAttribute() ] Syntax : element.setAttribute(name, value) Parameters Parameter 설명 name 필수요건 속성의 이름 value 필수요건 새로운 속성의 값 ※ 주의사항 요소에 값이 있는 style 속성을 추가할 수 있지만 style 속성의 다른 속성을 ..