JS기초 8 - 함수 연습, 객체, 마우스 이벤트(탭메뉴),

함수 연습

 

1. 숫자 세개를 받아서 곱하는 함수

//숫자 세개를 받아서 곱셈하기

let num1= prompt('숫자를 입력하세요','2')
let num2= prompt('숫자를 입력하세요','3')
let num3= prompt('숫자를 입력하세요','4')
function mul(a,b,c){
    let X= a*b*c;
    document.write(`3개의 수를 곱한 값은 : ${X}`);
};
mul(num1, num2, num3);

 

2. 1부터 100까지 수 더하는 함수

/*1~100까지의 수 더하기*/

let num = 0;

function plus(){
    for(let i=1; i<=100; i++){
        num += i;
    }
    document.write('<br>');
    document.write(`1부터 100까지 더한 값은 ${num}입니다.`);
}
plus();

 

3. todo list

/* todo list를 ul >li 리스트로 생성하기 */

//for문으로 반복
function todoList(){
    let list='팀프로젝트,JS복습,저녁먹기,빈둥대기,운동하기'.split(',');
    //split()을 쓸때는 배열안에다 하면 안되고 그냥 문자열로 써줘야된다!! 얘가 배열로 만들어주는것
    document.write('<ul>');
    for(let i=0; i < list.length; i++){
        document.write(`<li>${i+1}번째 할 일 : ${list[i]}</li>`);
    }
    document.write('</ul>');
}
todoList();



//for in으로 반복
function todo(){
	let list='팀프로젝트,JS복습,저녁먹기,빈둥대기,운동하기'.split(',');
	for(i in list){
    	document.write(`<li>${Number(i)+1}번째 할 일 : ${list[i]}</li>`);
	}
}
todo();

 

객체

/***객체***/
let book = {
    title : '책 제목',
    authur : '저자',
    page : '300',
    price : 20000,
    info : function(){
        document.write(`책 제목은 ${this.title}이고 저자는 ${this.authur}로 어떤 내용입니다.`)
    }
}

book.info(); //or book["info"]()

new img ={
    src :'',
    alt : '',
    width : '',
    info : function(){
        document.write(`src는 ${this.src}이고 alt는 ${this.alt}입니다.`)
    }
}

• 객체도 많은 값을 가지는 변수 중 하나.
• 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합
• 프로퍼티의 값으로 함수가 올 수 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.
• 객체를 참조하는 방법 : 객체이름.프로퍼티이름 or 객체이름['프로퍼티이름']

 

document.images 객체

<img>태그에 사용되는 옵션들을 확인할 수 있다.

<div> 
    <img
        id="img1"
        src="img/story-pretzel_hover.png"
        onmouseover="changeImg()"
        onmouseout="rechangeImg()"
        alt="마싯는프레첼이미지입니다."
        width="200"
    />
    <img src="img/story-pretzel.png" alt="안익은프레첼이미지입니다." width="200" />
</div> 

<ul>
    <li onclick="tab1()">list1</li>
    <li onclick="tab2()">list2</li>
</ul>
<div class="box" id="li1">list1의 내용</div>
<div class="box" id="li2">list2의 내용</div>

/*이미지가 몇개 들어있는지 확인하기*/
document.write(`<br>이미지의 갯수는 ${document.images.length}<br>`);
for(i=0; i < document.images.length;i++){
    document.write(`<h3>${i+1}번째  이미지 정보</h3>`)
    document.write('src : '+document.images[i].src + '<br>');
    document.write('alt : ' +document.images[i].alt + '<br>');
    document.write('width : ' +document.images[i].width + '<br>');
}

//js로 이미지 주소 바꾸기
function changeImg(){
    // document.getElementsByTagName('img')[0].src="img/story-pretzel_hover.png";
    document.getElementById('img1').src="img/story-pretzel.png";
    //onmouseover 이벤트를 통해 함수가 실행되면 이미지 주소 변경
}
function rechangeImg(){
    // document.getElementsByTagName('img')[0].src="img/story-pretzel_hover.png";
    document.getElementById('img1').src="img/story-pretzel_hover.png";
    //onmouseout 이벤트를 통해 함수가 실행되면 이미지 주소 변경
}


//js로 탭메뉴 기초 이해하기
document.getElementById('li2').style.display = 'none';
//화면이 로드되면 두번째 리스트 박스는 안보이는 상태

function tab1(){
    document.getElementById('li1').style.display = 'block';
    document.getElementById('li2').style.display = 'none';
    //onclick 이벤트를 통해 첫번째 리스트 박스만 보인다.
}

function tab2(){
    document.getElementById('li1').style.display = 'none';
    document.getElementById('li2').style.display = 'block';
    //onclick 이벤트를 통해 두번째 리스트 박스만 보인다.
}