Front-End
코린이의 시작 (Javascript) 본문
코딩을 배우기 시작한 지 일주일이 되었다.
팀플로 바로 멘땅에 헤딩을 시작하면서 홈페이지의 회원가입, 로그인, 메인화면, 리뷰 화면 등 팀원들과 구현해냈다.
구현해 낸 것은 아직 정확히 이해하지 못해서 추후 정리할 예정이다.
<Javascript >
▶ 특징
- HTML+CSS와 함께 사용해 client side 웹 프로그램을 작성할 수 있다.
- 웹 브라우저에서 바로 실행이 가능하다.
alert 명령어 : 뒤에 따라오는 괄호 안에 들어있는 메시지를 브라우저 경고창에 띄워주는 명령어를 의미
list 1. 변수
변수 선언과 초기화
- 프로그램 실행 도중 임의의 값을 저장해 두고 읽을 수 있는 공간
- 선언 : 컴퓨터에게 변수를 사용할 것이라고 선언(알려주는) 역할
var a; //변수 a를 선언한다- 초기화 : 선언한 변수에 처음으로 값을 저장하는 과정
- 변수에 값을 저장하는 법 : 대입연산자 (=)를 활용
var a; //변수를 a로 선언함.
a=10; // 변수를 초기화 시켜 변수의 값을 저장함.- 콤마(,)를 활용해 여러 변수를 동시에 선언, 초기화 가능
var a=1o, b=20;
- prompt() 명령어 : 변수에 값을 저장하는 구문과 사용하여 입력한 값을 변수에 저장하여 알림창에 띄우고 입력 부분이 생기게 됨. (HTML의 input과 비슷하게 생김)
var name=prompt("이름을 입력해 주세요");
변수의 활용
- 변수의 이름을 사용하면, 변수의 값을 읽어서 사용 가능
var var1 = "1", var2 = "2", var3 = "3"; // 변수값을 선언해둠.
console.log(var1); //변수 var1을 출력해라
alert(var2); // 변수 var2를 경고창에 띄워라
prompt(var3);// 변수var3를 사용자가 입력한 값을 변수에 저장함.- console.log 명령어 : 괄호 안에 여러개의 메시지를 콤마(,)로 구분하여 활용함.
var name=prompt("이름을 입력해 주세요");
console.log(name, "님 안녕하세요");// 그러면 alret창에 이름을입력해주세요 후
// 입력한 내용과 console.log에 적은 "님 안녕하세요"가
// 합쳐져서 console에 표시됨.
//ex) name값으로 alret창에 적은 이름
// 코린이님 안녕하세요 의 내용이 출력된다.
list 2. 자료형
기본자료형 : 변수값에 저장할 수 있는 값의 종류를 '자료형'이라고 한다.
- number Type: 숫자
var a=100, b=3.14;- string Type: 문자열
var c="안녕하세요", d="a";- boolean(불리언) Type: 맞다 true /틀리다 false 를 표현
var e = true, f = false;
- typeof() 명령어 : typeof 뒤에 따라오는 괄호 안에 들어있는 변수의 type을 알려준다.
var a=100;
console.log(a,typeof(a)); //100 "number"라고 출력
var c="안녕하세요";
console.log(c,typeof(c)); //안녕하세요 "string"라고 출력
var e=true;
console.log(e,typeof(e)); //true "boolean"라고 출력Number
- 숫자를 나타내는 자료형
- 64bit로 실수와 정수 모두 표현 가능
- 정상적이지 않는 숫자나 표현할 수 없는 범위의 수를 표시하는 NaN, Infinity
- parselnt, pareFloat 명령어
문자열 "1"과 1은 다름 명령어 뒤에 따라오는 괄호 안에 있는 문자열 앞에부터 Numver를 인식함.
var height=prompt("키를 입력해 주세요"); // 키를 입력해주세요 후 입력창이 뜸.
console.log( height, typeof(height)); // 그아래 입력한 값이 console에 표시되는데 문자열
//즉, 168.5(입력한값) string(type) 표시가됨
var height_int=parseInt(height); //height 입력했던 값을 parseInt로 변수선언하고
console.log(hight_int,typeof(height_int));//출력하면 168(입력한값의 정수값만) number(type) 표시
var height_float=parseFloat(height); //height 입력했던 값을 paraeFloat로 변수선언하고
console.log(height_float,typeof(height_float));//출력하면 168.5(입력한값 실수까지) number(type)표시*NaN (Not a Number) 숫자가 아닌경우 표시됨 *Infinity 수학적 오류가 있구나 그 결과 값을 변수로 지정했을 경우
String
- 따옴표('), 큰따옴표(")로 감싸서 문자열을 표현
- 문자열 안에 따옴표, 큰따옴표 등의 문자를 활용하려면 escape character(\ 역슬래시)를 활용
var a='문자열은 따옴표로 둘러싸면 됩니다.';
var b="큰따옴표로도 문자열을 표현할 수 있습니다.";
var c="큰따옴표 문자열에는 따옴표 '를 사용할 수 있습니다.";
var d='따옴표 문자열에는 큰따옴표 "를 사용할 수 있습니다.';
var e="따옴표를 쓰고 싶다면 \'이렇게\' 사용하면 됩니다. 마찬가지로 \"큰따옴표\"도 쓸 수 있습니다.";
var f='따옴표를 쓰고 싶다면 \'이렇게\' 사용하면 됩니다. 마찬가지로 \"큰따옴표\"도 쓸 수 있습니다.';
var g="\\ 문자를 쓰고 싶다면 역슬래시를 두번 씁니다.";
var h="문자열에서 줄바꿈을 하고 싶다면, \n 역슬래시n을 사용합니다.";
var i=a+b;
var j="abcde";*SyntaxError 잘못된 문법으로 나타나는 오류
Object : number, string, boolean의 단순 자료형보다 더 복잡한 자료 표현 시 사용
- 객체를 만드는 법 : 중괄호({})를 사용해 정의 가능함.
- 객체는 속성의 집합으로 이루어짐
var empty={};
typeof(empty); // "object' (객체)라고 출력됨.
var man={name:"코린이", age:20, height:168};
// name, age, height 는 속성의 이름
// 코린이, 20, 168 은 속성의 값
//객체 정의 시 속성이름:값의 형태로 속성 정의 가능
//객체 속성에 접근해서 속성 값을 변경하는법
man.name //객체이름 뒤에 점(.)을 사용하여 속성값에 접근해출력하면 "코린이"
man["name"] //객체 이름뒤에 대괄호([""])안에 문자열로 접근해도 "코린이"
man.name = "코딩고수"; //변수 초기화 후 입력 값 변경되서 man.name 은 "코딩고수"로 변경됨
man["name"] ="코딩고수"; // 변수변경하여 "코딩고수"로 값이 변경됨.
man // 변수이름을 호출하면
object{name : "코딩고수", age : 20, height : 168} // 속성과 값이 변경된것을 확인할 수 있음
undefined : 값이 없다. 시스템에서 어떤 변수나 속성이 정의되지 않은 경우를 표현하기 위해 사용
null : 값이 없다. 개발자가 의도적으로 아무것도 없는 비어있는 상태를 나타낼 때 사용
var a; //변수 a 선언 후 따로 초기화 후 값을 저장하지않으면
typeof(a); // 출력하면 "undefined" 로 나타남.
var null_var; //변수 null_var를 선언
null_var = null; // 변수를 null로 초기화 후 저장함.
null_var; // 출력하면 null이라는 값이 나타남
typeof(null_var); // "object"로 표시됨. -> null이라는 빈객체가 저장되어있다는 의미
list 3. 연산자와 함수
Arithematic (산술: 산수 계산하는) Operator (연산자 : 계산하라는 기호)
- 이항연산자 : 두개의 피연산자 (A, B)를 가지는 연산자. 피연산자는 숫자 또는 변수가 될 수 있음.
var a=5, b=3; // 변수를 초기화하여 값을 저장하고 선언함.
a+b // 더하기 연산자 + 값이 8이 출력됨.
a-b // 빼기 연산자 - 값이 2이 출력됨.
a*b // 곱하기 연산자 * 값이 15가 출력됨.
a/b // 나누기 연산자 / 값이 1.66666666이 출력됨.
a%b // 나머지 연산자 % 두개 값 (5를 3으로)을 나누면 몫(1)과 나머지(2)가 나올 때 나머지를 출력- 단항연산자 : -a; 는 이항연산자의 빼기(-)가 아닌 음수를 뜻하는 경우로 a에 -1을 곱한 효과가 나타남.
var a=1; // 변수 a를 초기화하여 1로 저장하여 선언함.
console.log(a); // 1
console.log(a+1); // 2
console.log(a); // 1
console.log(a); // 1
console.log(++a); // 2 (a=a+1)과 같은의미임 --일경우도 똑같음.
console.log(a); // 2 (a의 값이 변경되어 저장된 상태임을 표시)
console.log(a); // 1
console.log(a++); // 1 console.log(a)가 먼저출려되고 나서 a=a+1로 변수초기화를 시켜줌
console.log(a); // 2 (a의 값이 변경되어 저장된 상태임을 표시)- Math 명령어
Math.pow(2,3); // 2의 3승을 구해 줌 ; 8이 출력됨
Math.sqrt(16); // 16의 제곱근을 구해 줌 ; 4가 출력됨
Math.random(); // 0~1 사이의 임의의 숫자(난수)를 발생시켜 줌 ; 0.1554233543이 출력됨
함수 : "함수를 '호출' 한다 " = 함수의 기능을 수행하고 결과값을 반환하게 함.
function 함수이름(파라미터1, 파라미터2){
/*
실행될 코드
*/
return 반환값; // return : 함수의 출력으로 호출한 표현식은 반환값으로 대치
}
// 파라미터 또는 인자 : 함수 정의 부분에 나열되있는 변수
// 여러개면 콤마(,)로 구분
// 파라미터가 필요없는 경우는 없어도 됨.
// 함수 안의 코드에서 변수처럼 사용할 수 있음.
function return_test(){
return; //return 구문을 만나면 함수는 즉시 종료
console.log("실행되지 않는 코드")
}- 함수의 호출 방법 : 함수이름(인자1, ...) 형태로 호출함.
function sum(a,b){
var result = a + b;
return result;
}
sum(1,2); // 함수 sum을 호출하면 3이라는 결과가 반환됨.
관계 연산자 (Relational operator)
두 표현식 (A,B)의 관계를 비교하는 이항연산자, 관계에 따라 boolean타입으로 표현됨.
| 관계연산자 | 동작 | True인 예시 | False인 예시 |
| < | A보다 B가 더 큰 경우 참 | 3<5 | 3<3 |
| > | A보다 B가 더 작은 경우 참 | 5>3 | 3>3 |
| <= | A보다 B가 크거나 같으면 참 | 3<=3 | 4<=3 |
| >= | A보다 B가 작거나 같으면 참 | 3>=3 | 3>=4 |
| == | A와 B가 같으면 참 | 3==3 | 4==3 |
| != | A와 B가 같지 않은 경우 참 | 3!=4 | 3!=3 |
논리 연산자 (Logical operator)
- AND(&&)연산자 : 두 피연산자가 모두 true인 경우에만 true를 나타내는 이항연산자
| True | False | |
| True | True | False |
| False | False | False |
- OR(||) 연산자 : 두 피연산자가 하나라도 true인 경우 true를 나타내는 이항연산자
| True | False | |
| True | True | True |
| False | True | False |
- NOT(!) 연산자 : 피연산자가 true인 경우를 false로, false인 경우를 true로 나타내는 단항연산자
연산자 우선순위 : 수학에서 곱하기를 더하기보다 먼저하는 것 처럼, Javascript에서도 존재
- 우선순위 순으로 정리한 연산자
- ++, --
- !
- *, /, %
- +, -
- <, <=, >, >=
- ==, !=
- &&
- ||
- 괄호 : 우선순위를 명시하기 위해 괄호를 사용 (괄호안의 계산식이 먼저 계산됨)
String 이어 붙이기
- 문자열 길이 알아내기 : str.length
- 문자열 붙이기 : str.concat(str2) or str1+str2
String 다루기
- 특정 위치 문자열 알아내기
var str = "asdfgh";
str.charAt(0); // 0부터 시작하는 순서로 str라는 문자열의 0번째 글자출력함 ; "a"
str.charAt(str.length-1); // 마지막 문자를 출력해줌 ; "h"
str.charAt(7); // 문자열을 벗어난 순서로 출력하게 되면 빈문자열을 출력함 ; ""
str[0]; // 0번째 str이 출력됨; "a"
str[str.length-1]; // 마지막 문자를 출력함; "h"
str[-1] // 문자열을 벗어났으나 빈문자열이 아닌 undefined가 출력됨.
- 부분 문자열 구하기 : 문자열의 연속된 일부분을 구하는 함수
str. substring(pos1, pos2) // pos1 에서 pos2전 까지의 부분 문자열 반환
pos2 생략시 pos1에서부터 마지막 까지의 문자열 반환
ex) *var str = "abcdefg"
str.substring(2,4); "cd"
substr(pos, length) // pos에서 length길이 만큼의 부분 문자열 반환
length 생략시, pos에서 마지막까지의 문자열 반환
pos 가 음수인 경우, str.length - pos 로 동작
ex) *var str = "abcdefg"
substr(2,4); "cdef"
배열 만들기
배열 : 값을 저장할 수 있는 엘리먼트(변수)의 연속된 공간. 주소(인덱스, index)를 이용해 각 엘리먼트에 접근 가능.
배열의 정의
- 빈 배열 : var arr=[];
- 초기화된 배열 : var arr=[1,2,3,4,5];
- 엘리먼트에는 어떤 자료형이든 저장될 수 있음
- var mixed_arr = [ 1, true, 3.14, "string", {name:"object"}, [1,2,3] ];
배열의 길이
- .length 속성 이용
배열의 엘리먼트에 접근하기
- 대괄호 안에 인덱스를 사용 : arr[index]
- arr[0] = 1
- console.log(arr[arr.length-1]);
배열 사용하기
- 배열에 변수(엘리먼트)추가/삭제하기
.push(element) : 배열의 뒤에 엘리먼트 추가
.pop() : 배열의 뒤에서 엘리먼트 삭제하고 리턴
.shift() : 배열의 앞에서 엘리먼트 삭제하고 리턴
.unshift(element) : 배열의 앞에 엘리먼트 추가- 배열 붙이기, 검색하기
arr1.concat(arr2) : arr1과 arr2 붙임
arr.indexOf(element) : arr에서 element가 있는 첫 위치를 검색 (str에서도 동일)
arr.lastIndexOf(element) : arr에서 element가 있는 마지막 위치를 검색 (str에서도 동일)- 문자열 split 함수 : 문자열을 구분자로 나눠서 각각을 담은 배열을 반환하는 함수
var str="1,2,3,4,5";
arr = str.split(",");
arr = ["1", "2", "3", "4", "5"];
주석
한줄 주석 // 여기부터 주석
여러줄 주석
/* 여기부터
여기까지 주석 */
if, else, if, else : 조건에 따라 프로그램의 흐름을 분기해서 특정 코드가 실행되도록 함
if(/*조건식*/){
/*참인경우 실행될 코드*/
}
else if( /*조건식*/ ){
/*if 문의 조건이 거짓이고, 위의 조건식이 참인경우 실행될 코드*/
}
/* 여러개의 else if... */
else if( /*조건식*/ ){
/*위의 if, else if문의 모든 조건이 거짓이고, 위의 조건식이 참인경우 실행될 코드*/
}
else{
/*모든 if, else if 문이 모두 실행되지 않았을 때 실행될 코드*/
}
switch문
switch( /*비교할 값*/ ){
case /*값1*/:
/*비교할 값이 값1인 경우 실행될 코드*/
break;
case /*값2*/:
/*비교할 값이 값2인 경우 실행될 코드*/
break; //break사용하지않으면 switch문에서 빠져나오지 않고 다음 case해당 코드까지 시행함
/*
... 여러개의 case
*/
default:
/*비교할 값이 위의 모든 값과 다른 경우 실행될 코드*/
break;
}
while 문 (반복문) : 조건에 따라 프로그램의 일정 코드를 반복적으로 수행할 수 있도록 하는 구문
var count = 0;
while(count<3) {
var choice = pareseInt(prompt("메뉴를 선택해 주세요"));
console.log(choice +"번 메뉴를 선택하셨습니다");
switch(choice){
case 1:
console.log("아이스 아메리카노는 1500원 입니다.");
break;
case 2:
console.log("카페 라떼는 1800원 입니다.");
break;
case 3:
console.log("카푸치노는 2000원 입니다.");
break;
}
count++; /*count가 1씩 증가하게끔 설정함.
continue : 남은 반복실행될 코드를 모두 skip
break : 반복문에서 즉시 탈출 */
}
console.log("안녕히 가세요")
do, while 문
var con = false;
while(cond){
console.log("이 구문은 실행되지 않습니다.");
}
do{
console.log("이 구문은 한번은 실행됩니다.");
} while(cond); // 한번 실행되고 cond가 false라 이후 실행은 되지않음
do{
var ans = parseInt(prompt("1+1=?"));
} while(ans != 2); //반복해라 ans의 값이 2가 아니라면
console.log("맞췄습니다"); // ans의 값이 2로 나왔다면 표시해라
for문 : 초기구문, 업데이트 구문, 반복조건을 한 구문에 합친 반복문
ex) 0~4까지 더하는 동일한 while과 for 문
while 문
var sum=0;
var i=0; //초기 설정코드
while(i<5 //조건식){
sum = sum + i;
i++; //업데이트 코드
}for 문
var sum=0;
for(var i=0; i<5; i++;){ // i는 배열의 각 변수 index를 나타냄
sum=sum+i;
}
for in문 : 객체의 각 변수를 출력해주는 반복문
for 문
var property_list = Object.keys(obj);
for( var i=0 ; i<property_list.length ; i++ ){
var propertyName = property_list[i];
console.log( "\t", propertyName, ": ", obj[propertyName] );
}
for in 문
for( var propertyName in obj ){
console.log( "\t", propertyName, ": ", obj[propertyName] );
}
**var obj = {
name :"object",
weight:30,
isObject:true,
arr:[1,2,3],
obj:{property:1}
};
Comments