-
[JS] 자바스크립트 1일차 요점정리Frontend 2019. 2. 9. 22:46[1] Javascript 작성 방법: HTML 소스 코드에 포함되는 형태로 작성된다.[2] HTML 소스코드에 포함시키기:다음의 코드를 HTML 소스코드 안에 명시.일반적으로 <head>~</head>에 위치한다.<script [type="text/javascript"]>... javascript 구문...</script>...[3] 외부 파일에 대한 참조를 포함시키기:<script> 태그를 제외한 javascript 구문만 ".js"로 저장된 별도의 파일로 분리하고<script> 태그의 src 속성으로 분리된 파일의 경로를 참조시킨다.```javascript<script [type="text/javascript"] src="*.js파일의 경로"></script>```[4] 콘솔: 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 내용을 출력하기 위한 공간.[5] 변수데이터를 저장하기 위한 키워드. 변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다.```javascriptvar 변수이름; // 변수의 선언변수이름 = 값; // 선언된 변수에 값 할당```[6] 선언과 할당을 결합한 형태...javascriptvar 변수이름 = 값;...
- 변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.
- 띄어쓰기가 필요한 경우 언더바를 사용하거나 첫 글자를 대문자로 표현.
- 값의 할당은 오른쪽에서 왼쪽으로만 가능.
* 저장 가능한 값의 종류- Boolean : 논리값, 참(true) | 거짓(false)
- Number : 정수(integer, int), 실수(double, float)값
- String : 문자열(문장), 쌍따옴표나 홑따옴표로 감싸서 표현.
- Null : 값이 확정되기 이전에 임의로 비워둔 형태. - ""로 표현하기도 함.
- undefined : 값이 할당되기 이전에 임의로 비워둔 형태. (undefined만 앞글자가 소문자로 시작) - 처음부터 변수가 선언만 되고 아무런 값도 할당되지 않음!
- Object : 객체(이후 살펴봄)
[연산자]1. 대입 연산: 변수에 숫자나 문자열 등의 자료를 입력하거나 연산 결과를 다른 변수에 할당한다. (=)2. 사칙연산- 기본적인 +, -, *, /(몫) , %(나머지) ----> 10/3=3.33333... | 10%3=1
- 곱하기, 나누기가 더하기, 빼기보다 우선함.
- 괄호 ()로 묶은 부분이 최우선 처리됨.
- 더해지는 값에 문자열이 포함되어 있는 경우 모두 하나의 문장으로 결합된다.
```javascriptvar a = "가나다";var b = 123;var c = a + b; //"가나다123"```3. 단항연산연산 결과를 변수 스스로에게 다시 적용할 경우의 단축표현.모든 사칙연산자에 대해서 표현 가능함.```javascriptvar a = 100;a = a + 10; //a가 10 증가됨.a += 10; //같은 표현```4. 증감연산단항 연산에서 사용되는 값이 1이고 덧셈과 뺄셈의 경우만 축약 가능함.```javascriptvar a = 100;a++;++a;a--;--a;```다른 연산식에 포함된 경우 증감연산자의 위치에 따라서 계산되는 시점이 다르다.```javascriptvar a = 1;//(뒷북) 100+1을 먼저 수행해서 y값을 확정. 그 후 a가 증가함.y = 100 + a++;//(앞북) a가 먼저 1 증가하고 100+2가 수행되서 y값을 확정.y = 100 + ++a;```5. 비교연산일반적인 부등식- 같다: ==
- 다르다: !=
- 크다(초과): >
- 크거나 같다(이상): >=
- 작다(미만): <
- 작거나 같다(이하): <=
부등식의 결과는 참 (true), 혹은 거짓(false)이 된다.```javascriptvar a = 100 < 1000; //truevar b = 50 >= 1000; //false```ex) 평균점수가 80점 이상인 사람을 구하기 ...... > 806. 논리연산참과 거짓을 and(&&), or(||)로 비교하여 결과를 도출&&: 모든 값이 참인 경우만 결과가 참.||: 하나라도 참이면 결과가 참.[프로그램의 흐름제어]-조건문-1. if 문괄호안에 주어진 조건이 참인 경우 블록 {}안을 수행.cf) { ... } 안에 들어갈 구문이 한 줄만 있는 경우, { } 를 생략 가능.```javascriptif(조건) {//..조건이 참인 경우 실행할 명령 ...}조건에 명시할 수 있는 형식비교식 (==, !=, >, >=, <, <=)논리식 (&&, ||)논리값 (true / false)2. If ~ else 문조건이 참인 경우 if 블록이 실행. 그렇지 않은 경우 else 블록이 실행if (조건) {//...조건이 참인 경우 실행할 명령...} else (조건) {//...조건이 참이 아닌 경우 실행할 명령...}3. If ~ else if ~ else문여러 개의 조건을 나열하여 그 중 가장 처음 만나는 참인 조건의 블록을 수행함. 그 외의 블록은 실행하지 않고 빠져 나간다.if (1차 조건) {...} else if (2차 조건) {...} else if (3차 조건) {...} else { ---> 생략가능...}4. switch문하나의 변수값에 대한 여러가지 경우의 수를 나열하고 그 중 참인 경우를 실행함.switch (변수) {case "값1" : //경우의 수는 필요한 만큼 나열...break;case "값2" :...break;case "값3" :...break;default : //일치하는 경우가 없을 경우 수행할 블록 (생략가능)...break;}반응형'Frontend' 카테고리의 다른 글
[JS] 자바스크립트 3일차 요점정리 (484) 2019.02.09 [JS] 자바스크립트 2일차 요점정리 (967) 2019.02.09 [CSS]Day8 -background (609) 2019.02.09 [CSS]Day7 -Position (734) 2019.02.09 [CSS]Day6 -Display/Float (1092) 2019.02.09 COMMENT