WEB
1. 자바스크립트의 개요
자바스크립트란
자바스크립트는 넷스케이프사에서 웹 페이지의 처리 능력을 향상시킬 목적으로 개발한 LiveScript 기반으로,
넷스케이프사와 선마이크로시스템즈사가 공동으로 개발한 스크립트 언어.
연산자와 제어문은 C/C++과 유사하며 객체지향의 상속 방식은 프로토타입(prototype)기반.
프로토타입 기반(prototype-based)
프로토타입 기반은 객체지향의 한 형태로, 클래스가 없이 객체의 프로토타입(원형)을 복제해서 재사용하는 방식으로 상속한다. 프로토타입 기반은 클래스리스(class-less), 프로토타입 지향(prototype-oriented) 또는 인스턴스 기반(instance-based) 이라고도 부른다.
자바스크립트는 웹 브라우저를 제어하고 웹 페이지의 동적인 변화를 처리한다. 웹 브라우저에 내장되어 제공되는 자바스크립트는 HTML 페이지에 포함된 부분을 처리하는데, 이 것은 서버가 아닌 웹 브라우저에서 처리된다.
자바스크립트는 웹상에서 HTML의 프로그래밍 언어이다. 프로그래밍 언어라는 의미는 컴퓨터에게 어떤 동작을 수행시킬 수 있다는 뜻이다. 즉, HTML 태그에 어떤 동작을 부여해서 작업을 처리한다.
자바스크립트는 모든 웹 개발자들이 기본적으로 반드시 배워야 하는 3개의 언어인 HTML, CSS, JavaScript 중 하나이다.
HTML은 웹페이지의 내용을 정의하며, CSS는 웹 페이지의 표현 방법을 기술, JavaScript는 웹 페이지의 동작을 프로그래밍한다.
자바스크립트 사용 방법
HTML 페이지에 자바스크립트를 기술 및 사용할 때는 <script> 태그를 사용해서 한다. <script> 태그는 사용 방법에 따라
자바스크립트 코드를 HTML 페이지 내부에 포함해서 작성할 수 있고 별도의 파일로 작성 후 필요한 페이지에서 가져다 쓸 수도 있다.
HTML 페이지 내부에 포함해서 작성하는 방법은 <script></script> 태그 사이에 자바스크립트 코드를 기술하며, 최신 버전에서는 속성을 쓰지 않는다.
<script>
//자바스크립트 코드 기술
</script>
이렇게 작성한 자바스크립트 코드는 해당 HTML 페이지에서만 사용할 수 있으며, 다른 페이지에서 재사용할 수 없다.
<script></script> 코드는 주로 <head> 태그 안에 기술함
별도의 파일로 작성 후 필요한 페이지에서 가져다 쓰는 방법은 HTML 페이지에서 외부의 파일로 작성된 자바스크립트 파일을 현재의 페이지에서 포함시켜 실행할 경우에는 src 속성에 사용할 자바스크립트 파일명을 쓴다.
<script src="경로를 포함한 자바스크립트파일명"></script>
간단한 자바스크립트를 제외한 대부분의 자바스크립트는 재사용성을 위해 외부 파일로 저장한 후 필요할 경우 사용하는 것이 좋다. 일종의 라이브러리와 같은 역할을 하기 때문에 필요한 경우 엔제든지 사용할 수 있다.
자바스크립트의 문장 구조
프로그래밍 언어는 컴파일러가 알아볼 수 있는 유효한 문장을 작성하는 규칙을 가지고 있다. 이것은 한 문장의 끝은 어떻게 표시하고, 변수의 선언문들은 어떻게 기술해야 하는가 등 규칙을 말한다.
자바스크립트는 유니코드(Unicode)기반의 프로그래밍 언어이다.
유니코드는 한 문자가 2바이트를 표시하는 세계 문자를 표시하기 위한 문자 코드 체계이다.
자바스크립트는 대소문자를 구분한다.
자바스크립트는 대소문자를 구분하는 언어이기 때문에 변수명, 키워드 등을 사용할 때 주의해야한다.
자바스크립트에서 문장의 끝은 세미콜론(;)으로 구분한다.
문장이 한 줄씩 구분된 경우에는 세미콜론(;)을 생략해도 된다. 그러나 reutrn false; 등과 같은 return문에는 반드시 세미콜론(;)을 사용하는 것이 좋다. 가급적이면 문장 끝을 표현하는 ;을 생략하지 않는다.
자바스크립트는 자바, C계열의 주석인 //, /**/을 사용한다.
자바의 리터럴(데이터 값)
리터럴은 값을 의미하며 숫자 타입은 그냥 기술하고, 문자열 타입은 큰따옴표(" ")로 둘러 싸서 표현한다.
불린(boolean)타입, 문자(character) 타입 및 함수, 객체, 배열 값도 리터럴로 취급한다.
| 리터럴(값) | 설명 |
| 5 | 정수 리터럴 |
| 5.0 | 실수 리터럴 |
| "test", 'test' | 문자열 리터럴, 자바스크립트는 문자열 리터럴 표현에 " ", ' '를 둘 다 사용할 수 있음 |
| false | 불린 리터럴 |
| null | null 리터럴. 레퍼런스 타입(객체 타입) 변수의 초기화 등에 사용. 객체 변수가 이 값을 갖게 되면, 할당된 객체가 없다는 의미 |
| [1, 2, 3] | 배열 리터럴 |
| function(){} | 함수 리터럴 |
| [id : "aaaa"} | 객체 리터럴 |
자바스크립트의 식별자 규칙
첫 글자는 영문자, _, $를 사용할 수 있으며, 나머지 글자는 숫자도 사용할 수 있다. 그러나 가급적이면 영문자로 시작하는 것이 좋다. 식별자는 클래스명, 함수명, 변수명과 같은 이름을 의미한다. 식별자 규칙은 명명시의 규칙이라 할 수 있다.
자바스크립트의 변수 선언
var 변수명 = 리터럴; 과 같은 형식으로 사용한다.
var 변수명 = 리터럴;
변수를 선언할 때 특별히 타입을 지정하지 않으며, 데이터 타입은 값을 할당할 때 결정된다.
즉, 숫자를 넣으면 숫자 변수가 되고, 문자열을 넣으면 문자열 변수가 되고, 객체를 넣으면 객체 변수가 된다.
자바스크립트의 키워드
자바에서와 같이 소문자로만 이루어진다. 키워드는 해당 프로그래밍 언어에서 특별한 목적으로 사용되는 단어이기 때문에
그 목적 외에 다른 것으로는 사용할 수 없다.
자바스크립트의 키워드 참조 : (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words)
데이터 타입
프로그래밍은 데이터를 처리해서 원하는 결과를 얻어내는 과정으로 데이터의 종류에 따라 처리하는 방법이 다른다.
자바스크립트의 데이터 타입에는 숫자, 문자, 불린, 객체, undefined, null, empty 등이 있으며 기본데이터 타입과 객체 타입으로 나뉜다.
undefined, null, empty 값의 차이
undefined : 변수 등 타입이 정의되지 않음(값이 할당되지 않음)
null : 객체 레퍼런스 변수가 가리키는 객체가 없음. 객체 초기화 등에 사용
empty : 문자열 변수 등의 값이 비어 있음(공백 값)
숫자 타입
숫자 타입은 산술연산에 사용되며 0~9, 부호(-), 소수점으로만 이루어진다.
문자열 타입
숫자, 문자로 이루어진 데이터로 " "나 ' '로 둘러싸서 표현한다.
불린 타입
불린 값 true 또는 false 값을 갖는 타입 표현에 사용된다.
참조 데이터 타입 : 객체 타입
자바스크립트에서는 객체 및 배열, 함수, 정규 표현식도 객체 타입으로 취급한다.
객체 : { }
자바스크립트에서 객체는 { } 기호를 사용해서 정의하며 { } 안에 프로퍼티, 메소드 등을 기술한다.
각각의 프로퍼티와 메소드들은 ,(쉼표)를 사용해서 나열한다.
var 객체변수명 = {프로퍼티명, 메소드};
프로퍼티는 객체가 갖는 값인 속성을 의미하며 자바스크립트 객체에는 [ 키 : 값]의 쌍으로 표현한다.
키가 프로퍼티명이고, 값이 프로퍼티가 갖는 값이다. 키와 값은 콜론(:)으로 구분한다.
메소드는 객체 수행 동작(작업처리)을 기술 하는 곳으로 method1 : function(){}과 같이 [메소드명 : 메소드바디]를
키와 값의 쌍으로 표현한다.
객체의 프로퍼티나 메소드에 접근(사용)하려면 [객체명.프로퍼티], [객체명, 메소드()]와 같이 기술한다.
배열 : [ ]
자바스크립트에서 배열을 [ ]기호를 사용해서 선언하며, [ ] 안에 배열의 원소를 ,(쉼표)를 사용해서 나열한다.
var 배열변수명 = [원소1, 원소2,....];
배열명은 배열의 원소 전체를 의미하기 때문에 배열명을 출력하면 배열 전체가 출력된다.
배열의 원소에 접근(사용)하려면 배열명[원소번호]와 같이 사용한다. 원소번호(인덱스)는 0부터 시작하며 마지막
원소 번호는 배열명.length-1로 지칭해서 사용할 수 있다
arr1; // arr1배열 원소 전체
arr1[0]; // 첫번째 원소에 접근
arr1[arr1.length-1]; // 마지막 원소에 접근
함수 : function( ) { }
자바스크립트에서 함수는 원래 function 함수명( ) { }과 같은 형태로 선언한다. 그러나 function( ) { }과 같은 익명 함수를 변수에 넣어서 사용하는 함수 리터럴을 권장한다. 함수의 실행 결과를 함수를 호출한 곳으로 리턴(변환)하려면 return 값;과 같은 형태로 기술한다.
var 함수변수명 = function(인수리스트){처리코드};
함수가 저장된 변수가 함수명이 된다. 따라서 기본적인 함수 선언과 함수 리터럴 선언의 사용은 함수명()과 같이 함수 사용방법이 같다. 다만 체계적인 개발과 익명함수의 유동성 때문에 함수 리터럴의 사용이 권장된다.
변수 선언 방법
변수는 값 저장소로 프로그램에서 필요한 값을 일시로 메모리에 저장한다. 따라서 프로그램에서 사용이 끝나거나 컴퓨터를 종료하면 저장된 값이 사라진다. 만일 값을 영구저장하려면 파일이나 DB를 사용해서 디스크에 저장한다.
자바스크립트 프로그래밍 권고 사항
자바스크립트는 C나 자바에 비해서는 쉽게 배울 수 있는 프로그램 언어이다. 쉽게 배울 수 있다는 것은 문법이 느슨하다는 의미로, 이렇게 문법이 느슨한 언어들은 작성자가 프로그래밍할 때 주의를 더 기울여야 한다.
전역변수는 가급적 사용을 자제한다.
전역변수는 함수 밖에 선언된 변수로 함수들이 쉽게 접근해 쓸 수 있어서 보안이 약하다. 또한 해당 페이지가 종료되어야 메모리의 리소스해제가 되어서 리소스 관리에 좋지 않다.
지역변수를 사용시 선언하고 사용한다.
함수안에서 선언되는 지역변수도 var a=0; 과 같이 사용 시 선언하고 쓴다.
참조대상(변수 등)은 먼저 선언하고 사용한다.
자바, 자바스크립트는 사용한 후 선언하는 후방참조를 허용한다. 그러나 프로그램을 체계적으로 작성하려면 먼저 선언하고 사용하는 전방참조 사용을 권장한다.
| 후방 참조 : 먼저 사용 후 선언, 권장 안함 x + y; var x = 1; var y = 1; |
전방 참조 : 먼저 선언 후 사용, 권장 var x = 1; var y = 1; x + y; |
변수는 사용 전에 초기화 한다.
자바스크립트, R, 파이썬에서 변수의 타입은 할당되는 값에 따라 결정된다. 변수의 저장소 크기는 변수의 타입으로 결정된다. 따라서 변수 선언과 동시에 초기값을 부여해서 해당 변수의 타입을 지정하는 것이 좋다.
var x = 5; // 숫자 변수
var str1 = "abc"; // 문자열 변수
숫자, 문자, 불린 값은 객체 형태로 쓰지 않는다.
숫자, 문자, 불린 값을 Number, String, Boolean을 사용해서 객체로 생성하면 사용시 성능이 떨어진다.
문자열, 객체, 배열, 함수 생성시 new 키워드를 사용해서 생성하지 않는다.
new 키워드를 사용해서 객체를 생성하는 것은 성능이 떨어진다.
| 새로운 객체 생성시 new Object(); 문장은 쓰지 않는다. 대신 { } 을 사용한다. | var x1 = { }; |
| 문자열 생성시 new String() 대신 " "을 사용한다. | var x2 = " "; |
| new Number() 대신 숫자 0을 직접 사용한다. | var x3 = 0; |
자동 형변환에 주의한다.
자바스크립트, R, 파이썬은 데이터 타입에 느슨한 프로그래밍 언어이다. 따라서 var x =5;와 같이 정수 를 지정한 숫자 변수에 x = "Hello";와 같은 문자열을 넣을 수 있다. 이런 경우 x변수는 문자열 변수로 변환된다. 이런 프로그래밍 방식은 체계적인 프로그램 작성에 문제가 되고 협업시에도 많은 문제를 발생시킨다. 정수 타입의 숫자 변수에는 정수만, 문자열 변수에는 문자열만 넣어서 문제 발생을 방지한다.
'javaboiii의 Web > Web 요약정리(HTML5&CSS3그리고JS)' 카테고리의 다른 글
| Web - 7) JavaScript 함수와 객체 (0) | 2024.08.29 |
|---|---|
| Web - 6) JavaScript 제어문 (0) | 2024.08.28 |
| Web - 4) 태그를 표현하는 CSS와 Advanced CSS(CSS3) (0) | 2024.08.06 |
| Web -3) 문서를 구조화하는 HTML (0) | 2024.08.05 |
| Web - 2) 코드를 작성하고 실행하는 개발 환경 설정 (0) | 2024.08.05 |