홍강zone

자바스크립트 임시저장 본문

전공공부/자바스크립트 (JavaScript)

자바스크립트 임시저장

홍강 2023. 4. 25. 16:46

JavaScripts : 브라우저 전용 스크립트 언어

1. 스크립트 언어 - 간편한 코딩을 목적으로 만들어진 프로그래밍 언어. 단기간에 습득 및 개발 가능

2. 인터프리터 언어 - 프로그램을 컴파일하지 않고 소스코드 레벨에서 한 줄씩 번역하면서 실행한다

-단점 : 컴파일 언어에 비하여 느림

-장점 : 컴파일과 같은 특별한 단계가 필요없음, 코드를 작성하여 바로 실행 가능

3. 여러 환경에서 이용 가능

<script> 태그 : JavaScript 코드를 HTML에 집어넣기 위한 태그

<body>
<script type="text/javascript" src = "Hello.js"> // 스크립트 코드 파일을 외부화해서 src로 사용하기. type속성을 고정값이다. 재활용 용이 파악 용이
</script>
</body> // script는 </body>나 </head>태그 직전에 기술하는걸 추천한다

// 스크립트 코드를 외부화 하지않고 인라인으로 사용하는 방법
<script type="text/javascript">
<!--
JavaScript코드
// -->
</script>

// 외부 스크립트와 인라인 스크립트를 같이 사용할 때
<script type="text/javascript" src = "Hello.js">
</script> // 꼭 마쳐준다
<script type="text/javascript">
    <!--
    JavaScript코드
    // -->
</script>

 

 

statement 규칙 

1. 문장의 맨 끝에 세미콜론(;)을 붙인다 - 생략가능하지만 단락의 구분을 위해

2. 문장의 도중에 공백이나 개행, 탭 포함 가능

3. 대/소문자 구별됨

 

주석 comments

- 스크립트 동작에는 상관없는 메모와 같은 정보

어떠한 목적을 위해 작성했는지, 다른 사람이 봤을 때 이해하기 위해, 코드가 무엇을 하고 있으며 무엇을 목적으로 작성되었는지 파악

- 장기적인 유지보수를 전제로 한 애플리케이션에서는 주석의 기술은 필수

1. // comment : 단일 행 주석이다. //에서부터 해당 행의 끝까지를 주석처리

2. /* comment */ : 복수 행 주석이다. /*~*/으로 둘러싼 블록을 주석처리

변수 : 데이터를 격납하는 그릇

변수의 선언 : 변수의 이름을 JavaScript에 등록하고 값을 격납하기 위한 영역을 메모리 상에 확보하는 것

- var 명령을 사용

ex) var msg; - "msg"라는 이름의 변수 선언

초기값을 설정하지 않았을 경우 : JavaScript에서 디폴트로 정의되지 않은 값을 의미하는 undefined를 변수에 할당

 

식별자의 명명규칙

1. camelCase 기법 : 앞 단어 첫 문자는 소문자, 그 이후의 단어의 첫 문자는 대문자 ex) lastName

2. Pascal 기법 : 모든 단어의 첫 문자는 대문자 ex) LastName

3. 언더스코프 기법 : 모든 단어의 첫 문자는 소문자, 단어 간은 '_'로 연결 ex) last_name

- 변수명,함수명 : camelCase 기법

- 클래스(구조체)명 : Pascal 기법

데이터형 : 데이터의 종류

- 변수는 대입되는 값에 따라서 데이터형이나 크기가 변환된다.

 

기본형 데이터형 - 값 그 자체가 직접 격납된다

1. 수치형 (number)

2. 문자열형(string) : 작은따옴표 / 큰 따옴표로 감싸인 0개 이상의 문자 집합

3. 논리형 (boolean) : true(참) / false(거짓)

4. 특수형 (null/undefined) : 값이 미정의된 것을 나타냄

var x; // 변수값이 없는데 변수를 호출함
console.log(x);

undefined

 

참조형 데이터형 - 값을 실제로 격납하고 있는 메모리상의 어드레스(참조값)을 격납한다

1. 배열 (array) : 데이터의 집합 (각 요소에는 인덱스 번호로 접근 가능).

- 콤마로 구분한 값을 대괄호로 감싼 형태.

var ary = ['Java', 'Script', 'HTML']; // 이러한 배열이 있다면 선두 요소부터 0,1,2... 인덱스 번호가 부여됨
console.log(ary[0]); // 0번출력

