Javascript 02 미완성

Java Script는 JAVA를 기반으로 한 컴파일하지 않는 스크립트 언어이다.

단, 필드 생성자 메서드를 가지는 JAVA와 다르게 변수와 함수만을 가진다

 

변수

변수	데이터를 저장하는 공간
값, 상수constant	변수에 저장되는 값

var 변수명;
var 변수명 = 데이터값;

Tip) 문자형은 ' '(작은 따옴표), " "(큰따옴표) 둘 다 사용 가능

 

관계 연산자

연산자	설명	연산자	설명
A == B	A와 B는 같다	A != B	A와 B는 같지 않다
A === B	A와 B의 타입이 같다	A !== B	A와 B의 타입이 같지 않다

 

CDATA

: 유효성 검사의 오류를 막기 위한 스크립트 명령문, 현재는 이 방법은 거의 사용하지 않으며 대신 <![CDATA]>로 작성합니다.

<script>
	<![CDATA[
    	스크립트 실행문;
    ]]>
</script>

 

함수

: 코드 묶음

 

Function Declarations 선언적 함수

: 호출문이 먼저 나와도 에러 없이 처리

function 함수명() {  //생성
  실행문;
}
 함수명(); 	     //호출
 
 
 function 함수명 (매개 변수, 매개 변수, ...) {
 	return 리턴값;
 }
 var 변수 = 함수명(매개 변수, 매개 변수, ...);

return 값이 없는 경우: return만 쓰거나 생략 O

return 값이 있는 경우: 1개만 가능 ex) return "good";   return num;   return 3+5;

 

Function Expressiont 익명 함수

: 호출문을 함수 선언 이후에 작성해야 에러 X

var getTrapezoid = function(bottom, top, height) {
	return (bottom + top) * height / 2.0;
}
document.write("사다리꼴의 넓이 = " + getTrapezoid(5, 4, 3));

 

내장 함수

: JavaScript가 가지고 있는 함수

네트워크 통신용 함수	설명
encodeURI()	파라미터를 전달하는 URI 전체를 인코딩 할 때 사용 특수문자 ( : ; / = ? & ) 를 제외한 문자만 인코딩합니다 주로 인터넷 주소를 인코딩할 때 사용합니다
decodeURI()	encodeURI()로 인코딩된 데이터를 다시 되돌립니다(디코딩)

function ex1() {
		alert(encodeURI('가나다') + "\n" + decodeURI('%EA%B0%80%EB%82%98%EB%8B%A4'));
	}
	function ex2() {
		var x = 10, y = 15;
		alert(String(x) + String(y))
	}
	function ex3() {
		//eval: 문자로 된 수식을 JavaScript의 수식으로 인식하여 실행시키고 결과 반환
		var ob1 = eval("var num = 5 + 2");
		var ob2 = eval("({'a':1, 'b':2, 'c':3})");
		alert(num + "\n" + ob2.b);
	}

 

숫자와 관련된 내장 함수	설명
isNaN()	Not a Number 숫자가 아닌 문자가 포함되면 true
isFinite()	값이 유한수인지를 판단
parseInt()	문자를 정수형으로 변환
parseFloat()	문자를 실수형으로 변환
eval()	문자로 된 수식을 JavaScript의 수식으로 인식하여 실행시키고 결과 반환
Number()	문자를 숫자형으로 반환
String()	숫자를 문자형으로 반환

 

---

JavaScript

: JavaScript는 객체 기반의 스크립트 언어입니다. 기본 자료형을 제외하고는 배열, 함수 등 모두가 객체입니다. 객체란 데이터와 데이터를 처리하는 기술의 조합을 의미합니다.

 

Object 객체

Property	데이터를 저장하는 공간	이름, 값
Method	데이터를 처리하는 기술	객체에서 사용하는 함수

 

JavaScript에서 객체를 생성하는 방법

객체 리터럴 방식

	var User = {
		name: 'kim',
		age: 25,
		view: function() {
        	//자기 자신을 가리키는 키워드 this 사용하기
			document.write('My name is ' + this.name + "<br>");
			document.write('My age is ' + this.age);
		}
	};
	document.write(typeof User + "<br>");
	User.view();

선언과 동시에 인스턴스를 생성

 

생성자 함수를 이용한 객체 생성

var User = new Object();
	User.name = 'kim';
	User.age = 25;
	User.view = function() {
		document.write('My name is ' + this.name + "<br>");
		document.write('My age is ' + this.age)
	};
	User.view();

	function User(name, age) {
		this.name = name;
		this.age = age;
		this.view = function() {
			document.write('나의 이름은 ' + this.name + '이고 나이는' + this.age + '세입니다 <br>');
		};
	}
	var ob1 = new User('kim', 25);
	var ob2 = new User('lee', 20);
	ob1.view();
	ob2.view();

 

Standard Built-in Object 표준 객체

: JavaScript에서 자주 사용하는 Number, String, Array, Date, Math 등의 내장 객체

 

Number

new  연산자로 객체를 생성할 경우 추가 연산이 필요하기 때문에 주로 리터럴 사용

//var 변수명 = new Number(숫자); 또는 var 변수명 = 숫자;

	var a = 15;
	var b = new Number(15);
	document.write("a와 b를 더하면: " + (a.toString() + b.toString()));
	document.write("<br> 15의 2진수 표현: " + a.toString(2));
	document.write("<br> a와 b의 타입: " + typeof a + "&nbsp;&nbsp;" + typeof b);
	document.write("<br> a와 b의 값 비교: " + (a==b));
	document.write("<br> a와 b의 타입 비교: " + (a===b));

 

 

