코딩하는 등산가

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

대부분의 작업은 노드를 찾고 난 후 다음 작업을 진행한다. - 아이디 이름으로 노드 찾기 - 태그 이름으로 노드 찾기 - 클래스이름으로 노드 찾기 - 속성으로 노드 찾기 //////////////앞으로 등장할 예제는 아래 내용을 공통적으로 사용////////////// 샘플 페이지(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..

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

String 클래스 문자열을 생성하는 기능을 시작으로 문자열과 유용한 기능이 있다. 프로퍼티 length 문자열 갯수 메서드 목록 charAt(n) n번째 문자 구하기 concat(str) 문자열 뒤쪽에 str을 연결해 새로운 문자열 만들기 indexOf(substr) substr 문자열이 위치한 위치값 구하기 match(reg) 정규표현식을 활용한 문자열 검색 split(str) 문자열을 str로 분할해 배열로 생성해 줌 -문자열 만들기 -문자열 길이 알아내기 -특정 위치의 문자 구하기 -문자 위치 찾기 -특정 위치에 문자 추가 -특정 위치의 문자를 다른 문자로 변경하기 -특정 위치에 문자 제거 -문자열 만들기 1. 리터럴 방식 var str = "Hello"; 2. String 클래스의 객체를 생성해..

Math 클래스 숫자를 랜덤하게 생성하는 기능부터 학창 시절에 배웠던 사인 코사인 기능이 있음 Math 클래스의 프로퍼티 PI 원주율 값 abs() 숫자의 절댓값을 반환 acos() 숫자의 아크 코사인 값 asin() 숫자의 아크 사인값 ...... Math.기능(); - 랜덤 숫자 만들기 - 작은값, 큰 값 알아내기 - 숫자 내림값, 올림값 구하기 -랜덤숫자 만들기 var value = Math.random()*원하는 수 리턴값 -> 0~1 사이의 소수값을 리턴 /////////// 0.5초에 한 번씩 50에서 100 사이의 숫자를 #info에 출력해 주세요./////////// /////////////////////////////////////////////////////////////////////..

jQuery는 div와 같은 특정 효과를 연출하는데 사용합니다. 빠르게 작업할 수 있게 도와주는 크로스 브라우징 라이브러리입니다. 자바스크립트에서 직접 치는 것 보다 편한 이유를 코드를 통해서 확인하시면 됩니다. 1. 자바스크립트를 사용한경우 2. jQuery를 사용한 경우 jQuery 기능이 들어있는 라이브러리 파일을 연결해야 합니다. jQuery를 이용한 노드 찾기 jQuery에는 수많은 노드 찾기 기능을 제공합니다. var $ 변수이름 = $("CSS 선택자"); $() 그냥 함수 호출입니다. 함수 이름이 $인 것을 호출한 것입니다. 함수의 역활은 해당하는 노드를 찾아줍니다. "CSS 선택자" 함수의 매개변수를 넣어주면 된다. var $ 변수이름 $() 함수에서 리턴해주는 값을 저장하기 위해 만든 ..

함수 특정 기능을 하는 구문을 묶어 재사용하는 문법 함수의 생김새 function 함수이름([매개변수1,매개변수2,....]){ //이곳에 넣고 싶은 구문을 넣으면 됩니다~ return 값; } 호출할때는 함수이름(); 을 이용한다. 매개변수 함수 내부는 함수 외부에서 접근할 수 없습니다. 이때 함수 외부에서 함수 내부로 값을 전달하는 방법이 매개변수를 이용하는 것입니다. 리턴값 매개변수와 반대개념입니다. 리턴값은 함수 내부에서 함수 외부로 데이터를 보내기 위해 사용합니다. var 변수 이름 = 함수이름([매개변수]); var data = sum(10,20); var data = 30;//최종적인 결과가 이렇게 바낀다. 함수 종류 -자바스크립트 코어 함수 가장 기본이 되는 기능을 미리 구현해 제공 -사용..

보호되어 있는 글입니다.

1. 숫자연산자 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 ex) var a = 10; var result = a+20; document.write("result = "+result); 2. 문자 연산자 + 문자열 더하기 ex) var name = " 로즈"; var gender = "미스터"; document.write(gender + name); 3. 복합 연산자 += 더하고 대입 -= 빼고 대입 *= 곱하고 대입 /= 나누고 대입 %= 나머지값 대입 4. 증감 연산자 ++ 1을 증가 시킴 -- 1을 감소 시킴 전위 연산자 vs 후위 연산자 전위 연산자는 자기자신을 먼저 증가 시키고 그 문장을 해결 후위 연산자는 다른 행동을 먼저 취하고 자신을 증가시킴 5. 연산자 우선순위