반응형

분류 전체보기 368

[인터랙티브 Javascript] 01. 인터랙티브 자바스크립트 시작하기

정답일까? 주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!👏🏻라는 경고창이 나타나도록 코드를 작성해 주세요. (박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요) 단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요. 정답일까? 채점 body { text-align: center; padding: 30px 0; } #title { font-weight: 500; } #grade { width: 65px; height: 35px; color: #6500c3; font-size: 15px; border: solid 1px #6500c3; border-radius: 5px; background-..

Languages/JS 2021.02.17

[jQuery 시작하기] 02. 과제로 워밍업

D-DAY 계산기 만난지 며칠 되었는지 계산해주는 웹사이트를 만들어보려고 합니다. 시작 날짜가 제대로 입력되지 않은 채로 버튼을 누를 경우, '시작 날짜를 입력해주세요!'라는 메시지를 알러트창으로 띄웁니다. 5월 13일에 만났고 현재 5월 13일이면 '만난지 1일째'입니다. 5월 13일에 만났고 현재 5월 14일이면 '만난지 2일째'입니다. 만난지 00일째 시작일 결과 보기 * { box-sizing: border-box; } body { margin: 0; min-width: 992px; font-family: "Helvetica"; } /* navigation bar */ .navbar { height: 66px; background-color: white; text-align: center; lin..

Front-end/jQuery 2021.02.17

[jQuery 시작하기] 02. 과제로 워밍업

이메일 광고 처음에는 'Send' 버튼이 회색(#9E9E9E)으로 비활성화되어 있다가, 방문자가 올바른 형태의 이메일을 입력하면 파란색(#4D79C2)으로 활성화되어야 합니다. 이메일에는 @가 포함되어 있어야 한다. @ 뒤에는 최소 1개 이상의 .이 포함되어 있어야 한다. 이메일의 필수요소인 '@', '.'이 입력되어야 send버튼 활성화! PRODUCTS BLOG HOME ABOUT LOGIN 더 많은 정보와 이벤트 등을 받아보고 싶으면 이메일을 입력해주세요! * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; margin: 0; min-width: 992px; } /* Navigation Bar */ .navbar { pos..

Front-end/jQuery 2021.02.17

[jQuery 시작하기] 02. 과제로 워밍업

데이터 분석하기 배열 birthdayData에는 11개의 문자열이 있습니다. 각 문자열에는 생년월일 8자리와 이름이 나와 있고요. 이 중 미성년자만 골라서 출력해주는 함수를 써봅시다. 2017년 기준으로 98년생까지 성년, 99년생부터가 미성년자입니다. var birthdayData = [ '20010309전소미', '19960828김세정', '19991112최유정', '19960209김청하', '19990719김소혜', '19981216주결경', '19971201정채연', '19991204김도연', '19991204강미나', '19951218임나영', '19990803유연정' ]; function printMinors(arr) { console.log("미성년자 명단:"); arr = 1998; for..

Front-end/jQuery 2021.02.17

[jQuery 시작하기] 02. 과제로 워밍업

문자 개수 세기 주어진 단어에 특정 알파벳이 몇 번 들어가는지 세어주는 프로그램을 작성해봅시다. 예를 들어 countCharacter('AbaCedEA', 'E') 함수는 'AbaCedEA' 에서 E가 몇 번 들어갔는지 세는 함수로 실행결과는 2입니다. 여기서 주의해야 할 점은 대소문자를 구분하지 않는 다는 점입니다. countA(word) 함수는 단어에 'A'가 몇 번 들어가는지 출력하는 함수입니다. 마찬가지로 대소문자를 구분하지 않습니다. // 주어진 단어(word)에 특정 알파벳(ch)이 몇 번 들어가는지 세어주는 함수 function countCharacter(word, ch) { var count = 0; let big = word.toUpperCase(); for (let k = 0; k < ..

Front-end/jQuery 2021.02.17

[TIL] 2021.02.17

JavaScript 🌈 [인터랙티브 자바스크립트] 01. 인터랙티브 자바스크립트 시작하기 01. 웹 서비스와 Javascript 02. HTML/CSS + Javascript 맛보기 03. id로 태그 선택하기 04. id로 태그 선택하기 퀴즈 05. class로 태그 선택하기 06. 유사 배열(Array-like Object)이란..? 07. class로 태그 선택 퀴즈 08. 태그 이름으로 태그 선택하기 09. css 선택자로 태그 선택하기 10. css 선택자로 태그 선택하기 퀴즈 11. 이벤트와 버튼 클릭 12. 정답일까? 13. 종합 정리 jQuery 🌀 [jQuery 시작하기] 02. 과제로 워밍업 01. Javascript의 기능들 02. Math 정리 노트 03. String 정리 노트 0..

CodeSiri/TIL 2021.02.17

[jQuery 시작하기] 01. HTML, CSS와의 콜라보레이션

아이디 비밀번호 검사 자바스크립트를 활용해서 '로그인 페이지'를 수정하려고 하는데요. 아이디 혹은 비밀번호 둘 중 하나라도 입력란이 비어있다면, 로그인 버튼이 '비활성화'되어서 버튼의 배경색이 #9B9B9B로 설정되어야 합니다. 사용자가 아이디와 비밀번호를 둘 다 입력하면, 로그인 버튼이 '활성화'되어서 버튼의 배경색이 #1BBC9B로 바뀌어야 합니다. 아이디와 비밀번호 모두 입력할 경우에만 로그인 버튼 활성화 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; background-color: #1BBC9B; } .login-form { width: 300px; backg..

Front-end/jQuery 2021.02.16

[프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기

팰린드롬 팰린드롬 여부를 확인하는 함수 isPalindrome을 작성하려고 하는데요. isPalindrome은 파라미터 word가 팰린드롬이면 true를 리턴하고 팰린드롬이 아니면 false를 리턴합니다. function isPalindrome(word) { for (let i = 0; i < Math.floor(word.length / 2); i++) { let left = word[i]; let right = word[word.length - 1 - i] if (left !== right) { return false } } return true } // 테스트 코드 console.log(isPalindrome("racecar")); console.log(isPalindrome("stars")); co..

Languages/JS 2021.02.16

[프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기

현명하게 거스름돈을 계산해 주는 프로그램을 만들려고 합니다. 예를 들어 33,000원짜리 물건을 사기 위해 100,000원을 냈다면, 이런 식으로 '가장 적은 수'의 지폐를 거슬러 주는 것입니다. 50,000원 1장 10,000원 1장 5,000원 1장 1,000원 2장 우리는 calculateChange라는 함수를 작성하려고 하는데요. 이 함수는 지불한 금액을 나타내는 payment와 물건의 가격을 나타내는 cost를 파라미터로 받습니다. function calculateChange(payment, cost) { let change = payment - cost; const fiftyCount = (change - (change % 50000)) / 50000; change = change - 5000..

Languages/JS 2021.02.16
반응형
LIST