String

String 문자 관련 메서드		설명
속성	length	문자열의 길이
문자	big() / small()	문자를 한 단계 크게 / 작게
	blink()	문자를 깜박이게 설정
	bold()	굵게
	sub() / sup()	아래 첨자 / 위 첨자 설정
	fontsize()	크기 설정
	fontcolor()	색상 설정
	toLowerCase()	소문자 변경
	toUpperCase()	대문자 변경
	anchor('#위치표시문자')	<a name=" ">와 같은 효과
	link(경로)	<a href=" ">와 같은 효과
	italics() / strike()	이탤릭체 / 취소선 설정

 

String 문자열 관련 메서드	설명
charAt(n)	n번째 위치의 문자 반환
indexOf()	찾을 문자 위치 반환
lastIndexOf()	끝에서부터 시작해서 최초로 만나는 찾을 문자 위치 반환
substring(n1, n2)	n1에서 (n2 - 1) 사이의 문자열 반환
slice(s, e)	s부터 (e-1)의 문자열 분리
substr(s, 길이)	s부터 길이만큼 문자열 추출
concat("문자열")	두 개의 문자열 연결
split("기준 문자")	기준이 되는 문자로 문자열을 잘라 배열에 저장
replace(s1, s2)	문자열 s1을 s2로 치환

var 변수명 = new String("문자열");
var 변수명 = "문자열";

<script>
    var data = new String("javascript test");
	document.write(data + "<br>");

	document.write(data.length + "<br>"); //.length: 문자열의 길이를 구하는 속성
	document.write(data.toLowerCase() + "<br>");
	document.write(data.bold() + "<br>");
	document.write("남가람북스".link('http://www.namgarambooks.co.kr') + "<br><br>");
	document.write(data.charAt(0) + "<br>");
	document.write(data.substring(1, 3) + "<br>"); //.substring(n1, n2): n1에서 n2-1 사이의 문자열 반환
	document.write(data.substring(4) + "<br>"); //4까지 자른건강
	document.write(data.replace("test", "sample") + "<br>");  //replace(): 대체
</script>

 

Array

메서드	설명
sort()	오름차순 정렬
reverse()	역순 정렬
concat(array)	두 개의 배열을 합쳐 하나로
join([str])	배열에 들어 있는 값을 모두 붙여 하나의 문자열로
push()	배열의 마지막에 새로운 원소 추가
pop()	배열의 마지막 원소 추출((가장 최근에 push()한 요소)

<script>
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var len = fruits.length;
    var text = "";
    for (i = 0; i < len; i++) {
    	text += fruits[i] + "<br>";
        }
        document.write(text);
        
        text.sort();
        document.write(text);
        
        text.reverse();
        document.write(text);
</script>

 

Date

메서드	설명
setFullYear / getFullYear()	연도 설정 / 반환
setMonth() / getMonth()	월 설정 / 반환
setDate() / getDate()	일 설정 / 반환
setHour() / getHour()	시간 설정 / 반환
setMinutes() / getMinutes()	분 설정 / 반환
setSeconds() / getSeconds()	초 설정 / 반환
setMilliseconds() / get Milliseconds()	밀리초 설정 / 반환
toString	날짜를 문자 형식으로 반환

날짜	범위	시간	범위
연도	1900년(00) ~ 1999년(99)	시	0시(0) ~ 23시(23)
월	1월(0) ~ 12월(11)	분	0분(0) ~ 59분(59)
일	1월(1) ~ 31일(31)	초	0초(0) ~ 59초(59)

 

var days = new Array("일", "월", "화", "수", "목", "금", "토"); //객체 생성
	var date = new Date();
	document.write("오늘은 " + date.getFullYear() + "년 " + (date.getMonth()+1) + "월 " + date.getDate() + "일 " + days[date.getDay()] + "요일입니다. <br>");

	document.write("현재 시간은 " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "입니다.");

 

Math

메서드	설명
max()	가장 큰 값 반환
min()	가장 작은 값 반환
round(n)	반올림
ceil(n)	올림
floor(n)	내림
abs(n)	절댓값
random()	난수 반환
pow()	거듭제곱을 계산하여 반환

 

브라우저 객체 모델

: 브라우저 객체 모델Browser Object Model은 웹 브라우저와 관련된 모든 객체들의 집합입니다. JavaScript에는 브라우저의 정보에 접근하거나 브라우저의 기능적 요소들을 직접 제어하고 관리할 수 있는 기능이 있습니다. 브라우저 객체 모델의 종류로는 URL의 정보를 제공해주는 location 객체, 현재 실행 중인 브라우저의 정보를 제공해주는 navigator 객체, 방문 기록에 대한 정보를 제공해주는 history 객체, 모니터의 정보를 제공해주는 screen 객체, 문서에 대한 정보를 제공해주는 document 객체가 있습니다. 브라우저 객체 모델은 문서 객체 모델 Document Object Model과 달리 W3C가 제공하는 표준 객체 모델은 아닙니다. 다음의 setInterval()을 비롯한 몇 메서드들은 삭제되었습니다.

 

P193부터

window 객체

: 브라우저 객체 모델의 최상위 객체, 다음은 window의 형태와 위치를 변경할 수 있는 메서드들 입니다. window는 생략이 가능합니다.

메서드	설명

 

---

192P부터~ 207깢

setInterval() 안됨 그 외에도 안될 수 있음