<script>
// 함수 선언
function hello() {
document.write("안녕하세요. 환영합니다.", "<br>");
function a () {
var s = ""; // 전역 지역은 상대적.
// s는 함수 a는 지역범위, 함수 hello는 전역범위.
}
}
// 함수 호출
hello();
function printStar() {
var star = "";
for(var i = 1 ; i <= 5 ; i++) {
for(var j = 0 ; j < i ; j++) {
star += "*";
}
star += "<br>";
}
document.write(star);
}
printStar();
printStar();
printStar();
function sum(num1, num2) {
var result = num1 + num2;
alert("합: " + result);
}
// sum(true, 0, 10);
function sumAll() {
var ret = 0; // return약자
for(var i = 0 ; i < arguments.length ; i++) {
ret += arguments[i];
}
return ret;
}
var s = sumAll(1, 2, 3, 4, 5, 10, 20, 30); // 가변인자
alert(s);
// 함수와 메서드
// 함수: 상위개념
// 메서드: 함수중에서 객체에 포함된 함수타입의 이름
var obj = {a : function() {alert()}};
// obj.a();
// 함수(리턴이 있는 것) vs 프로시저(리턴이 없는 것)
</script>
- 드롭다운 메뉴 만들기
<body>
<div class="header">
<ul class="gnb">
<li><a href="#">HOME</a></li>
<li><a href="#">INTRO</a></li>
<li><a href="#">ITEM</a></li>
<li><a href="#">REVIEW</a></li>
</ul>
<div class="slide-menu">
<ul>
<li><a href="#">menu1-1</a></li>
<li><a href="#">menu1-2</a></li>
<li><a href="#">menu1-3</a></li>
</ul>
<ul>
<li><a href="#">menu2-1</a></li>
<li><a href="#">menu2-2</a></li>
<li><a href="#">menu2-3</a></li>
</ul>
<ul>
<li><a href="#">menu3-1</a></li>
<li><a href="#">menu3-2</a></li>
<li><a href="#">menu3-3</a></li>
</ul>
<ul>
<li><a href="#">menu4-1</a></li>
<li><a href="#">menu4-2</a></li>
<li><a href="#">menu4-3</a></li>
</ul>
</div>
</div>
<main>
<h1>content</h1>
</main>
</body> <style>
body {margin: 0;}
ul.gnb {list-style: none; background-color: #333; margin: 0;}
.gnb li {display: inline-block; margin: 20px 50px;}
.gnb a {color: white; text-decoration: none; font-size: 1.5em;}
.gnb a:hover, .gnb a:focus {color: #f99;}
.gnb a span {display: inline-block;}
/* .gnb a span:hover {transform: translateY(10px);} 테스트한 거*/
.slide-menu {background: #f3f3f3; position: absolute; top: 83px; left: 0; width: 100%; padding: 20px; display: none;}
.slide-menu ul {display: inline-block; list-style: none; margin: 0 29px;}
.slide-menu ul li {margin: 20px 0;}
.slide-menu ul a {text-decoration: none; color: #666;}
</style> <script>
$(function() { // ready
$(".header").on("mouseenter focusin", function() {
$(".slide-menu").stop().slideDown();
}).on("mouseleave", function() {
$(".slide-menu").stop().slideUp();
})
});
</script>
'자바스크립트' 카테고리의 다른 글
| Part 03. js 코어 라이브러리(타이머 함수, Math, String) 21. 02. 24. (0) | 2021.02.25 |
|---|---|
| Part 02. 03장- 함수 중급 21. 02. 24. (0) | 2021.02.24 |
| Part 01. 반복문 for 이어서 & 반복문 while 21. 02. 23. (0) | 2021.02.23 |
| Part 01. 04~06장- 조건문 if, switch, 반복문 for 21. 02. 22. (0) | 2021.02.22 |
| JS Scope & JS Hoisting (w3schools) (0) | 2021.02.20 |
