StudyServer
web, server, java, spring 등.. 공부한 것을 기록하는 장소 입니다. 공부하면서 정리하였기 때문에 틀린 내용이 있을 수 있습니다. 이야기 해주시면 수정하겠습니다.
HOME /About /algorithmus /db /front /git /java /ml /search /server /spring

JavaScript Array,내장객체

2018-12-12 00:00:00 +0000

Array 객체

  • slice : Array 객체의 지정한 위치에서 발췌하여 새로운 배열변수를 만듬
  • splice : 특정요소를 삽입하거나 제거
  • 배열 선언 3가지 방법
var arr = [];
arr[0] = 1;
arr[1] = 2;
var arr2 = new Array(2);
arr2[0] = 1;
arr2[1] = 2;
var arr3 = new Array(1,2);

문자열 함수

  • arr.toString() : 배열의 요소를 출력(각 요소마다 ,콤마로 나뉘어져 있다)
document.write(arr1.toString());
  • arr.join(콤마대신 사용할 요소) : 콤마 대신 사용할 요소가 찍힌다. 예를들어 콤마를 없애고 싶다면 “ “를 넣어준다
document.write(arr.join(" "));
  • slice(startIndex, endIndex) : 시작 인덱스부터 끝 인덱스 앞 인덱스 까지 단어를 자른다
var arr = [];
for(var i = 0; i < 10; ++i){
       arr[i] = i;
}
var arr2 = arr.slice(1,3);
document.write(arr.toString()+"<br>");
document.write(arr2.toString()+"<br>");
  • concat : 문자열 붙이기
var arr = new Array(1,2,3);
var arr2 = new Array(4,5,6);
document.write(arr2.concat(arr));

setTimeout

  • setTimeout(“함수이름”, ms);
  • 첫번째 인수인 함수를 일정 시간 후에 한번 호출한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var timeid;
var flag = 0;             // 0이면 안돔 1이면 도는 중
function show(){
       var now = new Date();
       var hour = now.getHours();
       var minute = now.getMinutes();
       var seconds = now.getSeconds();
       var timeValue = hour + "시" + minute + "분" + seconds + "초";
       
       document.fmt.display.value = timeValue;
       
       timeid = setTimeout("show()",1000);
}
function startClock(){
       if(0 != flag)
             return;
       flag = 1;
       show();
       console.log("startClock timeid:"+timeid);
       
}
function stopClock(){
       if(1 != flag)
             return;
       flag = 0;
       console.log("end timeid:"+timeid);
       clearTimeout(timeid);
}
</script>
</head>
<body>
<form name="fmt">
       <input type="text" name="display">

       <input type="button" name="start" value="시작" onclick="startClock()">
       <input type="button" name="stop" value="종료" onclick="stopClock()">
</form>
</body>
</html>

JavaScript var

2018-12-11 00:00:00 +0000

자료형

  • 자바스크립트의 자료형은 var이고 정수형, 문자형 등.. 다양한 값을 넣을 수 있다
var intNum = 10;
var floatNum = 3.14;
console.log(typeof intNum);
console.log(typeof floatNum);
//문자형(string)
var singS = 'single';
var doubleS = "double";
console.log(typeof singS);
console.log(typeof doubleS);
// 논리형(boolean)
var boolVal = true;
console.log(typeof boolVar);

undefined과 null

  • undefined : 변수를 선언하고 값을 할당하지 않음(자료형이 결정되지 않은 상태)
  • null : 값이 없다는 뜻. 하지만 값이 할당되지 않은 undefined와는 다르다(null이라는 값이 할당된 것)
  • null이라는 뜻은 문자형의 ‘’, 숫자의 0과 또 다른 뜻
  • === 기호는 값과 데이터형까지 동일한지 체크하는 연산자
var temp2;
if(null===temp2){
       console.log("temp2;는 null이다");
}else{
       console.log("temp2;는 null이 아니다"+temp2);
}
temp2='';
if(null === temp2){
       console.log("temp2=''는 null이다");     
}else{
       console.log("temp2=''는 null이 아니다"+temp2);
}
temp2=null;
if(null === temp2){
       console.log("temp2=null는 null이다");   
}else{
       console.log("temp2=null는 null이 아니다"+temp2);     
}
  • 결과
temp2;는 null이 아니다undefined
temp2=''는 null이 아니다
temp2=null는 null이다
  • 변수에 함수도 넣을 수 있다
  • 변수에 함수를 넣으면 function 타입이 된다
// function
var func = function(){}
console.log(typeof func);

문자열 변환

  • 문자열을 넣었던 변수에 숫자를 넣는 것도 가능하다
// 데이터형 num->string으로 변한다
intNum = "안녕";
console.log(typeof intNum);
  • 문자+숫자 = 문자
// 형변환 문자+숫자=문자
var num = "15";
num2 = num+10;
console.log(num2);
  • eval함수 사용 시 숫자로 변환할 수 없는 값을 변환하려고 하면 에러가 난다
  • parseInt함수는 자신이 숫자로 변환할 수 있는 값만 변환한다
// 숫자=>문자 변환
var num = "15";
num = eval(num);
num2 = num+10;
console.log(num2);
//eval 변경하지 못하면 에러난다
/*var num = "15안녕";
num = eval(num);
num2 = num+10;
console.log(num2);*/
//parseInt는 자기가 변경할 수 있는 부분만 변경한다
var num = "15안녕";
num = parseInt(num);
num2 = num+10;
console.log(num2);

JavaScript 객체,생성자

2018-12-11 00:00:00 +0000

