-
배열,객체,BOM,DOM_210408(목)JAVASCRIPT 2021. 7. 22. 00:43
배열
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>// 배열 vs 객체: 배열은 index로 접근하지만 객체는 key로 접근// 1. 배열var kor = 90;var eng = 95;var mat = 91;var sum = 0;sum += kor;sum += eng;sum += mat;document.write('<h3>' + sum + '</h3>');// 2. 배열선언방법var arr1 = new Array(); //생성자로 빈 배열을 생성var arr2 = new Array(90, 95, 88);var arr3 = []; //생성자로 빈 배열을 생성var arr4 = [ 90, 95, 88 ];document.write('<h3>국어 = ' + arr2[0] + '</h3>');document.write('<h3>영어 = ' + arr2[1] + '</h3>');document.write('<h3>수학 = ' + arr2[2] + '</h3>');document.write('<h3>국어 = ' + arr4[0] + '</h3>');document.write('<h3>영어 = ' + arr4[1] + '</h3>');document.write('<h3>수학 = ' + arr4[2] + '</h3>');sum = 0;for (var i = 0; i < arr2.length; i++) {sum += arr2[i];}document.write('<h3>총점 = ' + sum + '</h3>');// 3. 배열의 다양한 선언var arr5 = [ 273, '문자열', true, function() {}, {}, [ 100, 200, 300 ] ]document.write('<ul>');for (var i = 0; i < arr5.length; i++) {document.write('<li>' + typeof (arr5[i]) + '=' + arr5[i]);}document.write('</ul>');</script><script>var arr6 = [ 'a', 'b', 'c' ]//배열의 함수// 1. push(): 배열끝에 요소를 추가arr6.push('d');arr6.push(function() {alert('배열.push()함수호출');})arr6.push(function(x, y) {alert(x + '+' + y + '=' + (x + y));//Number없이 ()로 사칙연산을 먼저 시키면 알아서 Num으로.. 왜.?})document.write('<ul>');for (var i = 0; i < arr6.length; i++) {document.write('<li>' + typeof (arr6[i]) + '=' + arr6[i]);}document.write('</ul>');//arr6[4](); //위에 만든 익명함수 호출.//arr6[5](10, 20);// 2. pop(): 배열의 마지막 요소를 꺼내온 후 삭제var last = arr6.pop();document.write('<h3>Array.pop()</h3>');document.write('<hr>' + last + '<br>'); // 마지막 요소를 가져와 그 함수의 모형을 보여줌.(function~)document.write('<ul>');for (var i = 0; i < arr6.length; i++) {document.write('<li>' + typeof (arr6[i]) + '=' + arr6[i]);}document.write('</ul>');var last = arr6.pop();document.write('<hr>' + last + '<br>');document.write('<ul>');for (var i = 0; i < arr6.length; i++) {document.write('<li>' + typeof (arr6[i]) + '=' + arr6[i]);}document.write('</ul>');// 3. shift(): 배열의 첫번째요소를 꺼내온 후 제거var first = arr6.shift();document.write('<h3>3. Array.shift()</h3>');document.write('<hr>' + first + '<br>'); // 첫번째 요소를 가져와 그 함수의 모형을 보여줌.(function~)document.write('<ul>');for (var i = 0; i < arr6.length; i++) {document.write('<li>' + typeof (arr6[i]) + '=' + arr6[i]);}document.write('</ul>');// 4. concat(): 두 개의 배열을 하나로 합치는 함수var arr1 = [ 'a', 'b', 'c' ];var arr2 = [ '1', '2', '3' ];var arr3 = arr1.concat(arr2);document.write('<h3>4. Array.concat()</h3>');document.write('<hr>' + arr1 + '<br>');document.write(arr2 + '<br>');document.write('<ul>');for (var i = 0; i < arr3.length; i++) {document.write('<li>' + typeof (arr3[i]) + '=' + arr3[i]);}document.write('</ul>');// 5. join(): 배열의 요소사이사이에 원하는 데이터를 삽입document.write('<h3>5. Array.join()</h3>');var arr3 = arr3.join("*"); //a * b * c * .....(이렇게 삽입됨.)document.write('<ul>');for (var i = 0; i < arr3.length; i++) {document.write('<li>' + typeof (arr3[i]) + '=' + arr3[i]);}document.write('</ul>');// 6. reverse(): 배열을 역순으로document.write('<h3>6. Array.reverse()</h3>');arr3 = [ 'a', 'b', 'c' ];arr3 = arr3.reverse(); //c, b, adocument.write('<ul>');for (var i = 0; i < arr3.length; i++) {document.write('<li>' + typeof (arr3[i]) + '=' + arr3[i]);}document.write('</ul>');// 7. sort(): 배열을 순서대로 정리하는 것document.write('<h3>7. Array.sort()</h3>');arr3 = [ 3, 2, 4, 1, 5, 8, 7, 9 ];arr3.sort(); //1,2,3,4,5,6,7,8,9document.write('<ul>');for (var i = 0; i < arr3.length; i++) {document.write('<li>' + typeof (arr3[i]) + '=' + arr3[i]);}document.write('</ul>');// 8. slice(): 배열의 일부분을 반환, 기존 배열이 없어지지 않음document.write('<h3>8. Array.slice()</h3>');arr3 = [ 1, 2, 3, 4 ];var example = arr3.slice(0, 4); //0의 요소부터 '4 + (-1) = 3의 요소'까지 넣어줌(두 배열 = [1,2,3,4])document.write('<hr>' + example + '<br>');document.write('<ul>');for (var i = 0; i < arr3.length; i++) {document.write('<li>' + typeof (arr3[i]) + '=' + arr3[i]);}document.write('</ul>');example = arr3.slice(0, -2); //0의 요소부터 뒤에서 2의 요소까지 넣어줌(example = [1,2])document.write('<hr>' + example + '<br>');document.write('<ul>');for (var i = 0; i < arr3.length; i++) {document.write('<li>' + typeof (arr3[i]) + '=' + arr3[i]);}document.write('</ul>');// 9. splice(): 배열을 값을 추가하거나 제거해서 반환document.write('<h3>9. Array.splice()</h3>');var arr1 = [ 'a', 'b', 'c', 'd' ];var example = arr1.splice(1, 2); //1에서부터 2'개' 제거document.write('<hr>' + example + '<br>');document.write('<ul>');for (var i = 0; i < arr1.length; i++) {document.write('<li>' + typeof (arr1[i]) + '=' + arr1[i]);}document.write('</ul>');</script><script>//enhanced for 문document.write('<h3>Enhanced for문</h3>');// 일반 for 문 : for(var i = 0; i < 10, i++){};var fruits = [ '포도', '바나나', '오렌지', '사과' ];var output = ''for (var i = 0; i < fruits.length; i++) {output += fruits[i] + ',';}document.write(output + '<br>');// enhanced for 문: for(i in 길이가 될 변수);output = ''for (i in fruits) { //위의 일반 반복문과 동일(i 안에 fruits 배열길이만큼 반복)output += fruits[i] + ',';}document.write(output + '<br>');</script></head><body></body></html>cs
객체(object)
12var a = {}; //만드는 방법var b = new Object(); //만드는 방법2cs 객체의 특성(이름,나이,성별,말한다,움직인다 등): key
객체 특성의 값(이름의 값,나이의 값, 성별의 값, 말하는동작함수=메서드,움직이는동작함수): value
객체는 key와 value를 한 쌍으로 갖는다.
객체 key호출 시 : 객체이름['key이름']
또는: 객체이름.key이름
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>// 객체: {}로 정의하고 key와 값을 한쌍으로 갖는 타입.// 객체의 접근은 key로 접근한다.var person = {name : '홍길동',gender : 'Male',address : '서울 구로구 구로동',eat : function(food) {document.write('<li>' + food + '을(를) 먹는다.' + '</li>')}};document.write(typeof (person) + person);document.write('<h3>1. 객체 생성 및 접근하기</h3>');document.write('<ul>');document.write('<li>' + person['name'] + '</li>'); //대괄호로 접근해도 되고document.write('<li>' + person.gender + '</li>'); //'.'으로 접근해도 됨.document.write('<li>' + person['address'] + '</li>');person.eat('고기');document.write('</ul>');</script><script>document.write('<h3>2. 객체일괄로 접근하기</h3>');document.write('<br>');for (key in person) { //enhanced for문(11번 array에서 참고), key가 person의 key값을 받음document.write(key + '=' + person[key] + '<br>'); //key = key, person[key] = value. person.key는 안된다.}</script><script>document.write('<h3>3. 객체의 속성 추가,삭제하기</h3>');/*자바 스크립트에서의 객체는1. property(속성): property는 객체의 속성을 나타내는 접근 가능한 이름(key)과활용가능한 값을 가지는 특별한 형태이다.2.객체에 프로퍼티의 추가 삭제1)삭제는 delete명령을 사용하여 프로퍼티를 삭제한다.2)추가는 객체명.추가할 속성값;ex) person.age = 100;3.메서드: 객체가 가지고 있는 기능(동작) 이며 객체내의 함수를 메서드라 한다.메서드 vs 함수메서드는 객체가 가지고 있는 기능이기 때문에 메서드를 실행하기 위해서는 객체를통해서 해당 메서드를 호출해서 수행해야 하며 그 동작을 수행하는 주체는 객체이다.*/delete person.address;person.age = 10000;document.write('<br>');for (key in person) {document.write(key + '=' + person[key] + '<br>');}</script></head><body></body></html>cs
BOM(브라우저 객체 모델)
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>//BOM(Browser Object Model)//BOM에서 최상위 객체는 Window이고//location, navigator, history, screen, document 객체document.write(typeof (window));document.write('<ul>')for ( var key in window) { //window의 하위 객체, 속성, 메서드를 탐색document.write('<li>' + key + '=' + window[key] + '</li>')}document.write('</ul>')</script><script>//window.open();//open() 메서드는 새로운 window객체를 생성한다.//open() 메서드는 4개의 매개 변수가 있다.// 1. url// 2. name// 3. feature// 1)윈도우 크기:width, height// 2)location 주소창 유무 1 = true, 0 = false// 3)menubar 메뉴바 표시여부// 4)resizable 윈도우창의 크기 조절가능 여부// 5)toolbar: tool바 표시여부// 6)status: 상태바 표시여부// 4. replace//window.open('http://www.naver.com', 'child', 'width=300', 'height = 300',// 'location = 0'); //child옵션: 탭으로 나온다.</script><script>//window 객체의 기본 메서드/*1. open()2. close()3. moveBy(x,y) : window를 x,y 좌표로 이동(상대적 이동, 있는 곳에서 이동)4. moveTo(x,y) : 현재 모니터의 절대좌표로 이동(절대적 이동, 왼쪽 위 모서리부터 이동)5. resizeBy(x,y) :크기 조정(상대적 조정)6. resizeTo(x,y) :크기 조정(절대적 조정)7. scrollBy(x.y) :스크롤의 위치 조정8. scrollTo(x.y) :스크롤의 위치 조정9. focus() : 윈도우로 초점을 이동10. blur : 윈도우의 초점을 제거*/var child = window.open(",", 'width = 300', 'height = 300');child.moveTo(0, 0);// setInterVal()함수 : 시간간격을 조절하는 함수(밀리세컨드)setInterval(function() {child.moveBy(10, 10);}, 1000); //1000=1초, 100=0.1</script></head><body></body></html>cs - location, navigator, history, screen, document 객체
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>//브라우저 관련 객체들 속성 알아보기//1. screen 객체: 모니터화면의 속성document.write('<h3>1. screen</h3>')document.write('<ul>')for ( var key in screen) {document.write('<li>' + key + '=' + window[key] + '</li>')}document.write('</ul>')//2. location 객체document.write('<h3>2. location</h3>')document.write('<ul>')for ( var key in location) {document.write('<li>' + key + '=' + window[key] + '</li>')}document.write('</ul>')//3. navigator 객체document.write('<h3>3. navigator</h3>')document.write('<ul>')for ( var key in navigator) {document.write('<li>' + key + '=' + window[key] + '</li>')}document.write('</ul>')//4. document 객체document.write('<h3>3. document</h3>')document.write('<ul>')for ( var key in document) {document.write('<li>' + key + '=' + window[key] + '</li>')}document.write('</ul>')</script><script>//윈도우 이벤트window.onload = function() {alert('윈도우 onload 이벤트가 발생했습니다.')}</script></head><body></body></html>cs
DOM(문서 객체 모델)
1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>//DOM(Document Object Model)//document 객체와 관련된 객체의 집합을 의미./홍민기??//DOM을 사용하면 html페이지에 tag를 추가, 수정, 삭제할 수가 있다.//1.메서드//getElementByid(id) : id속성 사용해서 문서객체를 선택 (단수, 아이디는 하나)//getElementsByClass(class) : class속성 사용해서 문서객체를 선택 elements(복수, 클래스는 여러개)//getElementByName(name) : name속성 사용해서 문서객체를 선택//getElementsByTagName('tag') : tag를 사용해서 같은 종류 태그 모두 선택 elements(복수, 태그 여러개)//querySelector(선택자) : 선택자를 사용해서 문서 객체를 선택, 클래스의 경우 맨 위 하나만(#id .class)//querySelectorAll(선택자) : 선택자를 사용해서 문서 객체를 선택, 같은 클래스 전부(#id .class)//2.속성//innerHTML: 내부글자를 조작//style: 스타일을 조작//setAttribute([속성이름],[속성값]) : 속성을 지정//getAttribute([속성이름]) : 속성을 호출window.onload = function() {var header = document.createElement('h1');document.body.appendChild(header); //header 을 보는 기능var textNode = document.createTextNode('Hello DOM!!');header.appendChild(textNode);}</script></head><body></body></html>cs 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><script>//getElementById()window.onload = function() {var header1 = document.getElementById('header-1');var header2 = document.getElementById('header-2');//문서의 속성을 변경header1.innerHTML = '헤더-1'header2.innerHTML = '헤더-2'}</script><script>window.onload = function() {var headers = document.getElementsByTagName('h1');//alert(typeof(headers));/* headers[0].innerHTML = '헤더-1';headers[1].innerHTML = '헤더-2'; */for ( var i in headers) {headers[i].innerHTML = '헤더-' + i;}}</script><script>document.write('<h3>querySelector</h3>')window.onload = function() {var header1 = document.querySelector('#header-1');var header2 = document.querySelector('#header-2');header1.innerHTML = '헤더-1';header2.innerHTML = '헤더-2';}</script></head><body><!-- h1#header -1{Header}*2 --><h1 id="header-1">Header</h1><h1 id="header-2">Header</h1></body></html>cs 123456789101112131415161718192021222324252627282930313233343536373839404142434445<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script>document.write('<h1>document style</h1>');window.onload = function() {var header = document.getElementById('header');//style 변경header.style.border = '2px solid black';header.style.color = 'orange';header.style.fontFamily = 'helvetica';header.style.backgroundColor = 'red';}</script><script>window.onload = function() {var removeHeader = document.getElementById('remove');document.body.removeChild(removeHeader);}</script><script>window.onclick = function() {var clock = document.getElementById('clock');setInterval(function() {clock.innerHTML = new Date().toString(); //현재 시간을 가져오는 메서드}, 1000)}</script></head><body><h3 id="header">Header</h3><h3 id="remove">Header</h3><h1 id="clock"></h1></body></html>cs 'JAVASCRIPT' 카테고리의 다른 글
jQuery:선택자,ready(),val(),setTimeout(),each()_210409(금) (0) 2021.07.22 이벤트,예외처리_210409(금) (0) 2021.07.22 해지구달&랜덤영어날라다니기 실습_210409(금) (0) 2021.07.22 형변환,함수,객체,BOM_210407(수) (0) 2021.07.22 변수,연산자,window이벤트_210406(화) (0) 2021.07.21