728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="txt">컨텐츠!!</h1>
<button onclick="getText()">인라인버튼</button>
<button id="btn_han">핸들러버튼</button>
<button id="btn_lis">리스너버튼</button>
<button id="btn_noname">익명함수버튼</button>
<script>
// 이벤트 : 특정 요소에게 기능(이벤트)를 연결시켜주는 기능
// ex) click, dblclick, mouseover, mouseout
// eventHandler vs eventListener
// 1. 이벤트 핸들러
// - 하나의 이벤트만 부여할 수 있다.
// - html태그에 직접 작성, 이벤트 프로퍼티를 통해서 작성
// - 프로퍼티 : 키값(을 가리키는 주소값)
// 2. 이벤트 리스너
// - 하나의 요소에 여러개의 이벤트를 부여할 수 있다.
// 실습 : 버튼을 클릭 시, id가 txt인 요소의 컨텐츠 값을 출력(alert)하는 함수
function getText() {
let txt = document.getElementById("txt").innerText;
alert(txt);
}
// 1) 이벤트 핸들러(html태그에 직접 작성하는 방법) -> 인라인 방식
// <button onclick="getText()">인라인버튼</button>
// 단점 : 이벤트를 하나만 처리, 함수명이 노출!
// 사용예시 : <button onclick="alert('알림')">
// 단순한 로직을 하나만 처리할때 사용, 주의점은 내장함수만 사용할 것
// 2) 이벤트 핸들러(프로퍼티를 활용한 방법)
// 2-1 = 이벤트를 부여할 요소를 수집
// 2-2 = 수집된 요소에게 프로퍼티를 통해서 이벤트 할당(이벤트 바인딩)
let btn_han = document.getElementById("btn_han");
// 프로퍼티 : 객체의 키값이라고 생각하자!
let btn = btn_han.onclick /// 비어있기 때문에 null이 출력
console.log("클릭 프로퍼티 : ", btn);
btn_han.onclick = getText; // 비어있는 onclick키값에 내가 만든 함수를 넣어준다
// 주의점 : 함수를 넣을때는 (바인딩) 함수명만 기입한다. 즉()는 생략한다{()는 함수를 실행하기때문에 생략}
// 3) 이벤트 리스너 방식
// 장점 : 다중 이벤트 처리가 가능
// 단점 : 코드가 길어진다
// 1. 이벤트를 부여할 요소를 수집
// 2. 요소에 이벤트를 할당(리스너 방식)
let btn_lis = document.getElementById("btn_lis");
btn_han.onclick = getText; // 핸들러방식
btn_lis.addEventListener("click",getText); //리스너방식
// 4) 익명함수(이름이 없는 함수)
// 요소에 함수(기능)을 직접 작성하는 방법
// 요소에게 유일한 이벤트를 부여할때 사용(특정 요소에서만 사용)
let btn_noname = document.getElementById("btn_noname")
btn_noname.addEventListener("click", function (){
alert("익명함수입니다!");
})
//btn_noname.onclick = function(){
// alert("익명함수입니다!")
//}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 함수 : 특정 기능들을 묶어서 한번에 실행할 때 사용하는 개념
// syso(), print(), console.log() -> 내장함수
// 도미노피자 만드는 함수
// 자바스크립트에서 함수를 제작할 때 function 키워드 사용
function makePizza(type) {
if (type==="불고기") {
return "솔드아웃입니다"
}
console.log("도우깔기");
console.log("토마토소스");
console.log(type,"토핑 추가");
console.log("오븐에 굽기");
return "배달완료";
}
// 함수는 항상 호출 해야지만 실행된다
// 사용자와 컴퓨터 간의 데이터 전소이 필요한 경우에는 매개변수를 활용한다
// 컴퓨터가 사용자에게 데이터를 전송할때는 return문을 활용한다
// --> 변수에 담아서 활용한다
// ★ 리턴을 만나는 순간 함수는 종료
let messege = makePizza("포테이토");
console.log("리턴한 데이터 : ",messege);
let p = makePizza("페퍼로니")
let messege2 = makePizza("불고기");
console.log("불고기 리턴 : ",messege2);
</script>
</body>
</html>
실습 코드1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 버거킹 말고 킹데리아 프로그램
// Step1
// 1. 사용자에게 먹고싶은 햄버거를 입력 받습니다(prompt 활용)
// ex) 치즈,불고기,핫크리스피
// 2. 세트메뉴인지 단품메뉴인지 입력 받습니다(prompt 활용)
// ex) 세트, 단품
let burger = prompt("어떤 햄버거를 주문하시겠습니까?");
let type = prompt("세트입니까? 단품입니까?");
// Step2
// 1. 사용자가 입력한 햄버거를 제작하는 함수를 작성하시오
// 2. 단, 햄버거를 가격은 5000원 입니다. 5000을 반환 해주세요 (return)
// 3. 작성 완료 후 잘 출력되는지 확인 해보기.
// ex) 빵깔기, 토마토올리기, 입력한패티, 소스, 빵닫기 등 자유로운 순서대로 console 작성
function makeBurger(burger){
console.log("빵깔기")
console.log("토마토올리기")
console.log(burger,"패티추가")
console.log("소스")
console.log("빵닫기")
return 5000;
}
// step3
// 감자취김, 콜라 만드는 함수 2개 작성
// 감자튀김 2000원, 콜라 1000원 리턴
function french() {
console.log("감튀완성")
return 2000;
}
function coke() {
console.log("콜라완성")
return 1500;
}
// Step4
// 1. 사용자가 "단품"을 입력 했을 경우에는 햄버거만 만드는 함수를 호출
// 2. 사용자가 "세트"를 입력 했을 경우에는 햄버거,콜라,감튀 만드는 함수 호출
// 3. 사용자가 지불 해야하는 가격을 콘솔창을 통해 출력
if (type==="단품") {
let b = makeBurger(burger)
console.log(b,"원입니다")
} else {
let b = makeBurger(burger)
let f = french()
let c = coke()
console.log(b+f+c,"원입니다")
}
</script>
</body>
</html>실습예제2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Step 1
// 1. 사용자는 총 3명의 캐릭터를 입력합니다 (prompt 활용);-for문
// 1.1 입력된 사용자는 player 배열에 차곡차곡 담기게 된다.-push()
// 1.2 입력 후 콘솔창에 캐릭터 출력 해보세요.
let player = [];
for(let i = 0; i<3; i++){
let char = prompt("캐릭터의 이름을 입력하세요");
player.push(char);
console.log(player)
}
// Step 2
// 1. 사용자는 한명의 캐릭터를 선택합니다 ex) 이광수 입력
// 2. 사용자는 본인이 잡을 캐릭터를 선택합니다 ex) 김종국 입력
// 3. 입력후 선택 캐릭터, 잡을 캐릭터를 출력해 보세요
// - prompt 2개 활용!
let a = prompt("선택할 캐릭터를 입력하세요");
let b = prompt("잡을 캐릭터를 선택하세요");
console.log("선택한 캐릭터 : ",a)
console.log("잡을 캐릭터 : ",b)
// Step 3
// 1. 내가 선택한 캐릭터의 인덱스값을 저장 후 출력 해보세요
// 2. 내가 잡을 캐릭터의 인덱스값을 저장 후 출력 해보세요
// - indexOf
let c = player.indexOf(a)
let d = player.indexOf(b)
// 1. 내가 선택한 캐릭터의 인덱스값이 잡을 캐릭터의 인덱스보다 크면
// 콘솔창에 '잡을 캐릭터이름' 아웃 출력
// 2. 내가 선택한 캐릭터의 인덱스값이 잡을 캐릭터의 인덱스보다 작으면
// 콘솔창에 '내 캐릭터이름' 아웃 출력
if(c<d){
console.log(a,"아웃")
}else if(c>d){
console.log(b,"아웃")
}
</script>
</body>
</html>■선언방식
1. 내부방식
- html코드 안에다가 script태그를 작성 후 코드를 작성하는 방법
2. 인라인 방식(코드 노출되는 단점)
- html 태그 안에 직접 코드를 작성하는 방법
3. 외부방식★
- html파일과 js파일을 분리 시키는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="txt">
<span>자바스크립트</span>
</h1>
<p class="txt2">p태그 데이터1</p>
<p class="txt2">p태그 데이터2</p>
<script>
// DOM객체는 html문서를 태그, 속성, 컨텐츠를 따로따로 분리하는 객체
// ex) <h1 id="txt">자바스크립트</h1> -> <h1>(태그), id(속성), txt(값),자바스크립트(컨텐츠)
// 이유는? 특정요소에 접근하여 스타일, 기능을 부여하기 위해서
// 실습 : id가 txt인 요소를 가지고온 다음에, 그 안의 컨텐츠를 출력
// 1. 모든 html정보를 담고있는 최상위 객체에게 조회 요청 = document
// 2. 명령문 작성(id가 txt인 요소를 가져와) = get(가져오다) + element(요소를) + byid(아이디)
// dom객체에서 특정 요소를 접근하는 방법 : document.getElementBy구분자("값")
let h1 = document.getElementById("txt");
console.log("가지고온 요소 : ",h1);
// 특정요소 안의 컨텐츠를 접근하려면 innerHTML,innerText
// 차이점 : innerHTML(태그를 인식), innerText(태그를 인식하지 못한다)
// h1태그는 DOM객체이고 객체는 Object 이므로 .innerHTML은 객체의 키값으로 해서 사용할 수 있다.
let inhtml = h1.innerHTML;
let intext = h1.innerText;
console.log("html : ",inhtml);
console.log("text : ",intext);
// h1의 컨텐츠 값을 수정하고 싶다면?
h1.innerHTML = "<p>변경한 데이터입니다!</p>"
// 컨텐츠를 가지고 오는 경우에는 innerText
// 컨텐츠를 수정하는 경우에는 innerHTML
// 이유는 html은 태그를 인식하지만 Texdt는 인식하지 못하기 때문
//console.log("변경한 데이터 : ",intext);
//h1.innerText = "<p>텍스트로 변형한 데이터</p>" p태그 인식안됨
// 실습 : class가 txt2인 요소들을 가지고 온 후, 컨텐츠를 출력
// 복수개의 요소를 요청할때는 document.getElements
// --> 복수개의 데이터를 가지고 오기 위해서 요청부터 s(복수개)를 요청
// 리턴 받는 데이터 또한 배열형태의 데이터를 받는다.
// htmlCollection객체(유사배열)이 리턴된다.
// 실제 배열이 아니기 때문에 배열함수를 사용할 수 없다.(push,pop)
// 인덱스와 길이는 사용이 가능하다.
// 데이터를 조회할 때는 배열 형태이기 때문에 항상 인덱스를 사용해야 한다★
let p = document.getElementsByClassName("txt2");
console.log("p태그 : ",p)
console.log("p태그 컨텐츠 : ",p[1].innerHTML);
console.log("길이 : ",p.length);
</script>
</body>
</html>좋아요 카운트 프로그램 제작실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<span id="number">0</span>
</p>
👍<button id="btn_like">좋아요</button>
👎<button id="btn_hate">싫어요</button>
<script>
// 좋아요 카운트 프로그램 제작
// 할일 : 좋아요, 싫어요 버튼을 각각 클릭할때마다, span태그의 값이 변경
// step1
// like와 hate이름을 가진 함수 제작
function like() {
// step2
// span태그의 컨텐츠 값이 alert창으로 출력
let spantext = document.getElementById("number").innerText;
// 클릭할때마다 span태그의 컨텐츠 값에 1씩 증가한 값을 넣기!
// 힌트 innertext로 가지고온 데이터는 문자형태! -> 숫자로 바꿔야 가능
// 바꾼데이터를 다시 넣어줘야한다
document.getElementById("number").innerHTML= Number(spantext)+1
}
function hate() {
let spantext = document.getElementById("number").innerText;
document.getElementById("number").innerHTML= Number(spantext)-1
}
let btn_like = document.getElementById("btn_like")
btn_like.addEventListener("click",like)
let btn_hate = document.getElementById("btn_hate")
btn_hate.addEventListener("click",hate)
</script>
</body>
</html>728x90
'Study > JavaScript' 카테고리의 다른 글
| JavaScript기초 4일차 <JQuery, Ajax> (0) | 2022.10.13 |
|---|---|
| JavaScript기초 3일차 <함수, 선언방식, DOM> (0) | 2022.10.13 |
| JavaScript기초 2일차 <배열, 객체, 조건문> (1) | 2022.10.11 |
| JavaScript기초 1일차 <자료형,연산자> (1) | 2022.10.08 |