티스토리 뷰

Programming/JavaScript, Sencha

javascript 기본

파란크리스마스 2016. 2. 14. 02:08
728x90

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. 문자열 연산자

  • + : 문자열 합치기
9. 조건문

출처 : [JavaScript] 조건문과 반복문

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. 반복문

출처 : [JavaScript] 조건문과 반복문

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]);
}
11. 예외 처리
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 + "
")


댓글
300x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함