let x = prompt("기호를 입력하시오");
let y = Number(prompt("몇 줄 출력할지 입력하시오"));
pyramid(x,y);
function pyramid(x,y){
for (let i = 0; i < y; i++) {
for (let j = 0; j < i+1; j++) {
document.write(x);
}
document.writeln("<br>");
}
} //end of pyramid
자바스크립트 함수 특징
- 입력값의 타입을 확인하지 않는다 => 숫자와 문자열 빼기 연산할 경우 타입 검사를 따로 하지 않고 문자열을 숫자로 변환
- 매개변수와 입력값의 개수가 같은지 확인하지 않는다 => 내부적으로 arguments 객체(Array 형태)가 호출되어 인자들을 배열 형태로 저장
//1. 입력값의 타입을 확인하지 않음
//minusNum(1, "3");
function minusNum(n1,n2){
alert(n1-n2);
}
// addNum(1,2,3); //1,2,3 콘솔창에 출력
//2. 매개변수와 입려값의 개수가 같은지 확인하지 않음
function addNum(n1,n2){
//arguments 객체 내의 값 출력
for(let i = 0;i < arguments.length;i++){
console.log(arguments[i]);
}
}
//3. 입력값의 개수가 파라미터 개수보다 적다면
//파라미터 값을 undefined로 설정
print(1);
function print(n1, n2){
console.log(n1);
console.log(n2);
console.log(n1+n2);
};
화살표 함수(Arrow Function)
Es6 문법으로 익명 함수 선언 참조 방식으로 표현
코드
//1. 매개변수 없는 경우(로직이 한줄이면 대괄호 생략가능)
var print = () => console.log("print");
print();
//2. 매개변수 1개(매개변수 1개 시 소괄호 생략가능)
var printNum = num => console.log(num);
printNum(1);
//3. 매개변수 여러개, 여러줄 작성
var addNum = (a,b) =>{
return a+b;
}
console.log(addNum(2,3));
자바스크립트 객체
여러 속성을 하나의 변수에 저장할 수 있도록 해주는 타입 Key / Value pair를 저장할 수 있는 구조
객체= 속성(property) + 메서드(method) property : 객체의 상태를 나타내는 값(data) method : propery를 참조하고 조작할 수 있는 동작
자바스크립트 객체 특징
- 많은 값이 포함될 수 있는 변수이다
- Key/Value 쌍을 가진 정보를 나열할 수 있다
- Key는 문자열이어야 한다
- Value는 모든 유형이 될 수 있다.
- 한 쌍의 Key/Value 뒤에 쉼표를 이용하여 구분해주어야 한다
- 객체에서 명명된 값을 property라고 한다
- 변수는 예약어 이름을 가질 수 없지만 객체는 어떤 이름이어도 상관없다
- 객체 변수를 복사하면 참조가 복사되고 객체가 복사되지 않는다
자바스크립트 객체 종류
원시 값(기본 데이터 유형)을 제외한 모든 값은 객체이다 - 배열 - 함수 - 객체 - 날짜 - 수학 - 정규표현식 - new 키워드로 정의된 boolean, 숫자, 문자열
ECMA SCRIPT 객체 구성
내장객체 (Built-in Object)
브라우저 내장 객체 (Navtive Object)
사용자 정의 객체 (Host Object)
JavaScript 엔진이 구동되는 시점에 바로 제공 어디서든 사용가능
Ex) Global, Object, String, Number, Boolean, Date, Array, Math
JavaScript 엔진이 구동되는 시점에 바로 제공브라우저마다 구성을 달리하는 경우가 있어 내장객체와 분류, JavaScript 엔진을 구동할 때 build되는 객체들
Ex) BOM(브라우저 객체모델) DOM(문서 객체모델)
사용자가 생성한 객체들로 생성자 함수도 또는 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 객체 내장객체들이 구성된 이후에 구성되어짐
내장 객체(Built-in Object)
: 브라우저의 자바스크립트 엔진에 내장된 객체 필요한 경우 객체를 생성해서 사용할 수 있음
ex) 날짜(Date) 객체 생성 var today = new Date()
Number
숫자를 표기할 때 표현 가능한 수의 속성과 숫자 표기법 제공
String
문자형 데이터를 객체로 취급
Array
여러 개의 데이터를 하나의 저장소에 저장할 때 사용
Date
날짜나 시간 관련 정보를 제공받고 싶을 때 사용
Math
수학과 관련한 기능과 속성 제공
정규 표현
입력 요소에 데이터를 규칙에 맞게 작성했는지 판단
예시 코드 Date
//오늘 날짜
var today = new Date();
var tYear = today.getFullYear(); // 날짜 객체가 가지고 있는 년도 속성
var tMonth = today.getMonth()+1; //월 (0~11)
var tDate = today.getDate(); //일
var tDay = today.getDay(); // 요일 (0~6 : 0일, 5(금), 6(토))
if(tDay === 5){
tDay = "금";
}
console.log(tYear+"년 "+tMonth+"월 "+tDate+"일 "+tDay+"요일");
var hour = today.getHours(); //시
var min = today.getMinutes(); //분
var sec = today.getSeconds(); //초
console.log(hour+"시 "+min+"분 "+sec+"초");
정규표현식
var phone = '010-1234-1234';
var phone1 = '111-123123-1234';
//정규표현식
var rPhone = /^01([0|1])-?([0-9]{3,4})-?([0-9]{4})$/;
//^ 뒤에나오는 것으로 시작하겠다
if(rPhone.test(phone1)==true){
console.log("맞는 형식");
}else{
console.log("틀린 형식");
}
//문자 리터럴(표현식) : 실행 시 문자열로 변경
var a = 20;
var b = 5;
var c = "자바";
var str = "저는 " + (a+b)+"살이고 "+c+"를 좋아합니다";
console.log(str);
var str2 = `저는 ${a+b}살이고 ${c}를 좋아합니다`;
console.log(str2);
브라우저 내장 객체(Browser Object Model)
: 브라우저에 내장된 객체
window : 브라우저 객체의 최상위 객체 (웹브라우저 창)
screen : 사용자의 모니터 정보(속성) 제공 객체
location : 사용자 브라우저 주소창 url에 대한 정보(속성, 새로고침 기능(메서드) 제공 객체)
history : 이전에 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메소드 제공
