비전공자의 개발 도전기

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에서만 사용하는 연산자이며==..

https://www.youtube.com/playlist?list=PLlaP-jSd-nK-nRWstWs_MvCWhVHb7Auuc 입문자를 위한, ES6+ 최신 자바스크립트 강의#자바스크립트 #강의 #강좌 안녕하세요. 짐코딩입니다 💪 자바스크립트 입문 강의를 무료전환 하게 되어 안내해 드립니다. 【무료전환 이유❓】 제가 개발자로 첫 회사에 들어갔을 때 1년 정도www.youtube.com  인프런에 유료로 개정판까지 올라와 있지만 유튜브에도 무료로 풀렸길래 들어보았다.내용을 자세하게 다뤄주어 재밌게 들을 수 있었다.그리고 중간에 별 그리는 퀴즈를 내주는데 2번부터 뭔가 이해는 가는데 막히던게답안을 보니 아하! 라는 생각이 나왔다. 어느 정도 공부는 됐나보다... 이제 반복하고 실습을 계속 해야할 것 같..

DOM? (Document Object Model)문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.출처: MDN DOM 소개 - Web API | MDN이 문서는 DOM에 대한 개념을 간..

this?   객체를 가리키는참조 변수   호출되는 위치에 따라 다른 값 출력 1. 호출한 객체 없이 단독 호출 경우 : window 객체 2. 매서드 내부 : 메서드를 호출한 객체 3. 일반 함수(전역범위에서의 함수) 호출 : window 객체 4. 화살표 함수 호출 시 상위 스코프 객체 5. 생성자 함수 내부 : 생성자 함수가 생성할 인스턴스 6. 예시     1) function a() { console.log(this) }         a();                                              ➡️ 함수 호출 : window     2) let myObj = {              val1: 100,              func1: function () { ..

객체(Object)?여러개의 데이터를 한 변수에 저장할 수 있는 자료형앞의 배열과의 차이점 : 특별한 키를 통해 원하는 값(value)에 접근 가능한key-value의 쌍 으로 구성 - 특징   객체는 데이터를 구조화해 저장 할 수 있는 기본 자료형 중 하나객체 리터럴을 이용한 생성 (가장 간단)const person = {    name: "John",    age: 30,    job: "developer"   };생성자 함수를 사용한 생성function Person(name, age, job) {   this.name = name;   this.age = age;   this.job = job;   }const person1 = new Person("John", 30, "developer");con..

type?변수의 타입은 다양한 데이터를 용도에 맞게 쓰기 위해 사용- 원시타입 : 단순한 데이터 저장- 참조타입 : 객체로서 저장 1. 원시타입 (Primitive Types)    - 값 변경 불가능     - string, number, bigint, boolean, undefined, symbol, null..     - 이스케이프 표현       문자열에서 줄바꿈을 하고 싶을 때 : \n       나머진 검색    - boolean : ture, false    - null : 값이 없는 상태 (값을 할당하고 싶지 않을때 사용 가능 const username = null;)    - nusdefined : 값을 할당 하지 않은 상태 (대표적으로 함수를 입력하고 나면 뜬다.) 2. 객체타입 (Ob..