** 제어문
1.for
=> 반복문
for( 처음 한번만 식 ; 비교식; 두번쨰 수행하는 식){
반복내용;
}
=> 실행방법 : 처음 수행되는 식을 수행하고 비교식의 값이 false 가 아니면 {} 안의 내용을 수행
수행을 완료하면 두번쨰 부터 수행하는 식을 수행하고 비교식의 값이 false 가 아니면{} 안의 내용을 수행
두번째 수행하는 식을 수행하고 비교식이 false 가 될때 까지 반복
=> 각각의 식이 생략 가능
for(var i =0; i< 10; i++){
document.write("<p>"+"Hello JavaScript"+"</p>");
}
2.while
=> 반복문
while(boolean 결과가 나오는 변수나 연산식 또는 상수){
()의 내용이 false 가 아니면 수행될 내용;
}
var i = 0;
while(i<10){
document.write("<p>"+"Hello JavaScript"+"</p>");
i++;
}
3.do ~ while
do{
반복할 내용
}while(boolean 결과가 나오는 변수나 연산식 또는 상수);
=>() 안의 내용이 false 가 될떄 까지 {} 안의 내용을 반복 수행
=> 한 번은 반복 내용을 수행
//do ~ while 은 반드시 한번은 수행한다라는 의미를 전달할 목적으로 많이 사용
var i =0;
do {
document.write("<p>" + "Hello JavaScript" + "</p>" );
i++;
}while (i<10); //()
4.for -in
=>for each 라고도 함
=> 데이터의 모임을 순회하기 위한 제어문
for 임시변수 in 데이터의 모임{
모임을 순회하면서 수행할 내용
}
=> 배열의 경우는 임시변수에 인덱스가 대입됩니다.
=> 객체의 경우는 임시변수에 속성이 대입됩니다.
var ar = [ "JavaScript" , "TypeScript" ];
// 배열을 순회
//temp 가 인덱스가 대입됩니다.
for ( var temp in ar){
document.write("<p>" +temp+ "</p>" );
}
var ar = [ "JavaScript" , "TypeScript" ];
// 배열을 순회
//temp 가 인덱스가 대입됩니다.
for ( var temp in ar){
document.write("<p>" +ar[temp]+ "</p>" );
}
//javascript 에서느느 객체의 속성을 잘 알려고 할 때
//location 객체의 모든 속성을 확인
// 객체를 for 에 대입하면 모든 속성을 임시변수에 대입
//location 이 가지고 있는 것이 나온다.
for ( var attr in location){
document.write("<p>" +attr+ "</p>" );
}
5. 제어문의 중첩
=> 제어문 안에 다른 제어문을 작성하는 것이 가능
=> 먼저 시작한 제어문이 나중에 끝나야 합니다.
먼저 시작한 제어문을 시작하면 포함된 제어문을 전부 수행하고 먼저 시작한 제어문의 다음으로 넘겨갑니다.
0 ***** 0-4
1 **** 0-3
2 *** 0-2
3 ** 0-1
4 * 0-0
라인은 0 부터 4 까지
라인 안에서 별은 0 부터 시작
4->3->2->1->0 :-1 씩 증감
-1* 라인 +4
for ( var line = 0 ; line <5 ;line ++){
for ( var i = 0; i < 5-line ; i++){
document.write("*" );
}
document.write("<br/>" );
}
6.break
=> 반복문이나 switch 안에 사용되서 반복문이나 switch 구문을 종료하는 역할
7.continue
=> 반복문에 사용되서 다음 반복으로 넘어가는 역할
8.break 나 continue 가 반복문에 사용될 때는 대부분 if 와 함께 사용
반복문이 중첩된 경우 break 나 continue 는 가장 가까운 곳에서 만들어진 반복문을 종료하거나 다음 반복으로 넘어갑니다.
9.return
=> 함수 안에 사용되서 함수의 종료( 호출한 곳으로 리턴) 하고 데이터를 넘겨주는 제어문
=> 함수안에서 if 구문과 함께 return 이 작성되면 return 이후에 elseelse 구문이 됩니다.
if( 조건(){
return;
}
내용 //else 를 작성하지 않더라도 내용은 else 에 있는 것과 동일하게 동작
10. 제어문 작성시 주의사항
=>( 조건식); 에 주의해야 합니다.
do ~while 을 제외하고는 ( 조건식) 뒤에 ; 을 할 필요가 없습니다.
; 을 하게되면 제어문이 없는 것과 마찬가지가 됩니다.
for(var i =0; i< 10; i++{
반복내용;
}
반복내용을 1 번만 수행합니다.
=> 제어문 다음에 수행할 내용이 한줄이면 {} 를 생략하는 것이 가능
반복문이 중첩되는 경우에 {} 를 생략하면 코드를 읽는 것이 어려워질 수 있기 때문에 생략하지 않는 경우가 더 많습니다.
제어문을 중첩을 할 떄는 들여쓰기를 적절히 이용해서 블록을 정확하게 만들어주는 것이 가독성을 높이는 방법 중의 하나입니다.
//1 부터 10 까지 출력 - 3 의 배수가 되면 종료
for ( var i = 1; i <11; i++){
// 제어문에서 수행 내용이 1 줄이면 {} 생략 가능
if (i % 3 ==0) break ;
document.write(i+"<br/>" );
}
//1 부터 10 까지 출력 - 3 의 배수인 경우는 수행하지 않음
//continue 는 특정 조건을 만족하는 경우 수행하지 않도록 할 때 사용
for ( var i = 1; i <11; i++){
// 제어문에서 수행 내용이 1 줄이면 {} 생략 가능
if (i % 3 ==0) continue ;
document.write(i+"<br/>" );
}
**Function( 함수)
1. 함수
=> 자주 사용되는 또는 독립적으로 수행하고자 하는 내용을 묶어서 하나의 이름으로 설정해 놓은 것
=> 함수 부터가 작업의 단위
=> 함수부터가 작업의 단위이면 독립적인 메모리를 할당 받을 수 있는 단위
함수 안에서 만들어진 변수는 함수 내에서만 사용이 가능
2. 함수의 종류
1) 사용자 정의 함수: 개발자가 만든 함수
2)Maker Function : 제공되는 함수 - 자바스크립트에서는 window 객체의 내장함수
자바스크립트에서는 window 객체의 속성이나 함수는 window. 을 생략하고 호출이 가능하기 때문
3. 함수의 정의
=> 자바스크립트에서는 함수도 하나의 자료형( 함수가 일급 객체 - python, c 에서도 동일)
1)
var 함수명 = function( 매개변수 나열){
함수 내용;
return;
}
2)
function 함수명 ( 매개변수 나열){
함수 내용;
return;
}
=> 예전에는 2 번째 방법으로 함수를 만들었는데 최근에는 1 번째 방법을 권장
var func = function (){
// 어떤 변수나 연산식의 결과를 확인하고자 할 때 콘솔에 출력해봅니다.
console.log(" 함수" );
}
func()
//() 을 하지 않고 함수를 호출하면 함수가 저장된 곳의 위치나 함수의 내용
document.write(func)
4. 함수 호출
함수명( 매개변수)
=> 함수명만 입력하면 이것은 함수의 참조를 리턴합니다.
함수의 내용이 됩니다.
5. 매개변수(argument)
=> 함수를 호출 할 때 넘겨주는 데이터
1) 매개변수 를 만들 때 매개변수의 자료형은 개재하지 않습니다.
fuction(a){}
2) 함수를 호출할 때 매개변수 대입을 생략할 수 있습니다.
매개변수가 있는데 데이터를 대입하지 않으면 그 매개변수는 undefined 가 됩니다.
3) 함수를 정의할 때 매개변수를 기재하지 않았더라도 함수 내부에서 매개변수를 사용할 수 있느데 이 때는 매개변수들이 arguments 라는 뱅열로 만들어집니다.
// 매개변수가 2 개인 함수
var func1= function (a,b){
console.log(a);
console.log(b);
}
//2 개의 매개변수를 대입해서 함수를 호출
func1(100,200);
//1 개의 매개변수만 대입 - 대입하지 않은 b 는 undefined
func1(300);
// 매개변수가 없지만 함수내에서 arguments 라는 배열로 매개변수를 받릉 수 있습니다.
// 자바스크립트나 파이썬의 함수들은 도큐먼트를 읽고 사용하는 것이 좋습니다.
var func2= function (){
for ( var i in arguments){
console.log(arguments[i])
}
}
func2(200,900);
6.return
=> 함수를 호출한 곳으로 돌아가는 제어문
=>return 데이터 형태로 데이테를 가지고 return 할 수 있습니다.
=>return 할 데이터가 없다면 return
7. 내부함수
=> 함수 안에 함수를 만드는 것이 가능
8.closure
=> 함수가 함수를 리턴하는 경우
=> 함수 내의 데이터를 계속 사용하기 위해서
=> 함수 내에서 만든 데이터는 함수의 수행이 종료되면 소멸됩니다.
함수가 리턴한 데이터도 함수의 수행이 종료되면 소멸
// 함수가 함수를 리턴헤서 내부의 데이터를 조작할 수 있도록 하는 것을 closure 라고 합니다.
var f = function (){
var inner = 0;
return function (){
inner = inner +1;
document.write("<br/>" +inner );
}
}
//Uncaught ReferenceError: inner is not defined
//document.write(inner);
var k = f(); //f 를 호출한 결과가 k 에 저장 -k 도 함수가 됩니다.
9. 내장 함수
=> 자바스크립트가 제공하는 함수
=> 자바스크립트 안의 window 객체가 제공하는 함수
=> 자바스크립트에서는 window 객체의 속성이나 함수는 window. 없이 사용이 가능
1)alert
=> 매개변수로 대입된 데이터를 메시지 박스를 이용해서 출력해주는 함수
=> 별도의 대화상자를 출력하기 때문에 팝업창이 차단되면 대화상자를 출력하지 못합니다.
// 브라우저 마다 다르다.
alert(" 메시지 대화상자" );
2)confirm
=> 메시지와 2 개의 버튼을 출력하는 함수
=> 확인과 취소 버튼을 만들어서 출력해주는데 확인을 누르면 true 를 리턴하고 취소를 누르면 false 를 리턴
var result = confirm( " 정말 삭제하시겠습니까 ?" );
document.write("<br/>" +result );
3)prompt
=> 한 줄 입력상자를 포함하는 대화상자
prompt( 메시지, 기본값) 의 형태로 사용하면 확인을 누르면 입력한 데이터를 리턴하고 취소를 누르면 null 을 리턴
// 입력하지 않고 확인을 누르면 "" 이 리턴됩니다.
var result = prompt( " 이름을 입력하세요?" );
document.write("<br/>" +result );
4)eval -> 이것으로 되여있으면 책이 오래됬다.
=> 태그에 만들어진 name 을 가지고 객체를 만들어주는 함수
document. 폼이름. 객체이름 형식으로 입력해서 사용
최근에는 document.getElementById(id) 의 형태로 객체로 만들어서 사용하는 것을 권장합니다.
5) 인코딩 및 디코딩 함수
=>encoding: 프로그래밍언어에 입력된 문자열을 메모리에 저장되는 형태로 변경하는 것
=>decoding: 메모리에 저장된 형태를 프로그래밍 언어나ㅏ 사람이 알아볼 수 있는 형태로 변경하는 것
=>url 처럼 컴퓨터가 인식해야 하는 데이터는 영문과 숫자 이외의 글자가 있는 경우 인코딩해서 전달해야 한고 그 결과를 보고자 할 때는 디코딩해서 확인해야 합니다.
=>escape(); 일부 특수문자를 제외하고 전부 인코딩
=>encodingURI(); URL 에 사용되는 특수문자를 제외하고 인코딩
=>encodingURIComponent: 영문과 숫자를 제외하고는 모두 인코딩
=> 대부분의 경우는 encodeURI 를 사용합니다.
=> 디코딩 해주는 함수는 unescape(), decodeURI(), decodeURIComponent()l
=>url 을 인코딩 할 때는 파라미터 부분만 인코딩 해야 합니다.
프로토콜:// 도메인또는ip/ 파일경로? 파라미터이름= 값& 파라미터이름= 값..
var url = "http://www.daum.net?name= test&addr= 서울시양천구목동" ;
document.write("<br/>" +escape(url) );
// 이 메소드는 파라미터만 인코딩합니다.
// 주소부분은 인코딩하지 않습니다.
//URL 은 파라미터 부분만 인코딩해야 합니다.
document.write("<br/>" +encodeURI(url) ); // 파라미터만 인코딩한다.
document.write("<br/>" +encodeURIComponent(url) );
6)parseInt 와 parseFloat
=> 무자열을 정수나 실수로 변경해주는 함수
=>GUI 프로그래밍에서는 문자열을 입력을 받을 수 있습니다.
입력받은 문자열을 숫자로 변경하는 중요한 작업 중의 하나입니다.
=>parseInt 와 같은 메이커 함수를 이용해도 되고 직접 구현해보는 것도 중요합니다.
rose ->anagram
rose , oser, sero, eros => 비슷한 것 찾기
연결서열 찾는 것 해보기
**Object
=> 객체라고 할 때는 프로그램에서 실체가 있는 모든 것
=> 인스턴스는 클래스를 기반으로 만들어진 객체
인스턴스는 클래스만 있는 것에서 사용한다.
int a = 10;
String str = new String("HI");
a 는 클래스로부터 만들어진것이 아니라서 객체라는 표현은 사용하지만 인스턴스라고 하지는 않습니다.
str 은 객체라고 하기도 하고 인스턴스라고 하기도 합니다.
1. 종류
1) 사용자 정의 객체: 사용자가 만든 객체
2)BOM: (Browser Object Model): 브라우저가 처음부터 제공하는 객체
=> 이미 만들어진 객체를 바로 사용
=> 이름이 이미 결정되어 있음
3)DOM:(Document Object Meodel): 브라우저가 제공하는 생성자나 클래스를 이용해서 개발자가 만든 객체로 body 태그 안에 있는 태그들
메모리 상에서는 트리 형태로 펼쳐져 있습니다.
=>body 태그 안에 만들어 둔 태그를 찾아서 사용
=> 이름은 개발자가 직접 생성
2. 사용자 정의 객체
var 변수명 ={ 속성이름 : 값, 속성이름 : 값...}
=> 자바스크립트나 파이썬은 사용자 정의 객체가 Map 형식 - 나중에 속성을 추가하거나 삭제하는 것이 가능
1) 객체가 자신의 속성에 접근
객체[" 속성"] 또는 객체, 속성으로 접근 가능
2) 속성의 값으로 함수를 대입하는 것도 가능
// 속성이름은 문자열로 만들어져야 하기 때문에 "" 를 생략해도 됩니다.
// 자바스크립트나 파이썬에서는 함수 안에서 자신의 속성을 호출할 때 this 를 붙여야 합니다.
var obj = {nanme: " test" ,age : 50 , disp: function (){document.write(name + ":" + age);} } ;
// 속성이름은 문자열로 만들어져야 하기 때문에 "" 를 생략해도 됩니다.
// 자바스크립트나 파이썬에서는 함수 안에서 자신의 속성을 호출할 때 this 를 붙여야 합니다.
//python 에서는 this 라는 이름을 개발자가 정할수 있습니다.
//this 가 없어면 function.
var obj = {name: " test" ,age : 50 , disp: function (){document.write( this .name + ":" + this .age);} } ;
obj.disp();// 함수 호출
document.write("<br/>" +obj.name+ " :" +obj[ "age" ]);
3)for-in 을 이용하면 객체의 모든 속성을 순회할 수 있습니다.
4) 속성이름 in 객체를 이용하면 속서이 객체에 존재하면 true 없으면 false
=> 자바스크립트에서는 이 구문을 많이 사용하는데 BOM,DOM 처럼 브라우저가 제공하는 객체들은 브라우저마다 소유한 속성이 달라서 어떤 속성이 있는지 확인해서 속성을 호출해야 하는 경우가 종종 있기 때문입니다.
=>IE 와 다른 브라우저를 구분해서 동작을 수행하기 위해서 입니다.
//name 은 존재하는 속성이라서 true address 는 없는 속성이라서 false
document.write("<br/>" +( "name" in obj));
document.write("<br/>" +( "address" in obj));
5)with
=>with( 객체이름){} 을 하게 되면 {} 안에서는 객체이름. 을 생략하고 속성 사용이 가능합니다.
이렇게 하게되면 속성이 window 객체에 있는 것인지 객체 안에 속한 것인지 혼동이 올 수 있습니다.
6) 속성 제거 및 구가
객체이름[" 속성이름"] = 값;
속성이 존재하면 수정이지만 없으면 생성입니다.
delete( 객체이름[" 속성이름"]) 을 이용하면 속성 제거
7). 생성자 함수
=> 자바스크립트는 클래스 개념이 없습니다
=> 자바스크립트에서는 클래스는 없지만 생성자의 개념은 존재해서 동일한 모양의 여러 개의 객체를 만들고자 할 때 생성자를 이용합니다.
생성자 안에서 this. 속성을 만들면 이 속성이 객체의 속성이 됩니다.
this. 을 붙이지 않으면 지역변수가 됩니다.
this 를 붙이는 가 아닌가에 따라서 생성자가 결정된다.
=> 생성자 함수의 이름 시작은 대문자로 하는 것이 관례
// 생성자 함수 -this 를 이용해서 name, age, disp. 라는 속성을 생성
var Person = function (name, age){
this .name = name;
this .age = age;
this .disp = function (){
document.write(this .name + ":" + this .age);
}
}
// 자바스크립트는 클래스의 개념이 없어서 객체 지향 언어라는 표현을 사용하지 않고
// 객체 기반 언어라는 표현을 사용합니다.
// 최근에는 자바스크립트에 객체 지향의 개념을 도입한 TypeScrypt 가 등장했습니다.
// 생성자를 이용한 객체 생성
var person1 = new Person( " 이순신" , 80);
person1.disp();
person1.address =" 서울시 양천구 목동" ; // 추가
delete (person1.age); // 지우기
person1.disp();
//map 구조이기 떄문에 추가도 삭제도 가능하다.
3. 일반 내장 객체
=> 자바스크립트의 내장 객체는 http://www.w3schools.com/jsref/default.asp 이나
http://devdocs.io/javascript/ 에서 확인 가능
dom 은 우리가 만든것이 dom 이다.
1)Object 객체
=> 자바스크립트의 최상위 객체
=> 다른 모든 객체들이 가져야 하는 공통 속성을 소유
=> 사용자 정의 객체도 Object 객체의 하위 객체입니다
=>toString(): 객체를 문자열로 리턴해주는 함수
이 함수는 출력하는 함수에 객체를 매개변수로 대입하면 자동으로 호출
=>Object.prototype. 속성이름 = 값을 추가하면 모든 자바스크립트 객체에 속성이 추가가 됩니다.
2)Number 객체
=> 숫자 자료형 객체
3)String 객체
=> 문자열 객체
=> 다른 언어가 가진 메소드들을 대부분 소유
=>length 가 함수가 아니고 속성
i 는 출발점
i j
0 + 0,1,2,3
1 + 0,1,2,3
2 + 0,1,2,3
3 + 0,1,2,3
=> word.charAt((i+j)%word.length) 원래 자리로 돌아간다.
var word = "rose" ;
// 각각의 글자를 하나씩 출력
for ( var i = 0; i <word.length; i++){
for ( var j = 0; j <word.length; j++){
document.write(word.charAt((i+j)%word.length));
}
document.write("<br/>" )
}
4)Math
=>Java 의 Math 객체와 동일
=> 객체를 만들지 않고 Math. 속성 또는 메소드() 로 사용
=>random(): 0.0 ~ 1.0 사이의 랜덤한 실수 리턴
=>PI, E 라는 속성을 이용해서 파이값과 자연로그 값을 사용
var ar = [ "C" , "Java" , "Python" , "JavaScript" ];
// 배열 내의 데이터를 랜덤하게 추출
//Math.random() 이면 0.0 ~ 1.0 사이의 랜덤한 실수
// 정수로 변환 : parseInt 또는 Math.round() 반올림
// 배열의 데이터 개수는 length 속성
//random 숫자에 일정한 값을 곱해서 0 ~ 3 범위를 넘어서게 만듭니다.
// 소수 반올림을 이용해서 정수로 변환
// 변환한 정수를 배열의 데이터 개수로 나눈 나머ㄴ지로 범위를 축소
//ramdom 난수 표 있다. 현재시간으로 시드에서 나온다.
//c 언어는 맨 처음에 부조건 46 이 나온다.
var x = Math.round((Math.random() * 100) % ar.length);
document.write(ar[x]+"<br/>" );
5)Date
=> 날짜를 위한 객체
=> 날짜 및 시간은 기준시를 기준으로 지나온 시간을 정수로 저장
=> 필요에 따라 이 정수를 년월일 시분초로 변환
=> 필요에 따라 이 정수를 년월일 시분초로 변환
=> 자바스크립트는 시간의 단위가ㅏ 1/1000 초 ( 밀리초)
=> 객체 생성
new Date(): 현재 날짜 및 시간
new Date( 정수): 1970 년 1 월 1 일 자정부터 지나온 시간 -epoch time
new Date( 년, 월, 일, 시, 분, 초, 밀리초) ; 뒤에서부터 생략 가능
=> 메소드
get 단위(),set 단위( 값)
=>getTime(): epoch time 을 리턴
// 자바나 자바스크립트는 월이 0 부터 시작합니다.
var d = new Date(1986, 4,5);
document.write(d+"<br/>" ); //Thu Jun 05 1986 00:00:00 GMT+0900 ( 대한민국 표준시)
// 오늘 날짜에서 d 까지 몇칠이 지났는지 확인
var today = new Date();
var ch = today.getTime() - d.getTime();
alert(Math.round(ch/(1000*60*60*24)));
// 자바는 21 억 까지 밖에 안되서 확인 해야 한다.
1000 분의 1 초 단위로 나온다.
6) Array
=> 배열 객체
=> 배열은 Double Linked List
=> 앞이나 뒤에서 삽입가능하고 중간에 삽입이나 삭제도 가능
=>reverse(),pop()- 마지막 요소를 꺼내서 리턴, push()- 저장, shift()- 첫번째 데이터를 제거하고 리턴, unshift()- 첫번째에 데이터를 저장
=>remove( 데이터) - 데이터 삭제
=>indexOf( 데이터) - 데이터를 찾아서 위치를 리턴하는데 없으면 음수 리턴
=>sort()- 데이터를 오름차순 정렬
숫자 데이터는 문자열로 치환해서 정렬합니다.
매개변수가 2 개이고 정수를 리턴하는 함수를 대입하면 메소드를 이용해서 비교한 후 정렬
python 은 결과가 나오는것만
sort(str.len)
var doubleLinkedList = [];
doubleLinkedList.push(29);
doubleLinkedList.push(31);
doubleLinkedList.push(129);
doubleLinkedList.push(41);
document.write(doubleLinkedList+"<br/>" );
//"29","31","129","41"
document.write(doubleLinkedList.sort()+"<br/>" ); //129,29,31,41
// 자바스크립트는 단위를 다르게 안여면 결과를 알수가 없다.
//2 개의 데이터 뻴셈 결과로 정렬 - 함수형 프로그래밍
// 함수의 매개변수로 함수를 대입
document.write(doubleLinkedList.sort(function (left,right){ return left-right})+ "<br/>" ); //29,31,41,129
document.write(doubleLinkedList.sort(function (left,right){ return right-left})+ "<br/>" ); //129,41,31,29
소켓동신 tcp,udp 성능은 좋은데 구현이 어렵다.
url 통신 성능은 떨어지지만 구현은 쉽다.
클라이언트가 중요한 원인인 요청만 했다. 서버( 처리 -> 결과 -> 화면)
<------ 화면
1024 *768
반응형 웹 : 화면 크기와 상관없이 크기가 같게 나오자.
모바일 때문에 클라이언트가 중요해졌다.
최근에는 화면을 주지 말고 데이터만 줘라
서버에서 결과물을 만들어오면 정렬 하면 저장소 까지 가야 한다. 화면에서 할수 있으면 서버 까지 갈 필요없다.
데이터를 무료로 주면 OpenAPI
데이터를 빠르게 해주는 것이 중요하다 그래서 화면에서 해주는 것이 좋다.
통신할 때는 텍스트 밖에 안한다.
컬럼단위가 아니라 행단위로 정렬하는 것
// 생성자 생성
var Data = function (name, score, age){
this .name = name;
this .score = score;
this .age = age;
this .disp = function (){
document.write(this .name + ":" + this .score+ ":" + this .age+ "<br/>" )
}
}
var list = [ new Data( " 크루이프" ,98,54), new Data( " 베르캄프" ,99,51), new Data( " 반브스텐" ,87,53)];
// 정렬을 위한 함수를 생성
var nameCompare = function (left, right){
if (left.name > right.name){
return 1;
}else if (left.name < right.name){
return -1;
}else {
return 0;
}
}
var scoreCompare = function (left, right){
return left.score - right.score;
}
var ageCompare = function (left, right){
return left.age - right.age;
}
var menu = prompt( " 정렬할 옵션을 선택하세요(1. 이름, 2 점수 , 3. 나이)" );
if (menu == "1" ){
list.sort(nameCompare);
}else if (menu == "2" ){
list.sort(scoreCompare);
}else if (menu == "3" ){
list.sort(ageCompare);
}else {
alert(" 잘못된 메뉴 입력한 대로 출력" );
}
for ( var temp in list){
list[temp].disp();
}
=> 배열에 추가된 함수: forEach(), filter(),map()=> 이방법을 이용하면 조금 더 효율적이다.
forEach() 는 매개변수가 1 개이고 리턴이 없는 함수를 대입해서 배열의 모든 요소가 함수를 수행하도록 합니다.
filter 는 매개변수가 1 개이고 boolean 을 리턴하는 함수를 대입해서 배열의 모든 요수 중에서 true 를 리턴하는 데이터를 가지고 새로운 배열을 만들어서 리턴합니다.
map 은 매개변수가 1 개이고 데이터를 리턴하는 함수를 대입해서 배열의 모든 요솔르 가지고 함수를 수행해서 리턴된 값들을 가지고 새로운 배열을 만들어서 리턴합니다.
var x = [30,23,76,72];
// 배열의 모든 요소를 함수의 매개변수로 대입해서 함수를 실행
x.forEach(function (arg){
alert(arg);
});
//fiter 는 골라내는 것 return 을 받아야 한다.
// 배열을 모든 요소를 함수의 매개변수로 대입해서 함수의 리턴값이 true 인 데이터만 추출해서
// 배열로 생성
var o = x.filter( function (arg){ return arg%2 == 0});
alert(o)
// 배열의 모든 요소를 함수의 매개변수로 대입해서 함수의 리턴값을 가지고 새로운 배열을 리턴
o = x.map(function (arg){ return arg+10 ;});
alert(o);
7)JSON 객체
=>JSON : 자바스크립트 객체 표현 방법을 이용해서 데이터를 표현
[]: 배열
{ 속성: 값, 속성: 값...}
=> 직접 작성하는 경우에는 속성이름데 "" 를 해주어야 합니다.
실제로는 직접 작성하는 경우는 거의 없음
데이터를 만드는 것은 데이터를 가져와서 라이브러리를 이용해서 변환
=>JSON.parse( 문자열): JSON 형식의 문자열을 자바스크립트의 자료형으로 변환
=>JSON.stringfy( 자바스크립트객체): json 형식의 문자열로 변환
parse 가 중요합니다.
최근에 서버가 클라이언트가 넘겨주는 데이터 포맷중에서 가장 많이 사용되는 것이 JSON 입니다.
스마트 폰은 거의 대부분 JSON 입니다.
google 과 apple 이 데이터를 JSON 으로 넘겨줍니다.(twitter)
Back-end 언어를 할 때는 html 을 만들어주는 것도 중요하지만 JSON 이나 XML 형식의 데이터를 리턴하는 것도 중요합니다.
4 .BOM(Browser Object Model)
=> 브라우저가 처음부터 제공하는 객체
1)window 객체
=> 웹 브라우저에 해당하는 객체
=>location 속성 : 현재 url 확인
=>opener 속성: 팝업 창의 경우 자신을 출력할 window
=>self 속성 : 자신
opner 나 self 속성은 예전에 팝업 창을 이용할 때 많이 사용하던 속성
=>open(): 팝업창을 만들어준느 메소드
첫번째 매개변수로 출력할 url 을 주는 것이다.
두번째 매개변수로 통신을 할 때 사용할 이름
세번째 매개변수로 윈도우 모양을 객체로 대입
네번째 매개변수는 history 변경 여부 - 팝업창의 주소를 기억할 지여부를 설정
=> 타이머 관련 메소드
setTimeout( 함수 , 시간) : 시간이 지난 후에 함수를 1 번만 수행
setInterval( 함수 , 시간) 애니메이션 만들 수 있다 :
setTimeout 이나 setIterval 로 타이머를 만들고 결과를 변수에 대입하면 타이머를 중지할 수 있습니다.
clearTimeout( 타이머);
clearInterval( 타이머);
광고처럼 이미지를 순서대로 보여주다가 마우스를 갖다 대면 중지 한다던가 하는 것들이 타이머와 ajax 조합입니다.
<! DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title > BOM </ title >
< script >
var img = document.getElementById( "img" );
//Uncaught TypeError: Cannot set property 'src' of null
img.src ="./images/pt2.png" ; // 에러가 난다.
</ script >
</ head >
< body >
< img src = "./images/pt1.jpg" width = "100" height = "100" id = "img" >
</ body >
</ html >
// 스크립트에서는 이벤트를 이용하지 않는 경우에는 만들어지지 않은 것은 사용 못함
// 스타일시트는 코드를 전부 읽고 화면에 랜터링할 때 수행되기 때문에 시트를 먼저 만들어도 실행이 나중에 되기 떄문에
// 코드 작성 위치는 상관이 없습니다.
var img = document.getElementById( "img" );
var imgname = [ "pt1.jpg" , "pt2.jpeg" , "pt3.jpg" ];
var text = [ "C" , "Java" , "Python" , "JavaScript" ];
var disp = document.getElementById( "disp" );
// 타이머 생성
//1 초마다 function 을 실행하는 타이머
var i = 0;
var timer = setInterval( function (){
i = i+ 1;
img.src = "./images/" +imgname[i % imgname.length];
disp.innerHTML = text[i % text.length];
}, 1000);
2) screen
=> 화면과 관련된 정보를 소유한 객체
=>width 와 height 속성
3)location
=>url 관련된 객체
=>href 속성: 현재 url, 다른 url 을 대입합면 그 url 로 이동
=>reload(): 새로고침
4)navigator 객체
=>userAgent: 접속한 운영체제와 브라우저 정보를 문자열로 리턴
이 속성을 이용해서 어떤 기기에서 접속했는지 알 수 있고 어떤 브라우저인지 알아냅니다.
모바일 운영체제에서 접속하면 모바일 페이지로 이동시키는 것도 이 속성을이용
// 모바일 운영체제 이름 배열을 생성
var userAgent = navigator.userAgent;
alert(userAgent);
// 모바일 운영체제 이름 배열을 생성
//apple 제품은 iphone 과 ipad 가 구분됨
//andriod 제품은 스마트 폰과 테블릿이 구분이 안됨
// 모바일 페이지를 만들 때 andriod 를 고려하는 경우에는 pc 버전이라는 버튼을 추가합니다.
var mobile = [ "iphone" , "ipad" , "andriod" ];
//userAgenr 에 mobile 에 있는 텍스트가 있는 지 확인
var result = false ;
for ( var idx in mobile){
if (userAgent.toLowerCase().indexOf(mobile[idx]) >= 0){
result = true ;
break ;
}
}
if (result == true ){
//locatoin.href = " 모바일페이지 url";
alert(" 스마트 폰에서 접속" );
}else {
alert("pc 에서 접속" )
}
http://ip주소:9000/web/bom.html
확대 축소가 안되고 따로 만들어지는 경우가 있다
피씨 버전이 있다 . 외냐하면 안드로우드 테블릿 때문이다.
5)history
=> 이동한 url 에 대한 정보를 가진 객체
=>back(): 뒤로
=>forward(): 앞으로
=>go( 인덱스) : 인덱스 만큼 이동
form
history.back
메시지 출력할 수 가 없다.
