본문 바로가기
Web & Mobile/Javascript

Lecture 9 - Javascript(5)

by Bennyziio 2019. 4. 14.
반응형

js. 70 Number 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
// 변수를 선언
var number = 273.5210332;

// 출력합니다.
var output = '';
output += number.toFixed(1) + '\n';
output += number.toFixed(4);
alert(output);

// 변수를 선언합니다.
var fixedNumber = (273.5210332).toFixed(2);
// 출력합니다.
alert(fixedNumber);

</script>
</body>
</html>

 

js.71 Array 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
/*
데이터가 없는 빈 배열
var arr1 = [];
var arr2 = Array();
var arr3 = new Array();
*/

// 방 갯수
var arr1 = new Array(4);
// 값을 넣어서 선언
var arr2 = new Array(1, 2, 3, 4);

console.log(arr1);
console.log(arr2);
</script>
</body>
</html>

 

js.72 Array 속성과 메소드

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var arr1 = new Array(1, 2, 3, 4);
var arr2 = new Array(5, 6, 7, 8);

// 두 개의 배열을 결합
var arr3 = arr1.concat(arr2);
console.log(arr3);

// 배열의 내용 -> 구분자 중심의 문자열로 연결
// 구분자는 ,가 됨
// String의 Split()의 반대
var str1 = arr1.join();
console.log(str1);
// 구분자를 ㅣ 로 지정
str1 = arr1.join('ㅣ');
console.log(str1);

// 
console.log(arr1[0]);
console.log(arr1);

var data = arr1.pop();
// 맨 마지막 요소를 뽑아낸다
// stack
console.log(data);
console.log(arr1);

// 마지막 부분에 새로운 요소를 입력
arr1.push(5);
console.log(arr1);

// 데이터를 뒤집어서 보는거
var rarr1 = arr1.reverse();
console.log(rarr1);
// 지정한 부분을 리턴
var sarr1 = arr1.slice(1, 3);
console.log(sarr1);
</script>
</body>
</html>

 

js.73 Array 속성과 메소드 2

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var arr1 = new Array(52, 273, 103, 32);

// 정렬(sort)
console.log(arr1);
// 문자열
arr1.sort();
console.log(arr1);

// 숫자
arr1.sort(function(left, right){
return left-right;
});
console.log(arr1);
</script>
</body>
</html>

 

js.74 확인 메소드 isArray(true/false), indexOf, lastIndexOf, forEach

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
// isArray(ture/false)
// 이게 Array가 맞냐?
console.log(Array.isArray([1, 2, 3]));
console.log(Array.isArray({}));
console.log(Array.isArray(1));

// indexOf, lastIndexOf
var arr1 = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
// 지정된 요소의 첫 위치
console.log(arr1.indexOf(4));
// 지정된 요소가 위치한 맨 마지막 위치
console.log(arr1.lastIndexOf(4));
// 지정된 요소를 찾을 수 없으면 -1이 나옴(0은 0번째 위치가 있기때문)
// 문자열도 동일
console.log(arr1.lastIndexOf(8));

// forEach - 반복문 역활을 하는 함수
// callback 함수
// index : 순서, element : 요소
arr1.forEach(function(element, index){
console.log(index + ' : ' + element);
});

// forEach를 통해 배열의 값의 합계
var sum = 0;
arr1.forEach(function(e) {
sum += e;
})
console.log('합계 : ' + sum);
</script>
</body>
</html>

 

js.75 date 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
// 현재 날짜를 객체화
var date1 = new Date();
console.log(date1);

// 영어로 출력
console.log(date1.toString());
// 현지 언어 사용
console.log(date1.toLocaleString());

console.log(date1.getFullYear());
// 1900을 더해줘야한다
console.log(date1.getYear() + 1900);
// 1월이 0이라서
console.log(date1.getMonth() + 1);
console.log(date1.getDate());
// 요일 - 일요일이 0
console.log(date1.getDay());

// 특정 날짜로 Date 객체를 만들때(2018, 5, 1)
//var date2 = new Date(2018, 5-1, 1);
//var date2 = new Date(2018, 5-1, 1, 10, 10, 40);
// 일에 -1을 하면 전달 마지막 날이 나온다.
var date2 = new Date(2018, 5-1, 1-1, 10, 10, 40);
console.log(date2.toLocaleString());

</script>
</body>
</html>

 

js.76 getTime()

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var date1 = new Date();
var date2 = new Date(2018, 5-1, 27);
console.log(date2 - date1);

// 날짜의 차이는 time stamp(1970년 1월 1일 : 0)의 차이이다
var stamp1 = date1.getTime();
var stamp2 = date2.getTime();
console.log(stamp2 - stamp1);

//=> 일차
console.log((stamp2-stamp1)/(1000*60*60*24) + '일');
</script>
</body>
</html>

 

js.77 Math 객체 - ceil, floor, round

