기록 :-)

focus 이벤트는 요소가 포커스를 받을때 blur 이벤트는 포커스를 잃을 때 발생한다. javascript.info에 설명이 잘 되어있어서 참고해서 적었다 input.onblur = function(){ if(!input.value.includes('@')) { input.classList.add('invalid'); error.innerHTML = "올바른 이메일 주소를 입력하세요." } }; input.onfocus = function() { if (this.classList.contains('invalid')) { // 사용자가 새로운 값을 입력하려고 하므로 에러 메시지를 지움 this.classList.remove('invalid'); error.innerHTML = ""; } }; blur 핸..

Bootstrap이란 ? 트위터에서 시작된 프론트엔드 개발을 위한 프레임워크다. 트위터에서 사용되는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 css와 javascript로 만들어놓은 것이다. 글자 , 인용문, 목록 , 표 , 입력폼 , 버튼 , 이미지, 아이콘 등의 요소들을 모두 내장하고 있다. pc용만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 반응형으로 지원한다. 버전 차이가 있는데 버전 4는 제이쿼리를 사용하지만 버전5부터는 바닐라 자바스크립트만을 사용한다고 한다. 사용법 1. bootstrap 다운로드 다운로드 후 사용할 수 있다. 2. CDN을 통해 불러오기 별도의 다운로드없이 코드 몇줄로 불러올 수 있다. 사이에 코드를 적고 예시로 밑에 있는 코드를 붙여넣기 해보겠다. htt..

6/6 ~ 6/20까지 했던 노마드 코더 바닐라 js 챌린지가 드디어 막을 내렸다. 그동안 냈던 퀴즈, 과제를 검토해서 최종적으로 오늘 수료 여부 메일이 왔는데 다행히 무사히 수료를 하였다 !! 결석은 한번도 안했지만 몇번 제출한 코드가 답지랑 달라서 조금 걱정했었는데 ,, 휴 괜한 걱정이었다. 느낀점✨ 확실히 아직까지의 나는 스스로 하는것보다는 과제나 퀴즈처럼 문제가 있을때의 학습 효과가 좋다는 점이다..!! 그리고 짧은 시간에 자바스크립트에 흥미를 붙이고싶다면 이 챌린지를 적극 추천한다. 매일매일 정해진 과제를 했다는 쾌감과 마지막에 웹사이트라는 결과물이 나오기때문에 더욱 좋다 챌린지를 하며 노력한 점 ✨ 마지막에 css를 통해서 각자의 스타일을 입히기때문에 다 달라보이지만 사실 js만 놓고 봤을때는..

if문과 length를 사용하여 글자수를 제한둘 수 있다. --> 근데 html에 이미 기능이 있으니 그 기능을 이용하자 input, button은 form태그로 감싸야한다 ! 하지만 버튼을 누르거나 enter를 치면 자동으로 submi되는게 기본동작이기때문에 그걸 막기 위해서는 preventDefault()를 사용하면 된다 ! function onLoginSubmit(e){ e.preventDefault(); } //기본동작을 막아서 submit을 지연시킴 쓰는 법은 간단하다 ! 함수 첫줄에 적고 그 다음줄에 변수를 저장하거나 보관하는 코드를 적으면 된다 백택 (``) h1.innerText = `Hello ${username}`; h2.innerText = "Hello" + username; 백택을 ..

3.0 document console에 document를 입력하면 작성한 html을 확인할 수 있다. document는 쉽게 설정하자면 브라우저에 존재하는 object ! 콘솔에 document.body 입력시 body 호출 가능 --> js를 통해서 html, css에 접근가능하다. 3.1 - 3.2 document라는 함수 중에는 getElementById라는 함수가 존재하는데 이 함수는 html에서 id를 통해서 element를 찾아주는 함수다. 이 element를 찾으면 id, className, innetText등 의 값들을 변경하거나 가져올 수 있다. getElementById : html에서 id를 통해서 element를 찾아주는 함수 getElementByClassName : classNa..

6월 6일부터 시작한 바닐라js 2주 챌린지 ! 더 원활한 공부를 위해 기록 시작 :) function : 함수 계속 반복해서 사용할 수 있는 코드 조각이라 생각하면 이해하기 쉽다. function 함수명 (argument){ 실행코드 } argument(인수)는 소괄호안에 위치하며 함수를 호출할 때 전달되는 값이다. const player = { age: 20, sayHello: function(myName){ console.log("Hello " + myName); } }; player.sayHello("seYeon"); //Hello seyeon argument는 myName이고 seYeon을 넣어줬다 결과는 Hello seYeon object안에 function을 넣어서 가벼운 계산기도 만들 수 ..

객체(object)란 ? 생활 속에서 우리가 인식 가능한 사물을 뜻한다. object는 property를 가진 데이터를 저장해주는데 여기서 property는 값이라고 생각하면 된다. const myProfile = { name: "yeon", color: "blue", food: "sushi" }; 한마디로 객체는 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 !! console.log(myProfile); //{ name:'yeon', color: 'blue', food: 'sushi'} 원하는 부분만 출력을 원할 시에는 밑의 코드와 같이 적으면 된다. console.log(myProfile.name); // yeon console.log(myProfile..

배열 선언하는 방법 cosnt number = ["one","two", "three"]; 배열 출력하기 console.log(number); // ["one", "two", "three"] 배열에 요소 추가하기 number.push("four"); push로 요소를 추가하고 나서 다시 출력하면 four까지 추가된걸 확인할 수 있다. console.log(number); // ["one", "two", "three","four"] 원하는 요소만 출력하고싶을때는 대괄호안에 순서를 넣은 후 출력하면 된다 console.log(number[0]); // "one"출력 console.log(number[3]); // "four" 출력 이러한 방식으로 요소를 수정할 수도 있다 number[0] ="원"; conso..

문자열 객체를 생성하는 방법 문자열 객체는 new키워드와 String()메서드를 이용하여 생성한다. let t = new String("hello javascript"); 1. charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환한다. let t = "Hello Thank you good luck to you"; document.write(t.charAt(16)); // 인덱스 16에 저장된 문자를 불러오기때문에 g를 반환하게 된다. 2. indexOf("찾을 문자") 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. let t = "Hello Thank you good luck to you"; document.write(t.indexOf("..

자바스크립트에서의 변수 선언 방식은 var, let, const가 있다. 예전에는 변수를 선언할때 var만 사용했다면 2015년에 출시된 ES6부터는 let, const가 추가되었고 . var보다는 let, const를 사용하는 것을 권장한다. 오늘은 이 셋의 차이점에 대해서 공부해볼 것이다 🔥 ES란 ? ECMAscript의 약자로 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 한마디로 자바스크립트를 표준화하기 위해서 만들어졌다. 이 셋의 차이점을 알기 위해서는 먼저 scope에 대해서 알아야한다. scope -> 해당 코드가 사용 될 수 있는 범위를 나타내는 말 -전역 스코프 코드의 가장 바깥 영역에 존재하며 코드 어디에서든지 참조 가능하다. - 지역 스..