비전공자의 개발 도전기

QUOTES1. 명언들을 객체의 배열로 정리 하자 2. HTML에서 필요한 테그들을 만들어 주고 3. JS에서 타겟 가능하도록 정의해 준다.const quote = document.querySelector('#quote span:first-child');const author = document.querySelector('#quote span:last-child'); 4. 그리고 명언 객체를 불러오려면 console.log(quotes[0]); 처럼 객체의 수를 알아야한다.    매번 새릴 순 없지! 추가 같은 것도 해버리면..?    => 내장함수 Math. 사용!         Math.random() : 0부터 1사이의 랜덤한 숫자 제공 / 하지만 소숫점 자리제공...         Math.ran..

1. HTML엔 h2 tag를 사용해 기본값 00:00:00 설정2. JS에서 qureySelector or getElementBy~로 태그를 부른다.3. 시계를 업데이트 하려면 interval(시간의 간격)을 사용해야 한다.4. 이는 내장함수가 있다 : setInterval('실행하고자 하는 함수', '함수 호출 간격(ms)');const clock = document.querySelector('#clock');function sayHello() {  console.log('hello');}setInterval(sayHello, 5000);5초마다 콘솔에 hello를 입력해 줄것 이다. (함수 실행 확인) 5. 시계를 표시하기 위해선 날짜함수를 이용해야한다.    이 또한 내장 함수 Date();   ..

JS의 if문같은 조건문을 이용하지 않고 HTML에서 input태그의 글자수 제한(최대길이), 빈칸확인 등을 걸수 있는데,이는 유효성 검사(required)가 필요하다. 이를 하기 위해 input태그는 꼭 form태그 안에 감싸져 있어야 한다!그래야 HTML만으로도 유효성 검사를 통해 위의 기능들이 실행된다. form의 자식인 input태그의 속성은 required(필수, 없다면 폼제출이 차단된다.), maxlength, type, placeholder 등이 있다. 하지만 이를 사용하면 버튼 or enter 클릭 시 '무조건' 자동으로 submit(새로고침)이 된다. 문자열을 입력시키는데 있어서 보다 깔끔하고 반복적이지 않게 사용하는 방법은` ${} ` 를 사용하는 것이다.const username = ..

document : 접근할 수 있는 HTML을 보여주는 객체document.title : HTML에서 정한 head의 title을 보여준다.document.title = 'test'를 통해 문서의 title이름 변경 가능 특정한 무언가를 가져오려면~특정 HTML내용 변경!자바스크립트로 HTML에 접근하기 document.getElementById("~"); : tag의 id명으로 내용을 가져올 수 있다.const title = document.getElementById"title");title.innerText = 'Got you!';처럼 사용시 대상(element)을 정의해 가져와 줘야한다.element.innerText : element 안에서 사용자에게 '보여지는 text 값'들만 가져오거나 설정 ..

자바스크립트는 html이 다 실행된 뒤에 실행되고 위에서 아래로 읽어 실행한다.console.log : 웹페이지 콘솔에 프린트(로그)하게 만드는 함수                    : console에 무언가를 log(기록하여 보여줌)하는 것alert : 경고창을 띄우는 함수const : 업데이트 불가능한 변수 (const a = 3; 을 const a = 4; 로 바꿀 순 있으나, a = 8;로 업데이트는 불가)let : 업데이트 가능[보통 const를 기본으로 사용하고 업데이트 하고 싶을때 let사용](nver ever use [ver] 옛날 문법)camelCase : 코드 이름 작성법&&: and|| : or다른 언어에서 == 을 쓰다가 === 를 사용하여 찾아보니JS에서만 사용하는 연산자이며==..