성장을 위한 기록

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌) 문제 시 바로 삭제하겠습니다. 출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com) 문자열 매소드 문자열로 표현하는 방법은 작은 따옴표(') 큰 따옴표 (") 백틱 (`)가 있다. 백틱을 제외하고 따옴표로 여러 문자열을 묶을 때는 원치 않는 결과가 나올 수 있으므로 조심해야한다. 약간의 tip을 주자면 html은 클래스 명과 같이 큰 따옴표가 자주 들어감으로 전체를 작은 따옴표를 묶어주는 것이 좋다. 영어 문장에 경우 어퍼스트로피(')가 작은 따옴표와 동일하게 사용되서 큰 따옴표로 묶어주는 것이 좋다. 백틱은 시작과 끝에 작성하여 묶는다 사이에 변수나 식처럼 문자열이 아닐 경..

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌) 문제 시 바로 삭제하겠습니다. 출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com) Number, Math 매서드 일상 생활의 숫자는 10진수이다. **이를 2진수나 16진수로 변경하는 방법이 있다.** let num1 = 10; num1.toString(); /* '10'*/ num1.toString(2); /*1010*/ let num2 = 255; num2.toString(16); /* 'ff'*/ 예시에서 보듯이 toString()매서드를 사용하면 문자열로 반환이 된다. 인수를 2나 16을 사용할 경우 변수의 숫자를 2진수. 16진수로 반환한다. Math 매서드 .PI..

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌) 문제 시 바로 삭제하겠습니다. 출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com) 생성자 함수 function Item(name, price){ /*this = {};*/ this.name = name; this.price = price; /*return this;*/ } const item1 = new Item('사과', 5000); const item2 = new Item('배', 7000); console.log(item1 , item2); /*값 :Item {name : '사과', price : 5000} , Item {na..

버튼 클릭 시 이동하는 슬라이드 이미지 let slideImage = document.querySelectorAll("#slideImage > img"); //이미지 가져오기 let prev = document.getElementById("prev"); // 이전 버튼 가져오기 let next = document.getElementById("next"); // 다음 버튼 가져오기 let current = 0; prev.onclick = prevSlide; // 이전 버튼 클릭 시 함수 실행 next.onclick = nextSlide; // 다음 버튼 클릭 시 함수 실행 function changeSlide(n){ for( let i = 0 ; i < slideImage.length; i++){ slid..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 문서 객체 모델(DOM) 문서 객체 모델 document object model으로 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다. 웹 문서를 하나의 객체로 정의하고 그 문서를 이루는 텍스트, 이미지, 표 등을 각각 객체로 정의한다. DOM 트리 요소를 부모와 자식 구조로 표시하면 나무 형태가 된다 하여 DOM트리라 불르고, 가지처럼 갈라져 나간 항목을 노드라 말한다. html노드는 뿌리에 해당되기 때문에 루트(root) 노드라고 한다. 또한 관계에 따라 부모 노드에는 자식 노드가 있고 같..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 브라우저랑 관련된 객체 브라우저와 관련된 객체를 이용하면 새 탭을 여는 등 여러 효과를 낼 수 있다 웹 브라우저가 열리면 window라는 최상위 객체가 만들어지고 밑으로 하위 객체가 만들어지는 계층 구조를 지니고 있다. 내장 객체 종류 설명 window 최상위 객체이며 브라우저 창이 열릴 떄마다 하나씩 만들어진다 document 문서마다 하나씩 만들어지며 태그를 만나 만들어진다 navigator 브라우저의 정보가 담겨져 있다 history 사용자의 방문 기록을 저장한다 location 현재 페이지에 URL정보가 있다 screen 화면 정도를 다룬다 wind..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 객체 자바스크립트 한정으로 프로그램에서 인식할 수 있는 모든 대상을 객체라 가르킨다. 객체 종류 문서 객체 모델(DOM) - 웹 문서 또한 객체이고 삽입된 이미지, 링크 등도 객체이다. 브라우저 관련 객체 - 웹 브라우저에서 사용하는 정보, history, location 객체 등이 있다. 내장 객체 - 자바스크립트 안에 미리 객체로 정의 되어 있는 객체 객체를 사용할 때에는 참조 형태를 이루어야 한다. 즉 자체로는 사용하지 못하고 인스턴스로 만들어 사용해야하는데, 만들 때는 new 예약어를 사용하여 뒤에 객체 이름을 적으면 된다. new 예약어 객체에는 ..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 이벤트와 이벤트 처리기 버튼을 클릭하거나 선택하는 것을 이벤트, 그 이벤트를 실행시키는 함수를 이벤트 처리기라 한다. 이벤트는 다양한 방법으로 발생되게 된다. 마우스 이벤트 종류 설명 click 사용자가 버튼 요소를 클릭할 때 발생 dbclick 더블클릭할 때 발생 mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 mousemove 요소 위에서 마우스 포인터를 움직일 때 mouseover 마우스 포인터가 요소 위로 옮겨질 때 mouseout 마우스 포인터가 요서를 내려갈 때 mouseup 마우스 버튼에서 손을 땔 때 키보드 이벤트 종류 설명 ..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 함수의 재사용 함수를 사용하는 가장 큰 장점은 재사용성이라 할 수 있다. 예로 alert()함수를 사용할 때 괄호 안에 메시지만 바꿔서 실행 할 수 있다. 이렇듯 재사용할 수 있는 함수를 만들기 위해서는 매개변수, 인수, return이 필요하다. function plusNum(num1, num2) { var sum = num1 + num2 ; return sum ; } var result = plusNum(2,3); document.write(result); 매개변수 매개변수는 외부에서 값을 받아 줄 변수이며, 함수 괄호 안에 매개변수의 이름을 넣어야한다...