javascript 기본
1. alert
브라우져의 팝업으로 값을 확인하는 명령어
alert('Hello World !!!!');2. console.log - 로그값 확인
브라우져의 개발자모드를 이용해서 콘솔창에서 로그값 확인 가능
console.log('나 로그');3. 변수
변수 선언
var value1;
변수 대입
value1 = 2;
4. 상수
상수 const 키워드 사용
const const1 = 1'
5. 데이터 타입
- 숫자형 - 정수형 / 1, 2, 3
- 숫자형 - 실수형 / 1.23
- 문자형 - '변수'
- 블리언 - true / false
6. 배열
배열의 속성
length 속성 : 배열의 개수 반환
배열의 요소 추가
push
unshift
배열의 요소 삭제
pop() 마지막 요소 삭제, 반환값으로 삭제된 값 반환
shift() 첫번째
배열의 요소 접근
배열의 index는 0 부터 시작
<html>
<head>
</head>
<body>
<script type="text/javascript">
var colors = ["white", "black", "yellow"];
document.write("배열의 개수 = " + colors.length + "<br>");
document.write("배열의 두번째 요수 = " + colors[1] + "<br>");
</script>
</body>
</html>
7. 산술연산자
- + : 덧셈
- - : 뺄셈
- / : 나눗셈
- * : 곱셈
- ++ : 1증가
- -- : 1감소
- % : 나머지
8. 문자열 연산자
- + : 문자열 합치기
if문
var date = new Date();
var hour = date.getHours();
if(hour < 11) {
alert("아침");
}
else if(hour < 15) {
alert("점심");
}
else {
alert("저녁");
}switch문
var input = Number(prompt('숫자를 입력하세요.', '숫자'));
switch(input % 2) {
case 0:
alert("짝수입니다.");
break;
case 1:
alert("홀수입니다.");
break;
default:
alert("숫자가 아닙니다.");
break;
}삼항 연산자
var input = prompt('숫자 입력', '');
var number = Number(input);
(number > 0) ? alert('자연수') : alert('자연수아님');10. 반복문
while 반복문
value = 0;
while(value < 5) {
alert(value + '번째 반복');
value++;
}do while 반복문
var value = 0;
do {
alert(value + '번째 반복문');
value++;
} while(value < 5);for 반복문
var array = ['포도', '사과', '바나나', '망고'];
for(var i=0; i<array.length; i++) {
alert(array[i]);
}for in 반복문
배열의 요소 만큼 반복
var array = ['포도', '사과', '바나나', '망고'];
for(var i in array) {
alert(array[i]);
}try {
addalert("bad call");
} catch(e) {
alert(e.message);
}12. 함수
출처 : Javascript : 함수(function) 다시 보기
함수선언식 function declaration
function sum(src1, src2) {
return src1 + src2;
}
alert( sum(1, 2) ); // 결과 3
익명 함수표현식 anonymous function
var sum = function (src1, src2) {
return src1 + src2;
}
alert( sum(1, 2) ); // 결과 3
즉시실행함수 IIFF, Immediately Invoked Function Expression
(function() {
/* 실행코드 */
})();
함수 변수로 전달
// 전달될 함수
var sum = function (src1, src2) {
return src1 + src2;
}
// 첫번째 인자로 함수가 전달됨
function sum2(function_name, src1, src2, src3 ) {
var result = 0;
result = function_name(src1, src2);
result = function_name(result, src3);
return result;
}
alert( sum2( sum, 1, 2, 3) ); // 결과 6
13. 구조체
// 구조체
var user = {
name : '이순신',
user_id : 'lee',
age : 10
}
// (.)점으로 구조체 멤버에 접근
alert(user.name); // 이순신
구조체 내 함수
var user = {
name : '이순신',
user_id : 'lee',
age : 10,
getName : function() {
return this.name;
},
setName : function(name) {
this.name = name;
}
}
alert(user.getName());
user.setName('김유신');
alert(user.getName());
구조체 외부에서 함수 추가
var user = {
name : '이순신',
user_id : 'lee',
age : 10
}
user.getAge = function() {
return this.age;
}
alert(user.getAge());7. 객체
- 1
- 2
- 3
8. this 키워드
-
9. 내장 객체
출처 : JavaScript - 내장 객체의 종류 - 늑대의 기억 저장소
window : 브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 최상위 객체.
document : 웹 문서마다 하나씩 만들어지는 객체로 <body> 태그에 의해 만들어진다. HTML 문서에 대한 정보를 가지고 있다.
history : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
location : 현재 문서에 대한 URL 정보를 가지고 있는 객체
navigator : 현재 사용하는 브라우저에 대한 정보를 가지고 있는 객체.
screen : 현재 사용하는 화면에 대한 정보를 다루는 객체
10. Number 객체
-
11. Math 객체
출처 : Math 개체(JavaScript) - MSDN - Microsoft
JavaScript Math Reference - W3Schools
즐거움을 찾자 Find Fun!! :: JavaScript 수학 객체 Math
Math 주요 메소드
- abs(x) x의 절대값
- ceil(x) 올림
- max(x,y,z,...,n) 인자 중 max값
- min(x,y,z,...,n) 인자 중 min값
- random() 0 과 1 사이의 난수
- round(x) 반올림
12. Date 객체
출처 : Date - JavaScript | MDN - Mozilla Developer Network
JavaScript Date Reference - W3Schools
Date 개체(JavaScript) - MSDN - Microsoft
JavaScript Date Object - The Computer Technology
Data 객체 생성
var d = new Date(); // 인자가 없는 경우 객체가 생성된 시간 var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
현재 월 확인
var curdate = new Date() var month = curdate.getMonth() document.write(month + "
")