<section 01: 자바스크립트의 개요>
자바스크립트: 연산자와 제어문은 C/C++과 유사하며 객체지향의 상속 방식은 프로토타입 기반
참고) 프로토타입이란?
객체지향의 한 형태, 클래스가 없이 객체의 프로토타입(원형)을 복제해서 재사용하는 방식으로 상속함
프로타입 기반은 클래스리스, 프로토타입 지향 또는 인스턴스 기반이라고 부른다
▶ 자바스크립트는 웹상에서 html의 프로그래밍 언어
프로그래밍 언어는 컴퓨터에게 어떤 동작을 수행시킬 수 있다는 뜻
즉 , HTML 태그에 어떤 동작을 부여해서 작업을 처리함
▶자바스크립트 사용방법
1) HTML 페이지 내부에 포함해서 작성하는 방법
<script></script> 태그 사이에 자바스크립트 코드들을 기슬하며, 최신버전에는 속성을 쓰지 않음
해당 html 페이지에서만 사용할 수 있으며, 다른 페이지에서는 재사용할 수 없다.
2) 별도의 파일로 작성 후 필요한 페이지에서 가져다 쓰는 방법
<script src="경로를 포함한 자바스크립트파일명"></script>
간단한 자바스크립트를 제외한 대부분의 자바스크립느는 재사용성을 위해 외부파일로 저장 후 필요할 경우 사용하는 것이 좋음.
▶자바스크립트의 문장구조
자바스크립트는 유니코드 기반의 프로그래밍 언어이다
자바스크립트는 대소문자를 구분한다
자바스크립트에서 문장의 끝은 세미콜론으로 구분한다
자바스크립트는 자바, C계열의 주석인 //, /**/ 을 사용한다
<자바의 리터럴(데이터 값)>
| 리터럴(값) | 설명 |
| 5 | 정수 리터럴 |
| 5.0 | 실수 리터럴 |
| "test" 'test' | 문자열 리터럴 |
| false | 부울 리터럴 |
| null | null.리터럴 레퍼런스 타입(객체타입) 변수의 초기화 등에 사용 객체 변수가 이 값을 갖게 되면 할당된 객체가 없다는 의미 |
| [1,2,3] | 배열 리터럴 |
| function(){} | 함수 리터럴 |
| {id: "aaaa"} | 객체 리터럴 |
<자바스크립트의 식별자 규칙>
첫 글자는 영문자, _, $ 를 사용할 수 있으며, 나머지 글자는 숫자도 사용할 수 있음
식별자는 클래스명, 함수명,변수명과 같은 이름을 의미함
<자바스크립트의 변수 선언>
변수를 선언할 때 특별히 데이터 타입을 지정하지 않으며 데이터 타입은 값을 할당할 때 결정됨
var 변수명= 리터럴;
숫자 값을 넣으면 숫자변수가 되고, 문자열을 넣으면 문자열 변수가 되고, 객체를 넣으면 객체가 됨
객체변수의 예)
var calss1= {classNo : "101", className: "HTML, CSS&JavaScript"};
var 객체변수명 = {프로퍼티, 메소드};
<자바스크립트의 키워드> =예약어
: 자바에서와 같이 소문자로만 이뤄짐
▶데이터 타입 : 프로그래밍은 데이터를 처리해서 원하는 결과를 얻어내는 과정
데이터의 종류에 따라 처리하는 방법이 다름
-기본 데이터 타입
: 숫자, 문자, 부울, 객체, undefined, null, e
- 객체(레퍼런스) 타입 : 변수에 객체의 주소를 저장하며 객체, 배열, 함수가 해당
| 문법 : var 변수명 = 리터럴 값; | |
| 리터럴 값 | 문자/숫자 데이터, 객체(객체, 함수, 배열) 등이 옴 |
| 숫자변수 선언 | var1 v1=3 |
| 문자변수 선언 | var2 v2="aa" |
| 객체변수 선언 | var v3={id : "aaaa"}; |
| 배열변수 선언 | var v4=["a","b"] |
| 빈 배열변수 선언(권장x) | var v4=new Array(2); |
| 원소 값을 갖는 배열변수 선언 | var v5=function(){return 1;}; = function v5(){return 1; }; |
▶자바스크립트 프로그래밍 권고
1. 전역변수는 가급적 사용을 자제한다
2. 지역변수를 사용시 선언하고 사용한다
3. 참조대상(변수 등)은 먼저 선언하고 사용한다
4. 변수는 사용 전에 초기화한다
5. 숫자, 문자, 부울 값은 객체 형태로 쓰지 않는다
6. 문자열, 객체, 배열, 함수 생서시 new키워드를 사용해서 생성하지 않는다
| 새로운 객체 생성 | var x1={}; |
| 문자열 생성 | var x2=" "; |
| 슷자 | var x3=0; |
| 부울 | var x4=false; |
| 배열 | var x5=[]; |
| 정규표현식 | var v6=/()/; |
| 기능 | var v7=function(){}; |
7. 자동형변환에 주의한다
'HTML&CSS&JavaScript > 교재' 카테고리의 다른 글
| CH5- sec3. 동작을 처리하는 자바스크립트와 제이쿼리 라이브러리 (0) | 2025.03.04 |
|---|---|
| CH5- sec2. 동작을 처리하는 자바스크립트와 제이쿼리 라이브러리 (0) | 2025.03.03 |
| CH4- sec5 태그를 표현하는 CSS와 Advanced CSS3 (0) | 2025.03.03 |
| CH4- sec4태그를 표현하는 CSS와 Advanced CSS3 (0) | 2025.02.28 |
| CH4- sec3 태그를 표현하는 CSS와 Advanced CSS3 (0) | 2025.02.27 |