JAVASCRIPT
어제에 이어 자바스크립트~~
동적인 웹사이트 제작 시 사용되는 프로그래밍 언어. HTML이 인간의 뼈대, CSS가 옷이라면 자바스크립트는 인간의 뇌,장기의 역할을 한다.
자바스크립트는 IOT,하이브리드 앱(오피스),서버 개발에 활용된다.
자바스크립트 - 변수
학교에서 파이썬 프로그래밍 배울때 변수를 호텔의 방으로 설명해줬던 게 기억났다.
var coffee; //coffee라는 변수 선언
coffee= 'einspanner';
//coffee변수에 einspanner라는 데이터 할당. 변수 초기화
var coffee='caffe latte'; //변수 선언과 초기화를 한번에변수 선언은 데이터를 담을 공간을 생성하는 것이고, 변수 초기화는 생성된 변수에 데이터를 전달하는 것이다. 초기화라고 하니 아예 값을 없애는 것 같은데 값을 할당해 변수의 값을 초기화한다고 생각하면 좀 덜 헷갈릴 것 같다.
var coffee='einspanner';
coffee='americano☕';coffee라는 변수가 이미 생성되어있는 상태이므로 다시 coffee 변수를 선언할 필요는 없다.
console.log(coffee) //americano☕출력console.log();를 통해 변수 안에 데이터를 확인할 수 있다.
변수 생성시 주의사항
- 변수명은 숫자로 시작할 수 없다.
(var 1st은 불가, var num1은 가능) - 변수명은 최대한 자세하게 작성해야 한다.
(taxRate,randomNum 처럼 보기만 해도 이해할 수 있는 이름이 좋다.) - 의미가 불명확한 단어들의 조합은 피해야 한다.
(adsf,jsfdl,eiwo 이런것들)
HTML에 연결하기
<head>
<link rel='stylesheet' href='index.css'>
</head>
<body>
<script src='index.js'></script>
</body>css파일은 head 태그의 link태그를 사용하고, 자바스크립트는 body 태그 내에 script 태그를 사용해 연동시킨다.
자바스크립트 데이터 타입
String , Number , Function , Array , Object , Boolean , undefined , Null의 8가지가 있다.
Number:정수,음수,실수 구분 않고 Number
Function
함수생성(var func1=function(){})과 함수 호출(function func1(){}) 두 가지 형태로 만들 수 있다.첫번째 방법
var multiply=function(x,y){
return x*y;}
두번째 방법
function multiply(x,y){
return x*y}
multiply(4,5);
함수는 매개변수,인자, return으로 구성되어 있다.
매개변수(parameter): 인자로부터 전달받은 값을 넣을 통로.
인자(argument): 함수에 전달하는 값
return: 함수 안에 데이터를 저장할 때 사용된다.
위 코드의 x,y는 매개변수, 인자는 아래 multiply(4,5)의 4,5다.
함수의 값을 호출하는 방법은 두 가지이다.
var result=multiply(2,4);
console.log(result);첫번째는 위처럼 변수를 새로 생성한 뒤, 그 변수의 값을 console.log로 확인하는 것이고
console.log(multiply(2,4));두번째는 함수를 바로 불러와 console.log로 값을 확인하는 것이다.
Array
비슷한 성격을 가진 데이터들을 하나의 변수 안에서 관리.var coffee=['americano','caffe latte','caffe mocha'];
0 1 2
coffee[2]='einspanner';
console.log(coffee);
//['americano', 'caffe latte', 'einspanner']로 출력Object
프로퍼티, 메서드,데이터로 구성된다. 여러종류의 데이터타입을 삽입할 수 있다. var id={
프로퍼티=>nickname:'Caffeine Addict',
age:20, =>데이터
skills:['Python','HTML','CSS'],
메서드 =>sum:function(n1,n2){return n1+n2;}프로퍼티: 이름을 가지고 있는 데이터들,객체가 갖고 있는 데이터
메서드: 이름을 가지고 있는 함수,객체가 가지고 있는 함수
var student{ =>student = 빠짐!
name='Elice', =>프로퍼티 뒤에는 :!
age:20,
skills:["Java", "HTML", "CSS", "JavaScript"],
sum:function(num1,num2) { return num1 + num2; }; =>; 빼야함
}※객체 만들때 주의※
1. : 를 사용하지 않고 =를 사용하면 Invalid shorthand property initializer 오류가 발생한다.
2. var 객체이름 뒤에 꼭 =붙이기! 자꾸 까먹는다.
3. var 객체이름={}에서 중괄호 안에는 ;가 들어가지 않는다.
->메서드 내에 return 뒤에 붙이는 ;는 예외!
객체 데이터 호출과 변경
객체 데이터 호출
console.log(id.nickname); //Caffeine Addict
console.log(id['nickname']); //Caffeine Addict
객체 데이터 변경
id['nickname']='No More Caffeine';
id.nickname='No More Caffeine';
프로퍼티의 데이터를 바꾸는 방법과 데이터 출력 방법은 같다.객체 데이터 호출과 변경은 같은 방법을 사용한다.
변수['프로퍼티']=값 , 변수.프로퍼티=값 을 사용하면 된다.
메서드 호출도 동일하다!
student['sum'](2,4);
student.sum(2,4);Undefined & Null
undefined는 변수 안에 데이터를 할당하지 않아 데이터가 없는 상태이다. Null은 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태를 의미한다.var unDefined;
var typeNull = null;
변수 unDefined는 선언만 하고 초기화(값 할당)가 되지 않았기 때문에 console.log(unDefined);를 입력하면 undefined가 표시된다. 반면 변수 typeNull은 null이라는 값을 넣어줘 console.log로 확인하면 null이 표시된다.
프로퍼티와 메서드
문자열 프로퍼티와 메서드
var str="Hello World";
str.length; //문자열 길이:11
str.charAt(0); //0번째 문자:H
str.split(" ");
//공백 기준으로 문자를 나눈 후, ['Hello','World']로 출력된다.
str['length'];
str['charAt'](0);
str['split'](" ");여기서 str는 객체다. 그래서 자바스크립트에서 기본으로 제공하는 length,charAt,split과 같은 메서드를 사용할 수 있는 것이다.
그러므로 str.length 와 str['length']를 모두 사용할 수 있다.
배열 프로퍼티와 메서드
var coffee=['americano','caffe latte','caffe mocha'];
coffee.length; // 데이터 개수:3
coffee.push('espresso'); // 배열 뒤에 데이터 삽입
coffee.unshift('dolce latte'); // 배열 앞에 데이터 삽입
console.log(coffee)
//(5)['dolce latte', 'americano', 'caffe latte',
// 'caffe mocha', 'espresso']
coffee.pop(); // 배열 뒤의 데이터 제거, espresso출력 후 제거
coffee.shift(); // 배열 앞의 데이터 제거, dolce latte 출력 후 제거됨
console.log(coffee)
//(3) ['americano', 'caffe latte', 'caffe mocha']
마찬가지로, coffee['length'],coffee['push']('espress')로 메서드를 사용할 수 있다.
math 라이브러리의 수학연산 메서드
Math.abs(-8); // 절대값:8
Math.ceil(0.1); // 올림:1
Math.floor(5.9); // 내림:5
Math.random(); // 임의의 숫자 출력(소수도 출력가능)Math 라이브러리도 Math['ceil'](0.1)로 사용할 수 있다.
문자를 숫자로 변환하는 메서드
parseInt(“20.7”); // 정수 형태의 20 변환
parseFloat(“20.7”); // 실수 형태의 20.7 변환parse는 언어학에서 구문분석이라는 뜻으로 쓰이는데, 개발에서는 표현언어를 해석하는(디코딩하는) 것이라고 한다. 여기서는 뒤에 파라미터(매개변수)로 준 '20.7'을 읽어 소수와 정수 부분을 확인하고 Int로 변환한 것이라고 이해했다.
실습에 나온 메서드들 정리
arr1=[0,1,2,3,4,5,6,7];
arr1.splice(3,2) /3,4출력되고 삭제됨
console.log(arr1) /0,1,2,5,6,7splice(a,b): 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체할 수 있다.
a번째 숫자로부터 b개가 삭제된다.
sort():정렬함수(compareFunction):배열을 정렬하는 메서드
arr2=[30,10,20,1,3,5,7];
arr2.sort() // [1, 10, 20, 3, 30, 5, 7]arr2를 sort()하면 (7) [1, 10, 20, 3, 30, 5, 7]이 출력된다.
sort함수를 사용할 때, 매개변수에 비교함수(compareFunction)를 입력하지 않으면 유니코드의 값을 기준으로 정렬을 하게 된다.
arr2.sort(function(comp1, comp2) {
return comp1 - comp2;
});제대로 arr2를 sort()했다. 사실 sort안에 들어간 function이 잘 이해는 가지 않지만 일단 sort를 오름차순 정렬하기 위해서 compareFunction이 필요하다는 것만 알아둬야겠다...
join(): 배열을 문자열로 만들어 반환하는 메서드
arr3=[1,2,3,4,5];
arr3.join(); //'1,2,3,4,5'
arr3.join(' '); // '1 2 3 4 5'
arr3.join('+'); // '1+2+3+4+5'
arr3.join('과'); //'1과 2과 3과 4과 5'
console.log(arr3); //(5) [1, 2, 3, 4, 5]join()에 파라미터를 주지 않으면 배열형태 그대로 합쳐진다. (1,2,3,4,5)
join()에 문자열 파라미터를 입력하면, 파라미터가 배열의 요소 사이에 들어간다.
그러나 배열자체에 영향을 미치지는 않는다!
match( 정규 표현식 ):문자열에 어떤 단어가 몇 개 있는지 확인하는 메서드
tongue_twister='안촉촉한 초코칩 나라에 살던 안촉촉한 초코칩이 촉촉한 초코칩 나라의 촉촉한 초코칩을 보고 촉촉한 초코칩이 되고 싶어서 촉촉한 초코칩 나라에 갔는데 촉촉한 초코칩 나라의 촉촉한 초코칩 문지기가 "넌 촉촉한 초코칩이 아니고 안촉촉한 초코칩이니까 안촉촉한 초코칩 나라에서 살아"라고해서 안촉촉한 초코칩은 촉촉한 초코칩이 되는것을 포기하고 안촉촉한 초코칩 나라로 돌아갔다.'
console.log("위의 잰말놀이에서 '촉촉한'이 얼마나 나오는지 알아보자!");
console.log(tongue_twister.match(/촉촉한/g)); //(14) ['촉촉한','촉촉한','촉촉한'...]
//무수한 촉촉함의 향연..
console.log(tongue_twister.match());
//'', index: 0,
//input: '안촉촉한 초코칩 나라에 살던 안촉촉한 초코칩이 촉촉한 초코칩 나라의 촉촉한 초코칩을 보고 …서 안촉촉한 초코칩은 촉촉한 초코칩이 되는것을 포기하고 안촉촉한 초코칩 나라로 돌아갔다.', groups: undefined]
match()에는 정규표현식이 매개변수로 들어가야 한다.
만약 매개변수를 전달하지 않고 match()를 사용하면, 빈 문자열:[""]이 있는 배열이 반환된다.
g앞에 / / 사이에 찾고자 하는 문자를 따옴표 없이 적는다. 뒤에 오는 알파벳은 찾는 범위를 의미하는데 g는 전역(global)이다.
공부하기~~~
RegExp:정규 표현식 관련문서
정규 표현식 문서
