본문 바로가기

JavaScript

 (98)
16장 예제 - 브라우저와 관련된 객체 (1) 1. 브라우저와 관련된 객체 알아보기 - 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어냄 - 자바스크립트의 내장객체 1) window : 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창안의 요소 중에서 최상위에 있음 2) document : 웹 문서마다 하나씩 있으며, 태그를 만나면 만들어짐 . HTML 문서의 정보가 담겨있음 3) navigator : 현재 사용하는 브라우저의 정보가 들어있음 4) history : 현재 창에서 사용자의 방문기록을 저장 5) location : 현재 페이지의 URL 정보가 담겨 있음 6) screen : 현재 사용하는 화면정보를 다룸 2. window 객체의 프로퍼티 - 자바스크립트..
16장 실습 2 DOCTYPE html> 이벤트 당첨자 뽑기 프로그램 h1 { border:1px solid black; padding:10px; background:#eee; } 당첨자 발표 var seed = prompt("전체 응모자 수:",""); //응모자 수 입력받기 var picked = Math.floor(Math.random()*seed+1); //무작위 수 뽑기 document.write("전체 응모자 수:"+seed+"명"); document.write(" "); document.write("당첨자:"+picked+"번"); math.random()메서드 : 0과 1사이의 무작위 수를 반환 math.floor() 메서드 : 매개변수의 소수점 이하 부분을 버림
16장 실습 DOCTYPE html> 날짜 계산하는 프로그램 만들기 #container { margin:50px auto; width:300px; height:300px; border-radius:50%; border:2px double #222; background-color:#d8f0fc; text-align:center; } h1 { margin-top :80px; } .accent { font-size:1.8em; font-weight:bold; color:red; } 책 읽기 일 연속으로 책 읽기를 달성했군요. 축하합니다.! var now = new Date("2023-04-11"); //오늘 날짜를 객체로 지정 var firstDay = new Date("2023-03-20"); // 시작날짜를 객체로 지..
16장 예제 - Array 객체 (2) Array 객체의 메서드 1. concat() 메서드 - 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 줌 - 어느 배열을 먼저 쓰는가에 따라 기준이 달라지고, 결과 배열의 순서도 달라짐 - 배열 2개를 합쳐서 새로운 배열 만들기 DOCTYPE html> 배열 2개를 합쳐서 새로운 배열 만들기 var nums = [1,2,3]; var chars = ["a","b","c","d"]; var numsChars = nums.concat(chars); var charsNums = chars.concat(nums); document.write("nums에 chars 합치면:"+numsChars," chars에 nums 합치면:"+charsNums); 2. join() 메서드 -배열 요소를 연결해서 하나의 문자열로 만들어 줌 - 각..
16장 예제 - Array 객체 (1) 1. Array 객체로 배열 만들기 - 초깃값이 없는 경우 var numbers = new Array(); //배열의 크기를 지정하지 않음 var numbers = new Array(4); //배열의 크기를 지정함 - 초깃값이 있는 경우 var numbers = ["one","two","three","four"]; //배열 선언 var numbers = Array("one","two","three","four"); //Array 객체를 사용한 배열선언 2. Array 객체의 length 프로퍼티 사용하기 - length 프로퍼티 : 배열 요소의 개수 - 배열을 만들고 요소 표시하기 DOCTYPE html> 배열을 만들고 요소 표시하기 body { text-align:center; } 배열의 각요소 var..
16장 예제 - Date 객체 인스턴스 만들기/ 로컬 형식으로 현재 시각 표시하기 1. 객체의 인스턴스 만들기 - 객체는 참조형태로 사용해야함 - 즉, 객체 자체가 아니라 인스턴스(instance)형태로 만들어서 사용 - new 객체명 - Date 객체 인스턴스 만들기 DOCTYPE html> Date 객체의 인스턴스 만들기 body { font-size:2em; text-align:center; } var now = new Date(); //Date 인스턴스 만들고 변수에 저장하기 document.write("현재시각은" + now); 2. 프로퍼티와 메서드 이해하기 -프로퍼티(property) : 객체의 특징이나 속성 - 메서드(method) : 객체에서 할 수 있는 동작 ex) 프로퍼티 메서드 제조사 시동걸기 모델명 움직이기 색상 멈추기 배기량 주차하기 - 로컬 형식으로 현재 시..
15장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 function compareNumber(num1, num2) { var num1=parseInt(prompt("비교할 첫번째 숫자")); var num2=parseInt(prompt("비교할 두번째 숫자")); if(num1>num2) { alert(num1 + "이 더 큽니다."); } else if(num2>num1) { alert(num2 + "이 더 큽니다."); } else { alert("두 수는 같습니다.") } } compareNumber();
15장 마무리 문제 1 DOCTYPE html> 마무리 문제 1 function sumMulti(x,y) { var x = parseInt(prompt("첫번째 숫자를 입력하시오:")); var y = parseInt(prompt("두번째 숫자를 입력하시오:")); let sum=0; if(x===y) { sum=x*y; //두 수의 값이 같으면 곱하기 } else { sum=x+y; //두 수의 값이 다르면 더하기 } console.log(sum); } sumMulti(); sumMulti();

티스토리툴바