코딩하는 등산가

자바스크립트 기초 강의(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..

객체 지향 언어 객체들은 특성과 행동을 가지며 이러한 특성과 행동은 상호작용하며 만들었습니다. 클래스와 객체의 개념을 도입했습니다. 객체 지향 언어의 특성 3가지 -캡슐화 -상속 -다형성 캡슐화 객체를 캡슐로 싸서 그 내부를 보호하고 볼 수 없게 하는것으로 객체의 가장 본질적인 특성입니다. 클래스 모양 그대로 생성된 실체 즉 인스턴스가 객체이다. 그리고 필드와 메소드가 클래스 내에 구현된다. 필드는 String name; int age; 가 만들어 지는 부분이고, void sleep(); void walk(); 등이 구현 되는 것을 메소드라고 한다. 상속 상위 개체의 속성이 하위 개체에 물러져서, 하위 개체가 상위 개체의 속성을 모두 가지는 관계 부모 클래스의 속성을 물려받아 확장하는 개념입니다. 부모클..

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" 부분을 쉽게 사용할 수 있게 도와주는 라이브..

배열 인덱스와 인덱스에 대응하는 데이터들로 이루어진 연속적인 자료 구조, 순차적으로 저장 int i[] = new int[10]; 10개의 정수 공간을 가진 배열을 만든다. 배열에 대한 레퍼런스 변수 선언 +배열 생성 - 배열 공간 할당 배열에 대한 레퍼런스 변수 선언 int intArray[]; //배열에 대한 레퍼런스 변수 intArray를 선언 int [] intArray; // 위와 동일한 코드 int intArray[5]; // 이런식으로 만들면 오류 그 후에 배열을 생성한다. intArray = new int[5] /////////////////5개의 수 입력 제일 큰 수를 출력//////////////////////////// import java.util.Scanner; public cla..

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