기록 :-)

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..

다시 공부하려고 정리하는 뒤죽박죽 css 기초 개념 text-decoration-line none : 꾸밈 없음 underline : 텍스트 아래 밑줄 overline : 텍스트 위에 줄 line-through : 텍스트 중간 선 text-decoration-color 라인의 색 text-decoration-style 선의 모양 solid: 굵은 선 wavy : 물결모양 dotted : 점선 dashed: 짧은 막대선 double: 이중선 font 크기 font-weight: normal; 과 font-weight: 400; 과 같고 font-weight: bold; 과 font-weight: 700;은 같음 굵기는 100 ~ 900 까지 있음 ( 100 단위 ) 폰트에 따라 지원되는 크기는 다름 div..

문자열 객체를 생성하는 방법 문자열 객체는 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 -> 해당 코드가 사용 될 수 있는 범위를 나타내는 말 -전역 스코프 코드의 가장 바깥 영역에 존재하며 코드 어디에서든지 참조 가능하다. - 지역 스..

자바스크립트의 스타일 가이드 ( ੭ ̇ᗜ ̇ )੭ 스타일 가이드란 ? 각 프로그래밍 언어마다 권장하는 방법이다. 가독성을 위한 암묵적인 약속이라고 생각하면 된다. 1. 사용할 수 있는 문자 알파벳 ( 대소문자 ) , 숫자 (0~9) , underbar(_) , 달러기호 ($) 를 사용할 수 있다. 2. 변수 - 숫자는 변수의 첫 글자로 올 수 없다. 두번째글자부터 가능하다 ex) 1js (x) js2(o) - 다른 언어에서도 그렇듯이 대소문자는 구별해서 써야한다 myname !== Myname - 예약어는 변수로 사용이 불가능하다. (if, for 등 처럼 이미 기능적으로 사용되고 있는 단어들) - 의미없는 이름들 X 가독성을 위해서 변수이름은 최대한 관련있는걸로 짓는게 좋다. 너무 추상적인 이름도 피하..

CSS는 웹 사이트의 스타일링을 담당하므로 빼놓을 수 없는 요소다. HTML에 적용하는 3가지 방법에 대해서 알아보자 :D 1. 내부 스타일 시트 ( 에 입력 ) class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 그동안 올린 게시글에서 항상 썼던 방식이다. html파일 안 에 있는 태그 안에 적으면 된다. 2. HTML 태그에 적용하기 class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 직접 태그 안에 style=""을 적어서 입력하는 방식이다. 개인적으로는 지저분해 보이고 한 눈에 안 들어와서 별로 안 좋아하는 방식 ! 3. 외부 스타일 시트 마지막 방법은 직접 ..