객체와 메소드(method)

▶객체는 데이터의 조합으로 속성과 메소드를 함께 가리키는 단위이다.

▶속성과 메서드를 합한 값이 객체가 된다.

▶속성 (property) : 객체가 가진 성질 , 또는 상태, 정적인 것, 객체 안에 함수가 아닌 값 = 속성

▶메소드 : 객체에 속한 (종속적인) 함수로 객체의 동작을 나타낸다, 동적인 것, 객체 안에 존속되어 있는 함수 = 메소드

 

함수

▶함수란 특정한 작업을 독립적으로 수행하는 단위

EX)리모컨 : 음소거라는 함수, 1, 2, 3, 4 숫자 함수 채널 상승 함수 등

▶메소드(method) : 함수안의 부분집합으로 객체에 속한 함수를 메소드라고 부르고 이 메소드는 객체 클래스로부터 종속적이다.

▶내장함수 : 이미 시스템에 정의되어있는 함수로 사용자가 정의 없이 사용할 수 있는 것

▶매개변수 : 함수안에 어떤 값을 입력하여야 할 때 () 안에 넣는 것 . 기본값은 비워져 있다.

EX)함수 != 붕어빵틀, 요즘 빵은 슈크림, 고구마 등 들어가는게 많음. 

함수 선언하기

▶function ⇒함수를 생성하겠다는 선언

function 이름 ⇒ 함수의 이름이 작성되어야 한다.

function 이름() ⇒ ()자리는 매개변수의 자리

function 이름(){} ⇒ {}자리는 해당 함수의 기능을 적어주는 자리 

매개변수가 없는 함수 작성하기

매개변수가 없는 함수 호출된 모습
매개변수가 있는 함수
매개변수가 있는 함수의 호출된 모습
매개 변수가 있는 함수 키 값을 넣지 않았을 때

▶함수를 호출 할 때 매개변수 자리에 값을 넣으면 해당 값은 함수의 매개변수를 타고 함수 내부로 이동해서 작동한다.

▶따라서 매개변수가 있는 함수는 호출 할 때 매개변수 자리에 해당 값을 넣어야 한다. 넣지 않을 경우 UNDEFINED라는 오류가 발생한다.

 

함수(Function) 와 메소드(Method) 의 차이점
함수는 특정 작업을 수행하기 위해 설계된 기능 메소드는 객체의 프로퍼티가 함수인 경우
직접호출 가능 점 표기법 또는 대괄호 표기법을 사용해서 호출 가능
재사용 가능 함수에 비해 재사용이 어렵다
자체적으로 존재한다 객체와 연결되어 있다
 

'코린이 개념잡기 > JavaScript' 카테고리의 다른 글

데이터의 종류(자료형)  (0) 2024.01.19
자바스크립트 기초  (0) 2023.04.26
자바스크립트 4 객체의 메소드와 속성  (0) 2023.03.23
자바스크립트 2 변수  (0) 2023.03.20
자바스크립트 1 + HTML에서 자바스크립트 사용하기  (0) 2023.03.20

변수 :

데이터를 저장하고 참조(사용)하는 데이터의 이름. var, let 재사용이 가능하다. (var는 되도록 사용하지 않도록 하자. 권장사항이 아님.) 

let a = 2;
let b = 5;

console.log(a + b); // 7 
console.log(a - b); // -3
console.log(a * b); // 10
console.log(a / b); // 0.4

//변수의 이름을 명시하고 데이터를 넣는 행위를 변수를 선언한다 라고 한다.

상수 :

값(데이터)의 재할당 불가! const로 시작하며 선언, 값을 한번 넣으면 변경이 불가능하다.

const a = 12;
console.log(a); //12

a = 999;
console.log(a); // TypeError: Assignment to constant variable.

 

변수는 왜 사용하는가 ?

1. 자주 쓰는 데이터 값을 효율적으로 관리하기 위해서

2. 한 번 찾은 데이터를 재활용 하기 위해서

 

변수 선언방법 3가지

var 변수이름 = 데이터;

let 변수이름 = 데이터;

const 상수이름 = 데이터;

▶변수명은 중복해서 사용은 불가능. 만약 중복 할 경우 나중에 부여된 값이 덮어 쓴다. (한 공간에는 하나의 값만 부여 가능)

 

변수명 작성시 유의점

1. 숫자로는 시작 불가

2. 특수문자 삽입은 불가능 (예외 : _(언더 바), $(달러))

3. -(빼기) 사용불가 (예약어이기 때문에)

