※ parseInt() 함수는 정수로 바꾸는 함수이다. (Number() 함수도 가능)
var num1 = parseInt(prompt("첫 번째 숫자: "));
var num2 = parseInt(prompt("두 번째 숫자: "));
addNumber(num1, num2);
function addNumber(a, b){
var sum a + b;
alert(`두 수를 더한 값 : ${sum} ! ");
}
(ES6 에서는 매개변수에 기본 값을 지정할수있다.)
function multipe(a, b = 6, c = 10){
return a * b + c;
}그리고 위 코드처럼 return문에서 식을 반환하도록 소스를 작성할 수 있다.
ex)
function addNumber(a, b){
return a + b;
}블록변수 : 변수를 선언한 블록에서만 유효하고 블록을 벗어나면 사용할 수 없는 변수.
add("abc,", "123");
function add(a, b) {
var local = a + b;
if (b != null) {
let block = b + a;
}
console.log(local);
console.log(block);
}let 예약어를 사용해 변수를 선언하면 블록 변수가 된다.
변수를 함수 이름처럼 사용해서 익명 함수를 실행할 수 있다.
즉시 실행 함수 : 함수를 정의함과 동시에 실행하는 함수이다.
인수를 추가 할 수 있다.
함수의 화살표 표기법 : 이름이 없는 함수를 변수에 지정할 때 많이 사용한다.
버튼을 눌렀을때 발생하는 간단한 이벤트
<html>
<body>
<div id="item">
<img src="images/JavaScript.png" alt="" />
<button class="over" id="open" onclick="showDetail()">
상세 설명 보기
</button>
<div id="desc" class="detail">
<h4>자바스크립트</h4>
<p>
<b>자바스크립트</b>는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.
예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는 식의 명령을 내릴 수 있다.
</p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
<script src="./js/event.js"></script>
</body>
<js>
function showDetail() { // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
function hideDetail() { // '상세 설명 닫기'를 클릭했을 때 상세 설명을 감추는 함수
document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector('#open').style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}
<실행화면>
마우스 이벤트를 추가하면 저렇게 border를 변경할 수 있다.
coverImage.onmouseover = () => {
coverImage.style.border = "5px black solid";
}
coverImage.onmouseout = () => {
coverImage.style.border = "";
}
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Javascript 기본' 카테고리의 다른 글
| 객체 (0) | 2020.07.23 |
|---|---|
| 숫자 맞추기 게임 (0) | 2020.07.23 |
| 제어문 (0) | 2020.07.12 |
| 나이 계산 프로그램 / 할인 가격 계산 프로그램 (0) | 2020.07.04 |
| 자료형 이해하기 (0) | 2020.07.04 |
댓글