java

var ary = ['Java', ['Script','Html'], 'CSS']; // 배열 안의 배열에서 다시 배열이 있는 경우
console.log(ary[1][0]); // 1번배열에서 0번출력

Script

 

2. 객체 (object) : 데이터의 집합 ( 각 요소에는 이름으로 접근 가능)

- 이름을 키로 하여 접근이 가능한 객체

프로퍼티 : 객체 내의 개별 데이터. 문자열이나 수치, 함수 격납 가능

메소드 : 함수가 격납된 프로퍼티

var obj = {
    x:1, y:2, z:3 // 하나하나가 프로퍼티이며 x,y,z는 키(key)(프로퍼티 명) 1,2,3은 값(value)(프로퍼티 값)
};
console.log(obj.x); // 접근 방식 중 마침표 표기법
console.log(obj['x']); // 대괄호 표기법 대괄호에 따옴표로 감싸줘야 한다

 

3. 함수 (function) : 일련의 처리(절차)의 집합

 

리터럴 : 데이터형에 격납되는 값 그 자체, 또는 값의 표현방법

산술연산자

 

+ 연산자

console.log(10+1); // 수+수 - add연산
console.log('10'+1); // 문자열+수 - 문자열 연결 연산
var today = new Date();
console.log(1234+today);

11
101
1234Tue Apr 25 2023 06:43:34 GMT+0900 (대한민국 표준시)

 

증감 연산자

var num = 10;
var result = ++num // 전치연산 num에 1을 더하여 result 결과출력
console.log(result);

11

 

대입 연산자

기본형 대입연산자
var x = 1;
var y = x; // 값이 전달
x = 2;
console.log(y);
1

참조형 대입연산자
var ary1 = [0, 1, 2];
var ary2 = ary1; // 주소값이 전달
ary1[0] = 5;
console.log(ary2);
5,1,2

 

비교연산자

결과값은 true/false

 

동등연산자(==), 일치연산자(===)

// 기본형에서는 값 그 자체를 비교하므로 보이는 것과 비교 결과가 일치
var x=2;
var y='2';
console.log(x==y); // x는 숫자고 y는 문자열이지만 자바스크립트가 오퍼랜드를 변환한다
true

// 참조형에서는 보관하고 있는 참조장소를 비교하므로 보이는 것과 일치하지않음
var ary1 = ['Java', 'Script', 'CSS'];
var ary2 = ['Java', 'Script', 'CSS'];
console.log(ary1 == ary2);
flase

// 일치연산자를 사용하면 데이터형까지 고려하기 때문에 엄격하게 비교
var x=2;
var y='2';
console.log(x===y); // 문자열과 숫자를 엄격하게 비교해준다
false

 

논리연산자

결과값 false : 공백문자열(""), 숫자0, NaN(Not a Number), null, undefined

            true : 그 외의 값

%% (AND) : 모든값이 true면 true : 스티브잡스는 한국인 이고AND, 남자이다 = false

-첫번째 false를 발견하는 즉시 평가를 멈춘다

|| (OR) : 여러개 중 하나라도 true면 true : 스티브잡스는 한국인 이거나OR 남자이다 = true

-OR은 첫번째 true를 발견하는 즉시 평가를 멈춘다

! (NOT) : true면 false / false면 true 

// OR
// 이름이 Mike이거나OR 성인이면 통과
const name = "Mike";
const age = 30;

if(name === "Mike" || age > 19){ // name에서 true를 발견해서 즉시 멈춘다
    console.log('통과');
}

// AND
// 이름이 Mike이고AND 성인이면 통과
const name = "Mike";
const age = 30; // 하나라도 조건에 안맞으면 false가 뜬다

if(name === "Mike" && age > 19){
    console.log('통과');
} else {
    console.log('돌아가')
}

// NOT
// 나이를 입력받아 성인 아니면 돌아가
const age = prompt('나이가..?');
const isAdult = age > 19;

if(!isAdult){
    console.log('돌아가..')
}

// 우선순위 AND>OR
// 남자이고, 이름이 Mike 이거나 성인이면 통과
const gender = 'F';
const name = 'Jane';
const isAdult = true;
if(gender === 'M' && (name === 'Mike' || isAdult)){ // 이미 여자이기때문에 뒤에 OR은 작동안함 돌아가
    console.log('통과')
} else {
    console.log('돌아가')
}

 

