코딩하는 등산가

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. Operator 1. String concatenation(문자열 합치기) // 1. String concatenation console.log('my' + ' cat'); console.log('1' + 2); console.log(`string literals: 1+2=${1 + 2}`); - 앞서 말했듯 `` 백틱을 이용하면 좀 더 편하게 출력을 할 수 있습니다. 2. Numeric operators(숫자 연산) //2. Numeric operators console.log(1 + 1); // 더하기 console.log(1 - 1); ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 프로그래밍에서 가장 중요한 것은? 입력 & 연산 & 출력 1. let let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); let이라는 키워드를 이용해서 name을 만들면 포인터 형식으로 데이터를 가리킵니다. ellie에서 hello로 변경됨 블록 안에서 만들어진 변수는 블록 밖에서 접근할 수 없습니다. 블록 밖에서 만들어진 변수는 블록 안, 밖에서 접근할 수 있습니다. // 1. Use strict //added in ES5 //use this for Valia ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 1. Hello 콘솔 출력 main.js 작성 결과 출력 index.html 작성 Live Server 실행 및 확인 js파일을 head에 넣는 경우 - js 파일을 헤드에 넣는 경우 js가 큰 경우에는 느려질 수 있습니다. js파일을 body에 넣는 경우 - 사용자가 페이지를 보기 전에 fetching 과 실행 시간을 기다려야 합니다. js파일을 head + async를 설정하는 경우 - 다운로드 받는 시간을 절약할 수 있습니다. - But, 조작 시점이 HTML이 정의되어 있지 않으면 위험합니다. js파일을 head + async를 설정하..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 1994년 네스케이프(Netscape)의 창시자 마크 앤드리슨(Marc Andreessen)은 간단한 웹페이지를 제작합니다. 이 웹페이지는 80%의 점유율을 가질 정도로 인기가 많았습니다. 이후 동적인 웹사이트를 만들고 싶어했던 마크 앤드리슨은 Scripting 언어를 추가했습니다. 그 과정에서 Java를 선택하자니 다소 무겁고 어려웠습니다. 스킴이라는 프로그래밍 언어와 Java를 가지고 고안한 언어가 바로 Mocha 였습니다. 후에 인터프리터를 추가하면서 LiveScript로 변경했고, 후에 JavaScript로 이름을 변경했습니다. 199..

- 노드 생성 - 첫 번째 자식 노드로 추가 - 마지막 번째 자식 노드로 추가 - 특정 노드의 이전 위치에 추가 - 특정 노드의 이후 위치에 추가 노드 생성 var $신규 노드 =$("신규DOM"); //////////////추가 버튼을 클릭할 때마다 신규 메뉴 아이템을 생성//////////////////// $(document).ready(function(){ var count = 0 $("#btnAdd").click(function(){ count++; var $li = $("new menu"+count+"); console.log($li.get(0)); }) }); //////////////////////////////////////////////////////////////////////////..

자식노드 특정 노드의 바로 아래에 위치하고 있는 노드, 하위 노드의 하위노드는 자식 노드가 아닙니다. "parent"의 노드 안에는 "son" "daughter" 가 있고 "son" 안에는 "grandchild" 가 있습니다. 이때 "parent"의 자식 노드는 "son" 과 "daughter" 가 됩니다. - 모든 자식 노드 찾기 - 특정 자식 노드 찾기 - 첫번째 자식 노드 찾기 - 마지막 자식 노드 찾기 - n번째 자식 노드 찾기 모든 자식 노드 찾기 - $대상.children() 자식 노드 중 오직 태그 노드만을 찾아줍니다. - $대상.contents() 모든 노드를 찾아줍니다. ///////////////////#samplePage의 자식 노드 변경//////////////////////////..

대부분의 작업은 노드를 찾고 난 후 다음 작업을 진행한다. - 아이디 이름으로 노드 찾기 - 태그 이름으로 노드 찾기 - 클래스이름으로 노드 찾기 - 속성으로 노드 찾기 //////////////앞으로 등장할 예제는 아래 내용을 공통적으로 사용////////////// 샘플 페이지(div, id=samplePage, class=page) 헤더영역(div, id=samplePage, class=page) 노드 찾기(div, id=content, class=sample-content) 일반 노드 찾기(ul, class=menu) id로 찾기(li) tag로 찾기(li, class=select) class로 찾기(li) 속성으로 찾기(li, class=test1) 자식 노드 찾기(div, class=conte..

1.5장에서 간단하게 jQuery에 대해서 다룬 적이 있습니다. 이제는 좀 구체적으로 들여다 볼려고 합니다. jQuery 자바스크립트 요소 중 "자바스크립트 DOM" 부분을 좀더 쉽게 사용할 수 있게 도와주는 라이브러리라고 보시면 되겠습니다. - jQuery DOM jQuery의 가장 핵심적인 기능입니다. 노드를 찾고, 추가, 수정, 삭제까지 노드와 관련된 모든 기능을 제공합니다. -jQuery Ajax 서버와 데이터를 쉽게 주고 받는 통신 기능을 제공합니다. 동적인 화면을 쉽게 제작할 수 있습니다. HTML과 다른점이 정적인 화면을 동적으로 만들 수 있는 자바스크립트의 장점을 여기에 담고 있는거 같습니다. -jQuery 효과 인터렉티브 웹 콘텐츠 제작에 반드시 필요한 다양한 효과 기능을 기본적으로 제공..

jQuery는 자바스크립트로 만들어진 라이브러리입니다. DOM 작업을 쉽게 할 수 있는 기능을 가지고 있습니다. 자바스크립트 4가지 요소 -자바스크립트 Core 문법 기본 문법과 구조 데이터 타입 조건문 반복문 함수 클래스....... -자바스크립트 Core 라이브러리 타이머 함수 문자열 날짜및 시간 수학 배열 ...... - 자바스크립트 BOM(Browser Object Model) Window Navigator Location History Document Screan 객체들 - 자바스크립트 DOM(Document Object Model) 노드, 스타일, 속성, 이벤트, 위치및 크기 등을 다룰수 있는 기능이 포함 여기서 jQuery는 "자바스크립트 DOM" 부분을 쉽게 사용할 수 있게 도와주는 라이브..

Array 클래스 Array클래스에는 배열을 만드는 기능, 추가, 삭제, 찾기 등의 기능이 담겨 있습니다. 프로퍼티 목록 length 배열의 크기를 알수 있습니다. 메서드 목록 concat() 배열에 다른 배열이나 값을 연결해 새 배열을 만들어 변환 indexOf() 배열의 요소의 인덱스 값을 변환 pop() 마지막 배열 요소를 반환 push() 새로운 배열 요소를 마지막 배열 위치에 추가 sort() 배열 요소를 내림차순 또는 오름차순으로 정렬 .... - 배열 만들기 - 배열 요소 개수 알아내기 - 특정 위치의 배열 요소 접근하기 - 배열을 문자열로 만들기 - 문자열을 배열로 만들기 - 특정 위치에 배열 요소 추가 - 특정 위치의 배열 요소 삭제 - 정렬하기 -배열 만들기 리터럴 방식 var menu..