자바스크립트 개발 방식 (코드 구조에 따라 분류)
- 함수형
- 객체형
1. 함수형 : 버그가 났을 때 그 구역에서만 수정할 수 있다.
function sum(a,b){
return 4 * a - b;
}
자료형 함수이름(매개변수1, 매개변수2, ---){
결과값 ~~~;
}<!DOCTYPE html>
<html lang="ko">
<head>
<title>자바스크립트 실습</title>
</head>
<body>
<script>
function printMessage() {
console.log("Hello, World!");
} // 함수 생성
printMessage();
</script>
</body>
</html>코드의 반복이 감소된다.
function add(a, b) {
//console.log(a + b);
return a + b; //반환
}
console.log(add(10, 20));
add(15, 25); // 리턴만으로는 출력할 수 없다.
add(20, 30);매개변수를 사용한 자바스크립트 함수의 사용
function mul(a, b) {
return a * b;
}
var num = 2; // 변수 선언 및 정의
console.log(add(10, 20));
add(15, 25); // 리턴만으로는 출력할 수 없다.
console.log(mul(num, 2)); // 4 출력
console.log(mul(num, 3)); // 6 출력변수를 사용한 자바스크립트 함수의 사용
! 지역 변수, 전역 변수 신경써서 함수 호출하기
html과 연계하여 출력하기
input 태그에 들어가는 값은 숫자가 아닌 문자열(String)로 판단. (input 타입 안에 있는 데이터는 String)
parseInt(firstNum)처럼 형변환을 해주어 결괏값에 더한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>자바스크립트 실습</title>
</head>
<body>
<input id="num1" type="text" />
<input id="num2" type="text" />
<input id="addBtn" type="button" value="더하기" onclick="add()" />
<!-- 버튼을 클릭했을 때 add함수를 실행하도록 -->
<span id="result"></span>
<script>
function add() {
var firstNum = document.getElementById("num1").value;
// html 문서에 접근하기 위해서 document 객체를 사용하고 id를 이용해 input태그 자체를 가져오는 getElementById를 사용, '.value'를 사용해 input 태그에 입력한 값이 리턴됨
var secondNum = document.getElementById("num2").value;
var resultValue = parseInt(firstNum) + parseInt(secondNum);
var resultBox = document.getElementById("result"); // result
resultBox.innerText = resultValue; // span태그 안에 있는 출력값에 resultValue의 값을 대입해준다.
}
</script>
</body>
</html>버튼을 눌렀을 때 onclick으로 인해 함수 실행 -> add 함수에서 document.getElementById 태그에 의해 input 태그가 가져와지고, '.value'로 인해 input에 입력한 value가 리턴된다.
resultBox 에 span 의 id를 가져와 저장, innerText로 태그 내부에 Text를 주입하여 doc에 출력한다.
실습) 버튼을 4개 만들어서 버튼의 value에 맞는 결괏값 출력하기!
<!DOCTYPE html>
<html lang="ko">
<head>
<title>자바스크립트 실습</title>
</head>
<body>
<input id="num1" type="text" />
<input id="num2" type="text" /><br /><br />
<input id="addBtn" type="button" value="더하기" onclick="add()" />
<input id="minBtn" type="button" value="빼기" onclick="min2()" />
<input id="mulBtn" type="button" value="곱하기" onclick="mul()" />
<input id="divBtn" type="button" value="나누기" onclick="div()" />
<span id="result"> </span>
<script>
function add() {
var firstNum = document.getElementById("num1").value;
var secondNum = document.getElementById("num2").value;
var resultValue = parseInt(firstNum) + parseInt(secondNum);
var resultBox = document.getElementById("result");
resultBox.innerText = resultValue;
}
function min2() {
var firstNum = document.getElementById("num1").value;
var secondNum = document.getElementById("num2").value;
var resultValue = parseInt(firstNum) - parseInt(secondNum);
var resultBox = document.getElementById("result");
resultBox.innerText = resultValue;
}
function mul() {
var firstNum = document.getElementById("num1").value;
var secondNum = document.getElementById("num2").value;
var resultValue = parseInt(firstNum) * parseInt(secondNum);
var resultBox = document.getElementById("result");
resultBox.innerText = resultValue;
}
function div() {
var firstNum = document.getElementById("num1").value;
var secondNum = document.getElementById("num2").value;
var resultValue = parseInt(firstNum) / parseInt(secondNum);
var resultBox = document.getElementById("result");
resultBox.innerText = resultValue;
}
</script>
</body>
</html>x
<!DOCTYPE html>
<html lang="ko">
<head>
<title>자바스크립트 실습</title>
</head>
<body>
<input id="num1" type="text" />
<input id="num2" type="text" /><br /><br />
<input id="addBtn" type="button" value="더하기" onclick="compare()" />
<span id="result"> </span>
<script>
function compare() {
var firstNum = document.getElementById("num1").value;
var secondNum = document.getElementById("num2").value;
var resultBox = document.getElementById("result");
if (parseInt(firstNum) > parseInt(secondNum)) {
resultValue = firstNum;
}
if (parseInt(firstNum) < parseInt(secondNum)) {
resultValue = secondNum;
}
resultBox.innerText = resultValue;
}
</script>
</body>
</html> if (parseInt(firstNum) > parseInt(secondNum)) {
resultValue = firstNum;
} else if (parseInt(firstNum) < parseInt(secondNum)) {
resultValue = secondNum;
}두개의 if문은 다음과 같이 나타낼 수 있다.
자바스크립트로 DOM 생성하기
<html lang="en">
<head>
<title>게시판 양식</title>
</head>
<body>
<section id="board"></section>
<input type="button" value="글쓰기" onclick="create()" />
<script>
var num = 1;
function create() {
var contentLine = document.createElement("div"); // 부모
//자식1
var contentIndex = document.createElement("p");
contentIndex.innerText = num; // 처음엔 1이 들어감
num = num + 1;
// num += 1;
//자식2
var contentTitle = document.createElement("p"); // 제목이 들어갈 부분
contentTitle.innerText = "게시글 제목";
//자식3
var contentDate = document.createElement("span"); // span, div는 중요X
contentDate.innerText = "2021-07-24";
// 부모에 3개의 자식을 append
contentLine.appendChild(contentIndex); // div 요소의 내용에 contentIndex에 있는 값을 그대로 대입할 것이다.
contentLine.appendChild(contentTitle);
contentLine.appendChild(contentDate);
//section 태그에 부모 변수 contentLine 넣어주기
var targetBox = document.getElementById("board");
targetBox.appendChild(contentLine);
}
</script>
</body>
</html>설명은 주석을 참고.
CSS 첨가하기
(이때 id가 아닌 class를 사용하기. 복제해서 생성되기 때문)
<html lang="en">
<head>
<title>게시판 양식</title>
<link rel="stylesheet" type="text/css" href="week3_2.css" />
</head>
<body>
<section id="board"></section>
<input type="button" value="글쓰기" onclick="create()" />
<script>
var num = 1;
function create() {
var contentLine = document.createElement("div"); // 부모
//자식1
var contentIndex = document.createElement("p");
contentIndex.className = "index";
contentIndex.innerText = num; // 처음엔 1이 들어감
num = num + 1;
// num += 1;
//자식2
var contentTitle = document.createElement("p"); // 제목이 들어갈 부분
contentTitle.className = "title";
contentTitle.innerText = "게시글 제목";
//자식3
var contentDate = document.createElement("span"); // span, div는 중요X
contentDate.className = "date";
contentDate.innerText = "2021-07-24";
// 부모에 3개의 자식을 append
contentLine.appendChild(contentIndex); // div 요소의 내용에 contentIndex에 있는 값을 그대로 대입할 것이다.
contentLine.appendChild(contentTitle);
contentLine.appendChild(contentDate);
//section 태그에 부모 변수 contentLine 넣어주기
var targetBox = document.getElementById("board");
targetBox.appendChild(contentLine);
}
</script>
</body>
</html>CSS를 추가하기 위해서는 contentLine등의 div, span 태그를 createElement 를 선언한 변수에 대해서 className 함수를 사용해 클래스 명을 지정한다.
이렇게,
유저의 행동에 따라서 발생되는 결과를 '이벤트'라고 한다.
[과제]
- 유튜브 페이지 완벽하게 해오기
- 기능 추가
- 유튜브 페이지의 메뉴를 눌렀을 때(Onclick) 창이 펼쳐지는 애니메이션 구현하기 (슬라이드 형태로(CSS)) - transition이라는 CSS옵션
- 메뉴가 열렸을 때 마우스를 올렸을 때 살짝 밝아지고, 클릭했을 때 더 밝아지는 이벤트 구현하기 (CSS에서 구현('자바스크립트 마우스 이벤트' 검색)
- 숫자 야구 게임 (게임을 주최하는 사람이 1, 5, 9라고 생각했을 때 1, 2, 3 이면 One Strike, 1, 3, 5이면 One strike One ball ..)
자바 스크립트 이벤트로 구현하기
1 2 3
4 5 6
7 8 9
난수 생성, 지우기, 플레이
'Framework > Front-end' 카테고리의 다른 글
| StageUs 5주차 : 서버 호스팅 및 리눅스, 웹 서버 구축 (0) | 2021.08.07 |
|---|---|
| StageUs 4주차 : 자바스크립트 이벤트 (0) | 2021.07.31 |
| StageUs 2주차 CSS (0) | 2021.07.17 |
| 크레이지 아케이드 게임용 PC 견적 (0) | 2021.07.17 |
| 웹에 대한 이해, HTML을 이용한 DOM 구조, Semantic과 SEO (0) | 2021.07.13 |