비트연산자

- 오퍼랜드에 대해 이진수 연산

 

그 외의 연산자들

 

연산자 우선순위

 

연산자 결합순서

// if, else, else if문
var x = 30;
if (x >= 20){
    console.log('변수 x는 20이상이다'); // 첫번째 if가 true면 실행
} else if (x >= 10) {
    console.log('변수 x는 10이상이다'); // 그게 아니라 이게 true면 실행
} else {
    console.log('변수 x는 10미만이다'); // 다 아니면 실행
}

변수 x는 20이상이다 // 첫번째 if가 true여서 첫번째 if문에서 출력되고 끝남

// if문 중첩
var x = 30;
if (x >= 10) { // 만약 x가 10미만이면 바로 else 실행
    if (x >= 20){ // x가 10이상이고 20이상이면 실행 여기서 아니면 아무것도 출력하지 않고 종료
        console.log('변수 x는 20 이상이다');
    }
}
else {
    console.log('변수 x는 10 미만이다')
}
// switch문은 선두의 식이 우선 평가되며 값에 일치하는 case블록을 실행하고 일치하는 블록이 없다면 마지막 default 블록 호출
var rank = "B";
switch(rank){
    case 'A' :
        console.log('A랭크다');
        break;
    case 'B' :
        console.log('B랭크다');
        break; // break명령을 하지 않으면 멈추지않고 아래것까지 다 출력됨 현재의 블록에서 빠져나오기 위한 명령
    case 'C' :
        console.log('C랭크다');
        break;
    default :
        console.log('랭크 이외다');
}
// while문 : 조건식이 true인 동안 반복 처리
var i = 0;
while(i<10){
    console.log(i);
    i++; // 출력하고 1을 더해서 while로 돌아가기 반복. i가 10이되면 반복문을 빠져나옴
}
0
1
2
3
4

// do.. while문 : while과 비슷한데 조건문을 아래로 옮길수있다
// while과 다르게 후치판단하여 조건에 상관없이 최소 1회 루프를 실행한다 while은 처음부터 조건에 안맞으면 break가 걸림
var i = 0;
do {
    console.log(i); // 코드를 실행하고
    i++;
} while (i<5) // 조건을 체크한다
0
1
2
3
4
// for문
// 초기값; 조건; 코드실행후1더해줌
// i=0시작 i가 5보다 작으므로 코드실행. i값 1증가 처음으로 돌아와서 반복. false가 되면 멈춤
for(var i = 0; i < 5; i++) {
    console.log(i) // 0~4까지 출력됨
}
0
1
2
3
4

// for in문
var member = ['야마다', '사과', '귤'];
for (var i in member){
    console.log('이름은' + member[i]);
}
이름은야마다
이름은사과
이름은귤

var triangle = {width : 30, height : 50};
for (var j in triangle) {
    console.log(j + '=' + triangle[j]);
}
width=30
height=50
// break : 반복문을 멈추고 빠져나옴
for (var i = 0; i < 5; i++) {
    if (i === 3) {
        break; // i가 3이 됐을때 5까지 증감하지말고 루프를 멈춰줘
    }
    console.log(i);
}
0
1
2

// continue : 멈추고 다음 반복으로 진행
for (var i = 0; i < 5; i++) {
    if (i === 3) {
        continue; // i가 3이 됐을때만 건너뛰어줘
    }
    console.log(i);
}
0
1
2
4
// try : 예외가 발생할지 모르는 처리
// catch(e) : 예외가 발생했을 경우에 실행되는 처리
// finally : 예외의 유무에 상관없이 실행하는 처리
var i =1;
try{
    i = i*j; // 예외발생
} catch(e) {
    console.log(e.message); // 에러 정보가 전달됨
}finally {
    console.log('처리가 완료되었다');
}
j is not defined
처리가 완료되었다

// throw : 예외를 발생시키는 명령 에러메시지
var i = 1;
var y = 0;
try{
    if(y == 0) { throw new Error('0으로 나누려고 했다');}
    var z = x / y;
} catch(e) {
    console.log(e.message);
}
0으로 나누려고 했다
저작자표시 (새창열림)

'전공공부 > 자바스크립트 (JavaScript)' 카테고리의 다른 글

[JavaScript] 객체, 함수, 스코프, 프로토타입  (0) 2023.06.13
'전공공부/자바스크립트 (JavaScript)' Related Articles more