객체

  • object를 의미함
  • key와 value로 이루어져있음(배열과 유사)
// 객체 생성
var student = {
             id: 100,
             name: '홍길동',
             grade: '90'
};
// 객체가 가진 id값 확인
console.log(student.id);
  • 객체는 동적으로 속성 추가와 제거 가능
  • 변수, 함수를 선언하고 값을 넣어주면 된다
// 객체 생성
var student = {
             id: 100,
             name: '홍길동',
             grade: '90'
             
};
student.age = 16;
student.getAge = function(){
       return this.age;
}
console.log(student);
console.log(student.getAge());

객체의 복사

  • 객체1=객체2 처럼 객체2가 가진 주소를 객체 1도 가리키게 되었을 때 얕은복사를 했다고 말함(값이 아닌 주소값 복제)
  • 깊은 복사는 객체1, 객체2가 가진 주소가 별개여야 함(옳은방향)
  • for문, 펼침연산 등으로 깊은 복사를 할 수 있다

prototype

  • 생성자 함수로 생성된 객체가 공통으로 가지는 공간
  • 예를들어 Student란 객체가 3개의 속성과 1개의 함수를 가지고 있다
  • Student 객체가 1000개 만들어진다면 1개의 함수를 1000개 만들게 된다
  • 메모리낭비가 심하므로 prototype으로 1개의 함수만 만들고 모든 객체가 참고하게 할 수 있다
Student.prototype.getSum = function(){};
Student.prototype.getAverage = function(){};
Student.prototype.toString = function(){};

생성자

  • new functionname(인자)
  • new를 사용하여 생성자를 만들 수 있다
  • 생성자 함수를 사용하면 프로토타입을 사용할 수 있어서 메모리공간을 아낄 수 있다
  • new를 생성하지 않으면 그냥 함수이다. 이 때 함수 내부에서 this 사용 시 Window 객체를 의미하는 것이다
function Student(name,korean,math,english){
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
}
var std = new Student('하나나',90,80,10);

JavaScript 함수,클로저

2018-12-11 00:00:00 +0000

사용자 정의 함수

  • 프로그램 내에서 사용자가 직접 정의한 기능함수
  • 함수를 변수에 넣을 수 있다
function add(a, b){        // 선언적 함수
       var sum = a+b;
       return sum;
}
console.log("add:"+add(1,2));

익명함수

  • 익명함수는 함수의 이름이 없는 함수. 변수에 넣어서 사용
  • 익명함수를 만들기 전에 변수를 호출하면 에러(아직 함수 생성전이므로.. 익명함수는 순서중요! 선언적 함수는 순서x)
var add2 = function(a, b){    // 익명 함수
       var sum = a+b;
       return sum;
}
console.log("add2:"+add2(10,20));

함수 호출 범위

  • 전역, 지역에 같은 이름의 변수가 있을 경우, 지역변수를 우선으로 호출한다
  • 전역변수를 호출하고 싶다면 변수 앞에 this.를 붙인다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var myVar = "전역변수";
function myFunc(){
       var myVar = "지역변수";
       document.write("지역변수:"+myVar);
       document.write("전역변수:"+this.myVar);
}
myFunc();
</script>
</head>
<body>
</body>
</html>

콜백함수

  • 매개변수로 전달하는 함수는 콜백함수
//함수를 선언합니다
function callTenTimes(callback){
       // 매개변수로 전달된 함수를 호출합니다
       for(var i = 0; i < 10; ++i)
             callback();
}
// 변수를 선언합니다
var callback = function(){
       alert('함수 호출');
};
// 함수를 호출합니다
callTenTimes(callback);

클로저(closure)

  • 함수가 종료된 후에도 함수내에 있던 지역변수를 사용하고 싶을 때 활용
  • 아래 예제에서 지역변수 add가 num을 계속 사용하고 있으므로 num 변수는 메모리에서 사라지지 않는다
function funcAdd(){
       var num = 100;
       function add(addNum){
             console.log(addNum+num);
       }
       return add;
}
funcAdd()(4);

내장함수

  • setTimeout : 일정 시간 후 함수를 한번 실행
  • setInterval : 일정 시간마다 함수를 반복해서 실행
  • encodeURIComponent : 문자 대부분을 모두 인코딩

JavaScript Event

2018-12-11 00:00:00 +0000

Javascript

  • Java와 문맥이 비슷한 프로그래밍 언어
  • Javascript는 html과 함께 클라이언트로 다운로드하여 실행할 수 있음
  • 인터프리터 언어
  • HTML과 같이 플랫폼 독립성
  • HEAD, BODY 어디서든 선언 가능

문법

  • null과 undefined
  • undefined는 아예 값이 할당되지 않은 상태. null은 값이 없다는 의미
  • parseInt : 문자열을 숫자로 변환함

주석

  • 자바와 똑같이 //, /**/을 주석으로 사용한다
/* 주석1 */
// 주석2

이벤트

  • 유저가 어떤 동작을 하면 웹이 상호작용하여 이벤트가 호출된다
  • 아래 예제에선 유저가 버튼 클릭을 하면 (onclick) kosta3 함수가 호출되는 것이다
  • common.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type='text/javascript' src='common.js'></script>
</script>
</head>
<body>
<form>
<input type ="button" value = "버튼" onclick="kosta3()">
</form>
</body>
</html>
  • 알림창, 문서출력, 콘솔창 출력
function kosta3(){
       // 알람 함수
       alert('kosta3');
       // 문서에 출력
       document.write('<b>KOSTA3</b>');
       // 콘솔창에 출력
       console.log('kosta3');
}

Posts

subscribe via RSS