4. 대소문자 구분해야 된다.

5. 예약어들은 모두 불가

6. 한글을 되도록 피하는게 좋다.

 

변수의 종류 (유효범위, scope)

지역변수 (local vaiable) : 선언된 {} 안에서만 공유가 된다. 선언된 {}는 대부분 함수이다.

전역변수 (global vaiable) : {} 밖에서 선언되어 js 페이지 전체에서 사용이 가능한 변수

▶변수끼리 연산도 가능하다.

연산 명령

결과값

 

'코린이 개념잡기 > JavaScript' 카테고리의 다른 글

데이터의 종류(자료형)  (0) 2024.01.19
자바스크립트 기초  (0) 2023.04.26
자바스크립트 4 객체의 메소드와 속성  (0) 2023.03.23
자바스크립트 3 함수와 메소드(method)  (0) 2023.03.22
자바스크립트 1 + HTML에서 자바스크립트 사용하기  (0) 2023.03.20

자바스크립트

▶자바스크립트는 선 마이크로시스템즈 (Sun MicroSystems) 와 넷스케이프에서 공동으로 개발한 스크립트 언어.

▶객체지향적 언어 (주의! 객체언어는 아니다.)

▶웹 브라우저가 직접 번역하여 수행(=엔진을 가지고 있다.)하기 때문에 인터프리터(해석기)에 의해 실행되고, 컴파일 과정 (컴퓨터언어)이 없다.

→구글 크롬이 많이 사용 되는 이유 : 자바스크립트 언어를 빨리 해석함.

▶문법이 비교적 간단(=보조적인 수단이 필요가 없다.)해 쉽게 프로그래밍할 수 있다

▶플랫폼에 독립적(=어딘가에 귀속되어 있지 X)이라 이식성이 높다. 즉, 모든 운영체제, 하드웨어에서 사용할 수 있다.

 

HTML에서 자바스크립트 사용하는 방법 (6가지)

1. 직접 코딩하는 방법 2가지 (지금 실무에선 사용하지 않는다. 최초 자바스크립트 이용 시 사용 했던 내용)

▶<script language="javascript"> 자바스크립트 구문 </script>

▶<script type="text/javascript">

<!--

자바스크립트 구문

//-->

</script>

▶웹 표준에선 권장하지 않는 방법으로 지금은 사용하고 있지 않지만 웹디자이너 기능사 시험에선 출제 多

▶자바스크립트를 지원하지 않는 브라우저가 없으므로 이 방법은 더 이상 사용하지 않는다.

▶이전에는 브라우저 중에서 지원하지 않는 경우가 있어서 자바스크립트가 문자열로 인식되기 때문에 주석 처리를 하였다.

2. <head></head> 안에 작성 하는 방법

▶html 을 브라우저가 인식하는 과정 (구문 해석하는 과정)에서 script 를 만나면 해당 내용 혹은 파일을 fetching 하고 executing 한 뒤에 나머지 html 을 인식하게 됨으로 script의 파일이 크고 많은경우 html 을 해석하는데 많은 시간이 걸리게됨

 

3. body 태그 하단에 script를 작성하는 방법

▶모든 html 을 다 해석한 뒤에 스크립트를 fetching 하고 executing 하기 때문에 순서상으로는 문제가 되지 않지만 자바스크립트의 내용이 중요한 문서의 경우 script의 fetching이 늦어지는 문제가 발생

 

4. head 태그 안에 사용하면서 속성값 async를 사용하는 방법 (병렬적 사용방법)

▶async 의 문제점 : fetching 이 완료되는 시점에 기존의 작업을 멈추고 executing 을 시작하므로 html 을 해석하기 전의 시점일경우 제대로 작업하기 힘들고 , 여러개의 스크립트가 있을경우 먼저 fetching 된 스크립트 먼저 실행하는 문제가 발생

 

5. head 태그 안에 사용하면서 속성값 defer를 사용하는 방법 (병렬적 사용방법) (가장 적절한 방법)

▶script 구문을 만나 fetching 만하고 html 구문을 모두 해석한 뒤 executing 을 하게됨

 

 

'코린이 개념잡기 > JavaScript' 카테고리의 다른 글

데이터의 종류(자료형)  (0) 2024.01.19
자바스크립트 기초  (0) 2023.04.26
자바스크립트 4 객체의 메소드와 속성  (0) 2023.03.23
자바스크립트 3 함수와 메소드(method)  (0) 2023.03.22
자바스크립트 2 변수  (0) 2023.03.20

+ Recent posts

티스토리툴바