[JavaScript] 내가 보려고 정리한 Do it 자바스크립트 기본편(3)

5장

 

🍮함수🍮

 

함수 선언

function addNum(a,b){
    return a+b;
}

함수 선언과 호출 위치에 관계없이 모두 실행된다

 

익명 함수

var add=function(a,b){
    return a+b;
}

var num1=parseInt(prompt('첫 번째 숫자를 입력하시오'));
var num2=parseInt(prompt('두 번째 숫자를 입력하시오'));

//parseInt는 문자열로 입력받은 것을 정수로 변환

var result=add(num1, num2);
console.log(sum);

함수 자체가 식이기 때문에 익명 함수를 변수에 할당할 수 있다

 

즉시 실행 함수

var sum=(function(a,b){
    return a+b;
}(10,20));

/*
이렇게도 가능
var sum=(function(a,b){
    return a+b;
})(10,20);
*/

console.log(sum);

---

🍮이벤트🍮

어떤 동작!

 

• 마우스 이벤트
  • click
  • dbclick: 더블 클릭했을 때
  • mousedown: 요소를 클릭하는 동안
  • mousemove: 요소에서 포인터가 움직이는 동안
  • mouseover: 포인터가 요소로 옮겨질 때
  • mouseout: 포인터가 요소를 벗어날 때
  • mouseup: 마우스 버튼에서 손을 뗄 때
• 키보드 이벤트
  • keypress: 키 눌렀을 때
  • keydown: 키를 누르는 동안
  • keyup: 키에서 손을 뗄 때
• 문서 로딩 이벤트
  • abort: 웹 문서 로딩 전 정지됐을 때
  • error: 로딩 x
  • load: 로딩 끝날 때
  • resize: 화면 크기 바뀌었을 때
  • scroll: 스크롤되었을 때
  • unload: 문서 벗어날 때
• 폼 이벤트
  • blur: 폼 요소 포커스 잃었을 때
  • change: 상태 변경됐을 때
  • focus: 폼 요소에 포커스 놓였을 때
  • reset: 다시 시작됐을 때
  • submit: submit 버튼 눌렀을 때

이벤트 처리기= 'on'

이벤트 명 앞에 on을 붙이면 그다음의 명령이나 함수를 실행한다

 

**갑자기 실습하다가 생각난 것!**

 

자바스크립트에서 따옴표를 중복해서 써야 하는 상황에서는 겉의 따옴표와 안의 따옴표는 중복될 수 없다

 

ex)

<button class="over" id="open" onclick="alert('눌렀습니다')">상세 설명 보기</button>
//위와 같이
//"alert('눌렀습니다')"에서 겉은 ", 안은 '

 

이 뒤로 한 실습은 따로 정리하지 않을 거임!

변수에 document.querySelector("#id") 할당해주고 각 이벤트마다 익명 함수 사용해주면 됨!

 

속성에서 style 태그 사용해서 설정한 뒤에 초기화시키려면 ""만 쓰면 됨

---

6장

 

🍮객체🍮

 

자바스크립트는 '객체 기반 언어'

하나의 변수에 다양한 정보를 담기 위해 숫자, 문자열 등 여러 자료형이 포함됨(복합 자료형)

 

 

객체 종류

 

• 내장 객체: 미리 정의되어있는 객체(Date, Number, Boolean, Array, Math,...)
  • 문서 객체 모델(DOM): 웹 문서를 객체로 관리(Document, Image,...)
  • 브라우저 객체 모델: 웹 브라우저 정보를 객체로 관리(Nagatior, History, Location, Screen,...)
• 사용자 정의 객체: 직접 객체 정의

var book = {
	title: "책 이름",
    pages: 500
}

 

 

속성 💨  속성을 확인할 때는 객체 입력 후 마침표(.) 찍으면 됨

 

메서드 💨  window 입력 후 엔터 누르면 window 객체의 메서드 확인 가능(사용하는 법은 속성과 같음)

 

 

객체의 기본 틀을 '프로토타입'이라고 하고 프로토타입을 사용해서 만든 객체를 '인스턴스'(개별 객체)라고 함

now = new Date() //new 예약어를 사용해서 Date 객체의 인스턴스를 만들고 now 변수에 저장
now //now는 Date 객체의 인스턴스! Date의 모든 속성과 함수 사용 가능

 

 난수 생성

Math.floor(Math.random()*100+1)

 

사용자 정의 객체 만드는 방법 

 

• 리터럴 표기법

: 변수를 선언하며 동시에 값을 지정하는 표기 방식

var book = {
	// 값 지정해줄 때 : 사용 + ,로 구분
    title: "책 이름",
    pages: 500,
    info: function(){
        alert(this.title+" 책의 분량은 "+this.pages+"쪽 입니다.");
    }
}

//속성 추가해주고 싶은 경우 속성 추가 후 값 넣기
book.field="IT"

 

• 생성자 함수

: 객체를 만들어 내는 함수

대문자로 시작해야 함!

* 새 인스턴스 만들어 줘야 사용가능! (형식만 만들어준 느낌)

// 값 지정해 줄 때 = 사용 + this는 Book 객체 의미
function Book(author, pages, price, title){
    this.author=author;
    this.pages=pages;
    this.price=price;
    this.title=title;
    // 함수
    this.func=function(){
    	alert("함수임");
    }
}

// new 예약어를 통해 새 인스턴스 만들어 줘야 사용가능
var Book_1 = new Book("저자", 500, 15000, "책 제목");

 

 

Date 객체에 대해 (더 자세히 보고 싶다면 더보기 누르기!)

현재 날짜 정보 갖는 Date 객체 만들기

new Date();

 

특정 날짜, 시간 정보 갖는 Date 객체 만들기

// 연도, 월 지정 -> 해당 월의 1월 9시
new Date("2000-10")

// 연도, 월, 일 지정 -> 해당 날짜의 9시
new Date("2000-10-11")

// 연도, 월, 일, 시간 지정 *(일)T시간 꼭 붙여써야 하는 듯!
new Date("2000-10-11T18:00:00")

// 국제 표준시 (Z 붙이기)
new Date("2000-10-11T18:00:00Z")

 

날짜 표현 방식

• YYYY-MM-DDTHH:MM:SS (일까지 지정했을 때 이 표기법만 9시 나머지는 00시)
• MM/DD/YY
• MMM DD YYYY(월은 영어로 작성)

함수는 get(값 가져오기), set(값 설정하기)으로 나뉨

(* Month와 Day는 0부터 시작됨 - 일월화수목금)

// 이런 식으로 사용
var now = new Date()

now.getYear()

 

끝!! 토요일에 스터디,, 내일은 서울 가는 날,, 내일 갔다와서 7장 해야된다...