본문 바로가기

분류 전체보기130

자바스크립트 : DOM DOM 모델은 HTML 웹페이지를 하나의 Object로 설정하고 내부의 구조를 순서대로 분류한 것으로, 브라우저가 자바스크립트와 같은 스크립트 언어를 통해 웹페이지 내부 요소를 보다 쉽게 변경, 삭제, 생성할 수 있게 돕는다. DOM 구조에서 Nodes들은 HTML 웹페이지 문서의 태그 요소들을 말하며, Element는 해당 노드 내부의 내용을 지칭한다. 1. document 키워드는 자바스크립트가 DOM의 root에 접근할 수 있게 한다. 2. querySelector()를 통해 문서 내의 특정 요소를 css 태그별로 접근할 수 있다. 3. 웹페이지 요소의 ID로 직접 접근하기 위해서는 .getElementById를 사용한다. 4. 웹페이지 요소 내부의 내용에 접근하기 위해서는 .innerHTML을 사.. 2020. 8. 15.
자바스크립트 : Interactive Websites (코드카데미) HTML creates the skeleton of a webpage, but JavaScript introduces interactivity Html은 웹페이지의 뼈대를 만들지만, 자바스크립트는 역동성을 부여한다. The 태그 사이에 넣을 수 있다. You link to external JavaScript files with the src attribute in the opening tag. 또는 src 구문을 통해 다른 곳에 있는 자바스크립트 파일을 불러올 수 있다. By default, scripts are loaded and executed as soon as the HTML parser encounters them in the HTML file, the HTML parser waits to lo.. 2020. 8. 12.
자바스크립트 : Array, Loops, and Objects II (코드카데미) 공부 출처 : 코드카데미 (참조) 강의 (5. Javascript: Arrays, Loops, and Objects) Objects (객체) 1. 객체의 선언 및 기본 구조 const classOf2018 = { students: 38, year: 2018 } 객체는 {}문으로 둘러싸여지며, Key : Value 형태로 이루어진다. 2. 객체의 Value(프로퍼티값) 가져오기 const apple = { color: 'Green', price: { bulk: '$3/kg', smallQty: '$4/kg' } }; console.log(apple.color); // 'Green' console.log(apple.price.bulk); // '$3/kg' 객채 프로퍼티 값을 가져오기 위해 Object.pr.. 2020. 8. 12.
자바스크립트 : Array, Loops, and Objects I (코드카데미) 공부 출처 : 코드카데미 (참조) 강의 (5. Javascript: Arrays, Loops, and Objects) 1. 스코프 (Scope) 스코프(범위)란 선언한 변수가 접근되거나 참조될 수 있는 범위를 말한다. 일부 변수는 프로그램 전체에서 참조될 수 있지만, 특정 변수는 특정 함수 안에서만 접근이 가능하기도 하다. 다양한 스코프는 Global Scope (전체 프로그램에서 접근될 수 있는 요소), File / module Scope (특정 파일 및 모듈 내에서 접근 가능한 변수 또는 함수), Function Scope (특정 함수 내에서만 접근 가능), Code Block Scope ({}로 선언된 코드 블럭 내에서만 접근 가능)로 분류된다. 2. 배열 (Arrays) 배열은 여러 데이터들이 저.. 2020. 8. 12.
자바스크립트 데이터타입 엘리 드림코딩 3과 (링크) 1. javascript 데이터타입 (참조) primitive type : single 아이템을 보관할 수 있는 데이터 타입 ex) number, string, boolean, null, undefined, symbol object type : 여러 데이터를 보관할 수 있는 데이터 타입 ex) function, first-class function 숫자 관련 선언할 수 있는 여러 데이터타입(float, short 등)이 있는 다른 프로그래밍 언어와는 달리, 자바스크립트는 number 타입 하나만 존재하며, 따로 타입을 선언할 필요 없이 let a= 12; 과 같이 선언과 할당이 가능함 Infinity = 1 / 0, -Infinity = -1 / 0, NaN = Not a n.. 2020. 8. 12.
wecode 사전스터디(8/10) 로그 개발한 것/새로 배운 것 vanilla Javascript 30days 프로젝트 - 06. Ajax type ahead Filter for a city or a state 1. fetch() - 참조 서버의 데이터를 받아오거나 새로 업로드할때 사용하는 메소드. 위 코드에서는 endpoint의 데이터를 받아온 후, .then()을 사용하여 데이터를 json으로 변환 후 cities 배열에 push함 2. 검색창(searchInput), 자동완성창(suggestions)에 이벤트 추가 change, keyup이 됐을때 displayMatches 함수 실행 3. displayMatches 함수 : 검색어와 동일한 단어의 자동완성 검색어를 표기해주기 1) 검색어 (this.value)를 받아서 findMatch.. 2020. 8. 10.
CSS 공부 사이트 링크 1. CSS flexbox 정리할 때 (CSS grid글도 나중에 공부하기): https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 2020. 8. 8.
wecode 사전스터디(8/8) 로그 개발한 것/배운 것 vanilla Javascript 30days 프로젝트 - 05. Flex Panel Gallery (CSS flexbox + JS 연습) 개요 : 특정 패널을 클릭시 flexbox를 활용하여 설정해둔 CSS가 적용+오픈되는 인터랙티브 웹페이지 HTML + CSS 더보기 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 1. Flexbox 연습 - Panel 그룹 클래스인 panels, 개별 panel 클래스, panel 내부의 아이템들 (.panel > *)에 모두 display : flex 설정 (flex display를 적용하고자 하는 아이템들의 부모 클래스에 항상 설정해야함).. 2020. 8. 8.
wecode 사전스터디(8/5) 로그 개발한 것/배운 것 vanilla Javascript 30days 프로젝트 - 04. Array Cardio day 1 (자바스크립트 배열 관련 메소드 연습) 문제풀이에 주어진 배열 더보기 const inventors = [ { first: "Albert", last: "Einstein", year: 1879, passed: 1955 }, { first: "Isaac", last: "Newton", year: 1643, passed: 1727 }, { first: "Galileo", last: "Galilei", year: 1564, passed: 1642 }, { first: "Marie", last: "Curie", year: 1867, passed: 1934 }, { first: "Johannes".. 2020. 8. 6.

티스토리툴바