ceil - 올림
floor - 내림(버림)
round - 반올림
max - 최대값
min - 최소값
random - 난수, 로또

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
console.log(Math.ceil(5.6));
console.log(Math.ceil(5.5));
console.log(Math.ceil(5.4));

console.log(Math.floor(5.6));
console.log(Math.floor(5.5));
console.log(Math.floor(5.4));

console.log(Math.round(5.6));
console.log(Math.round(5.5));
console.log(Math.round(5.4));
</script>
</body>
</html>


js.78 Math 객체 - min, max

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
console.log(Math.max(52, 273, 57, 32));
console.log(Math.min(52, 273, 57, 32));

// 0<= 난수 < 1 실수 - 원하는 범위내 난수를 만드는 것이 어려움
console.log(Math.random());
console.log(Math.random());
console.log(Math.random());

// 0부터 9까지 정수중 하나를 추출
// 0 * 10 <= 난수 < 1 * 10 -> 정수로 형변화 시킨다
console.log(parseInt(Math.random() * 10));
console.log(parseInt(Math.random() * 10));
console.log(parseInt(Math.random() * 10));

// 1 <= lotto < 45
console.log((parseInt(Math.random() * 45)+1));
console.log((parseInt(Math.random() * 45)+1));
console.log((parseInt(Math.random() * 45)+1));

</script>
</body>
</html>

 

JSON
    JavaScript Object Notation(표기법)
    { }로 객체를 표기하는 법

JSON.stringfy() -> 자바스크립트 객체를 JSON 문자열로 변환JSON.parse() -> JSON 문자열을 자바스크립트 객체로 변환

https://developers.google.com/

Google Developers

Everything you need to build better apps.

developers.google.com

https://maps.googleapis.com/maps/api/geocode/json?address=서울시청
Mashup Programming(Open API - json, xml)
    - 공개된 정보를 가공해서 더욱 창의적인 것으로 만드는 것

JSON

XML

js.79 JSON

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var obj = {
name: '홍길동',
gender: 'Male'
};

console.log(typeof(obj));
// JSON 표기법
var str = JSON.stringify(obj);
console.log(str);
console.log(typeof(str));

var obj2 = JSON.parse(str);
console.log(typeof(obj2));

</script>
</body>
</html>



window.01 window 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var output = '';
for(var key in window) {
if(key != 'external') {
output += '* ' + key + ': ' + window[key] + '\n';
}
}
console.log(output);
</script>
</body>
</html>

 

window.02 새로운 window 객체 생성, 조작 및 기본 메소드

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
console.log(window['screenTop']);
console.log(window['screenLeft']);

// alert() / confire()
//window.alert('알림창')
//window.open()
//open('https://www.naver.com');

// top/left : 창의 위치
// width/height : 창의 크기


var child = open('', 'win', 'top=10, left=10, width=640, height=960');
/*
setTimeout(function() {
child.close();
}, 5000);
*/

setInterval(function(){
child.moveBy(20, 20);
}, 5000);

</script>
</body>
</html>

 


window.03 Screen 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
console.log(screen.width);
console.log(screen.height);

console.log(screen.availWidth);
console.log(screen.availHeight);

</script>
</body>
</html>

 

window03_1 가운데에 창이 뜨게 하는법

내가 한거

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
console.log(screen.width);
var child = open('', 'win', 'top=236.75, left=421, width=842, height=473.5');
</script>
</body>
</html>

 

강사님이 짠거

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var width = 600;
var height = 800;
var left = screen.width/2 - width/2;
var top = screen.height/2 - height/2;
var option = 'top=' + top + ',left=' + left + ',width=' + width + ',height=' + height;

window.open('https://m.naver.com', 'child', option);
</script>
</body>
</html>

 

location.01 Location 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
function goURL() {
// 자동 이동 기능
location.href='https://m.daum.net';
}
//goURL();
</script>

<a href="javascript:goURL()">다음 바로가기</a>

</body>
</html>

 

navigator.01 navigator 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
document.write(navigator.appCodeName + "<br />");
document.write(navigator.appName + "<br />");
document.write(navigator.appVersion + "<br />");
document.write(navigator.platform + "<br />");
document.write(navigator.userAgent + "<br />");
</script>
</body>
</html>

 

history.01 history 객체

<!doctype html />
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style type="text/css">
</style>
<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">
var goURL = function() {
location.href = 'https://www.daum.net';
};

var backURL = function() {
//history.back();
history.go(-1);
};
</script>

<a href='javascript:goURL()'>다음 바로가기</a><br />
<a href='javascript:backURL()'>이전 바로가기</a>
</body>
</html>

 

반응형
저작자표시 동일조건

'Web & Mobile > Javascript' 카테고리의 다른 글

Lecture 10 - Javascript(6)  (0) 2019.04.14
Lecture 8 - Javascript(4)  (2) 2019.04.13
Lecture 7 - Javascript(3)  (0) 2019.04.13
Lecture 6 - Javascript(2)  (0) 2019.04.13
Lecture 5 - Javascript(1)  (0) 2019.04.13

관련글

댓글

티스토리툴바