흒업.... 제가 맨날 MOS 마스터 딴다고 공부하다가 저희 지역에서 운영을 안 한다고 해서...
그걸 하다가 접었는데 그 시간에 JS 할 걸이라는 생각이 들어 개학 일 주일 전 다급하게 시작했어요ㅠ^ㅠ
그래서 1일 차입니닷.
우선 자바스크립트란 무엇일까용?
바로 넷스케이프사에서 웹 페이지의 처리 능력을 향상시킬 목적으로 개발한 LiveScript 기반으로, 넷스케이프사와 선마이크로시스템즈사가 공동으로 개발한 스크립트 언어입니닷.
제가 해석할 수 있는 단어가 별로 없어용 ㅎㅎ
연산자와 제어문은 C/C++와 유사하며 객체지향의 상속 방식은 프로토타입이래요!!
프로토타입 기반은 클래스가 없이 객체의 프로토타입을 복제해서 재사용하는 방식으로 상속한대용 클래스리스, 프로토타입 지향, 인스턴스 기반 이라고도 부른대요!!
자바스크립트의 사용 방법은 매우 간단해용
(1) HTML 페이지 내부에 포함해서 작성하는 방법
<script></script> 태그 사이에 코드들을 기술하여 작성해주면 된대용
하지만 이렇게 작성을 하면 해당 HTML 파일에서만 사용할 수 있으며 다른 페이지에서는 재사용이 불가하대용 ㅠㅠ
그리고 주로 <head> 안에 기술한대요!
(2) 별도의 파일로 작성 후 필요한 페이지에서 가져다 쓰는 방법
이게 훨씬 간편하고 좋은 것 같다는 생각이 들었어요!
<script src="경로를 포함한 자바스크립트파일명"></script>
이렇게 써주는 거래욤 자바스크립트는 재사용성을 위해 외부 파일로 저장한 후 필요할 경우 사용하는 게 좋다고 합니닷
파일의 확장자는 js를 사용합니다^$^
자바스크립트의 문장 구조에 대해 알아볼게용 (기본적인 규칙)
1. 자바스크립트는 유니코드 기반의 프로그래밍 언어이다.
2. 자바스크립트는 대소문자를 구별한다.
3. 문장의 끝은 세미콜론으로 구분한다.
- 한 줄씩 구분된 경우에는 생략해도 됩니다만 가급적이면 생략하지 않아용~!
4. 자바, C계열의 주석인 //, /**/을 사용한다.
- // 은 한 줄 주석, /**/ 은 여러 줄 주석을 처리할 때 사용됩니닷.
5. 자바의 리터럴
- 정수 : 5 / 실수 : 5.0 / 문자열 : "문자" 또는 '문자' / 부울 : false / null : null / 배열 : [1, 2, 3] / 함수 : function() {} / 객체 : {id : "aaaa"} 이렇게 쓰는 겁니당.
6. 자바스크립트의 식별자 규칙!
- 첫 글자는 영문자, _, $를 사용할 수 있으며, 나머지 글자는 숫자도 사용할 수 있어용
- 그러나 가급적이면 영문자로 시작하는 것이 좋습니당
- 식별자는 클래스명, 함수명, 변수명과 같은 이름을 의미합니닷
- 객체 지향 프로그래밍에서는 변수명과 함수명, 메소드명의 첫 글자는 소문자로 시작하며, 단어가 구분될 때는 구분되는 단어의 첫 글자는 대문자로 시작해용ㅎㅎ
- 클래스의 경우 첫 글자는 대문자로 시작합니닷.
7. 자바스크립트의 변수 선언
- var 키워드를 사용해서 var 변수명 = 리터럴; 과 같은 형식으로 사용합니당
- 변수를 선언할 때 특별이 데이터 타입을 지정하지 않으며, 데이터 타입은 값을 할당할 때 결정된대요!!!!
8. 자바스크립트의 키워드
- 자바에서와 같이 소문자로만 이루어져 있어용. (예약어와 똑같습니당)
- 예약어의 종류는 굉장히 많아서 사진을 첨부할게요 데헷
헤헷 다음으로는 데이터 타입에 대해 알아보겠습니당.
자바스크립트의 데이터 타입에는 숫자, 문자, 부울, 객체, undefined, null, empty 등이 있으며 기본데이터 타입과 객체 타입으로 나뉩니당^&^
기본 데이터 타입 : 숫자, 문자, 부울, undefined 객체 타입 : 객체, 배열, 함수
이 때 undefined, null, empty 값의 차이는
undefined : 변수 등의 타입이 정의되지 않음(값이 할당되지 않음)
null : 객체 레퍼런스 변수가 가리키는 객체가 없음. 객체 초기화 등에 사용
empty : 문자열 변수 등의 값이 비어 있음(공백 값) 입니닷 이제 다음으로 넘어갈게용
* 기본 데이터 타입 *
1. 숫자 타입
- 산술연산에 사용되며 0~9, 부호(-), 소수점으로만 이루어집니닷. var var1 = 1;
2. 문자열 타입
- 숫자, 문자로 이루어진 문자열 데이터로 " "나 ' '로 둘러싸서 표현합니당 var var2 = "test";
3. 부울 타입
- 부울 값 true 또는 false 값을 갖는 타입 표현에 사용됩니당 var status = true;
* 참조 데이터 타입 *
1. 자바스크립트 객체 : { }
- 객체는 { } 기호를 사용해서 정의하며 { } 안에 프로퍼티, 메소드 등을 기술합니당.
- 작성방법 : var 객체 변수명 = {프로퍼티, 메소드};
- 프로퍼티는 객체가 갖는 값인 속성을 의미합니당. 객체는 [ 키 : 값 ]의 쌍으로 표현합니다. 키가 프로퍼티명이고 값이 프로퍼티가 갖는 값입니당. 키와 값은 : 으로 구분합니당.
- 메소드는 객체 수행하는 동작을 기술하는 곳으로 method1 : function() { }과 같이 [메소드명 : 메소드바디]를 키와 값의 쌍으로 표현합니닷
- 객체의 프로퍼티나 메소드에 접근하려면 [객체명.프로퍼티], [객체명.메소드()]와 같이 기술합니당^#^
var obj1 = {id: "aaaa", pass: "pass", method1: function() {return 1;}};
obj1.id; // 프로퍼티에 접근
obj.method1(); // method1()에 접근
2. 배열 : [ ]
- [ ] 안에 배열의 원소를 ,를 사용해서 나열합니다.
- 작성방법 : var 배열변수명 = [원소1, 원소2, ...];
- 배열명은 배열의 원소 전체를 의미하기 때문에 배열명을 출력하면 배열 전체가 출력됩니당
- 배열의 원소에 접근하려면 배열명[원소번호]와 같이 사용하고 인덱스 번호는 0부터 시작합니닷. 만약 마지막 원소 번호에 접근하고 싶으면 배열명.length - 1 로 지칭해서 사용할 수 있습니당. ex) arr1[arr1.length -1];
3. 함수 : function() { }
- 자바스크립트에서는 function() { }과 같은 익명 함수를 변수에 넣어서 사용하는 함수 리터럴을 권장합니당
- 작성방법 : var 함수변수명 = function(인수리스트){처리코드};
- 함수가 저장된 변수가 함수명이 됩니다. 함수 리터럴 선언의 사용은 체계적인 개발과 익명함수의 유동성 때문에 권장합니닷.
* 변수 선언 방법 *
변수는 값 저장소로 프로그램에서 필요한 값을 일시로 메모리에 저장합니닷. 그래서 프로그램이 끝나거나 컴퓨터를 종료하면 저장된 값이 사라져용. 이제 선언형태에 대해 정리할게용
문법 : var 변수명 = 리터럴 값;
리터럴 값 : 문자/숫자데이터, 객체(객체, 함수, 배열) 등이 옴
숫자변수 선언 예 : var v1 = 3;
문자변수 선언 예: var v2 = "aa";
객체변수 선언 예: var v3 = {id: "aaaa"};
배열변수 선언 예: var v4 = ["a", "b"];
함수변수 선언 예: var v5 = function(){return 1;};
권장하지 않는 방법은 알려드리지 않았어요!-! 여러분들도 권장하는 방법을 사용하시길 바라용
자바스크립트 프로그래밍 권고사항
1. 전역변수는 가급적 사용을 자제합니당
- 전역변수는 함수 밖에 선언된 변수로 보안이 약해요ㅠㅠ 또한 리소스 관리에도 좋지 않기 때문에 사용은 자제해야 한대용
2. 지역변수를 사용 시 선언하고 사용합니닷.
3. 참조대상(변수 등)은 먼저 선언하고 사용합니당
- 후방참조를 허용하긴 합니다만 전방참조가 훨씬 좋아요! (먼저 선언 후 사용하는 것을 의미합니닷)
4. 변수는 사용 전에 초기화합니닷.
5. 숫자, 문자, 부울 값은 객체 형태로 쓰지 않습니다.
- Number, String, Boolean을 사용해서 객체로 생성하면 사용 성능이 떨어진대요!!!!
6. 문자열, 객체, 배열, 함수 생성 시 new키워드를 사용해서 생성하지 않습니당.
- new키워드를 사용해서 객체를 생성하는 것은 성능이 떨어지는 행위예요!$!
- 새로운 객체 생성 시 new Object(); 대신 { } 사용!
- 문자열 생성 시 new String() 대신 " " 사용!
- new Number() 대신 숫자 0을 직접 사용!
- new Boolean() 대신 false와 같이 부울 값을 직전 사용!
- 배열은 new Array() 대신 [ ] 사용!
- 정규표현식은 new RegExp() 대신 /()/ 사용!
- 함수는 new Function() 대신 function() {} 사용!
7. 자동 형변환에 주의합니닷
- 정수라고 주어진 변수 x의 값에 문자열을 넣으면 문자열 변수로 전환이 되긴 합니다만 이런 프로그래밍 방식은 체계적인 프로그램 작성에 문제가 되고 협업 시에도 많은 문제를 발생시켜용. 때문에 타입에 맞는 값을 넣어주세요!!
다음 시간이 언제가 될 진 모르겠지만 다음 시간은 제어문으로 찾아 뵐게요!~!
긴 글 읽어주셔서 감사해용 저도 오래 작성한 거라.. 힘들지만 기억엔 쏙쏙 남네유 ㅎㅎ 켈케레켈켘
'레쭈고 JS' 카테고리의 다른 글
| 코딩 테스트 - 58 (0) | 2025.01.21 |
|---|---|
| JS - 3 (0) | 2024.03.04 |
| JS - 2 (0) | 2024.02.26 |