[SIST] Web_javascript_days05/days06
1. javascript의 Math 객체
- Math.PI : pi 값을 반환
- Math.abs() : 절대값을 반환
- Math.sqrt() : 루트값을 반환
- Math.pow() : ** 연산자와 같음. 거듭제곱
- Math.round() : 반올림
- Math.ceil() : 올림
- Math.floor() : 내림
- Math.trunc() : 내림, 소수점의 값 상관없이 정수 부분만 반환한다.
* floor와 trunc의 차이는 음수일 때 다르다.
- Math.sign() : 양수이면 1, 음수이면 -1을 반환
- Math.max() : 가장 큰 값을 찾아줌
- Math.min() : 가장 작은 값을 찾아줌
- Math.random() : 0이상 1미만 사이의 랜덤한 값을 돌려줌
예시)
예제1) 배열 m을 선언하고 1~100 사이의 랜덤한 값을 채워 넣고 <p id="demo"></p> 에 ul/li 태그로 출력하는 js 코딩을 하세요.
[코드]
[결과]
2. javascript의 최상위 부모는 window 객체
- window 인터페이스는 DOM 문서를 담은 창을 나타낸다.
- 객체 속성이 창에 불러온 DOM 문서를 가리킨다.
- JavaScript 코드에 노출된 전역 변수 window는 현재 스크립트가 작동 중인 창을 나타냄
* 브라우저 객체 모델(BOM)이란?
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.
이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
BOM은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델이 아니지만 BOM 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 준다.
자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.
* Window 객체
window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다.
자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됩니다.
window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 된다.
문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됩니다.
자바스크립트의 모든 전역 객체, 전역 함수, 전역 변수를 사용할 때는 window 접두사를 생략할 수 있습니다.
* DOM 이란?
- 문서 객체 모델(The Document Object Model)
- HTML, XML 문서의 프로그래밍 인터페이스
- 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있음
- DOM은 W3C의 표준 객체 모델이며, node와 object 들로 문서를 표현
- node와 object 들은 웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용될 수 있게 연결시켜주는 역할을 함
- 아래 그림처럼 계층 구조로 표현됨
[노드 간의 관계]
- 노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재
- 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드를 가진다.
- 모든 요소 노드는 자식 노드를 가질 수 있다.
- 형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 말한다.
- 조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 말한다.
- 자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 말한다.
3. javascript의 Boolean() 메서드
- true, false를 반환하는 함수
- 가치가 있는 모든 것은 true를 반환
ex) 100, 3.14, "HELLO", 7+4+6, 10>9
- javascript에서의 false인 경우
1) -1
2) null
3) ""
4) undefinde
5) NaN
6) 0
4. javascript의 Map, Set, 객체
1) Map
- Map은 항상 key와 value가 한 쌍을 이루며 이것을 entry라고 한다.
- new 연산자로 생성
- entry를 추가할 때는 set('key', 'value') 사용, value 값을 가져올 때는 get('key') 사용
- delete() : 삭제
- size : entry 갯수 반환
- forEach() : value, key, map을 반환해준다.
- entries() :
Map 코드 예시1)
[결과]
Map 코드 예시2)
[결과]
2) Set
- Set 객체는 순서는 유지되지 않지만 중복을 허용하지 않는다.
- add() : Set 객체에 새로운 값을 추가
- size : Set 객체 안에 있는 요소의 갯수를 반환
- has() : Set 객체가 요소를 가지고 있는지 확인 후 true, false 반환
- values() : 새로운 반복자 객체를 반환
- delete() : 요소 삭제
- forEach() : index와 value를 가져올 수 있다.
Set 코드 예시1)
Set 코드 예시2)
[결과]
객체 코드 예시)
[결과]
* forof문으로 문자열의 문자를 하나씩 가져올 수 있다.
[결과]
5. select의 option 선택하면 배경색 바꾸기
1) javascript 코딩
- select.options[select.selectedIndex] => options 컬렉션으로 선택된 옵션의 인덱스 값을 가지고 온다.
[결과]
2) jquery 코딩
- select와 option 태그를 동적으로 생성
[결과]
6. 홈페이지 이미지 슬라이드 구현하기
[style 태그의 css]
<style>
*{ box-sizing: border-box;}
body{
margin: 0;
font-family: Verdana, sans-serif;
}
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
}
.text{
color:#2f2f2f;
font-size: 15px;
text-align: center;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width:100%;
}
.numbertext{
color:#2f2f2f;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top:0;
}
.mySlides{
display: none;
}
img{
vertical-align: middle;
}
</style>
<style>
.prev, .next{
position: absolute;
cursor: pointer;
top:50%;
color:white;
width:auto;
padding: 16px;
margin-top: -22px;
font-weight: bold;
font-size:18px;
border-radius: 0 3px 3px 0;
/* text-decoration: none; */
transition:0.6s ease;
}
.next{
right:0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0, 0.8);
}
</style>
<style>
.dots{
position: absolute;
top:10px;
width:100%;
text-align: center;
}
.dot{
cursor: pointer;
height: 15px;
width: 15px;
margin:0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition:background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
-webkit-animation-name:fade;
-webkit-animation-duration:1.5s;
}
</style>
<style>
/* 애니메이션 효과 */
@keyframes fade{
from{ opacity: 0.4 }
to{ opacity:1}
}
@-webkit-keyframes fade{
from{ opacity: 0.4 }
to{ opacity:1}
}
</style>
[body태그의 뼈대]
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="../images/img_mountains_wide.jpg" style="width:100%" alt="" />
<div class="text">Caption One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="../images/img_nature_wide.jpg" style="width:100%" alt="" />
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="../images/img_snow_wide.jpg" style="width:100%" alt="" />
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">❯</a>
<div class="dots" style="text-align:center">
<span class="dot" onclick="dotSlide(1)"></span>
<span class="dot" onclick="dotSlide(2)"></span>
<span class="dot" onclick="dotSlide(3)"></span>
</div>
</div>
[script 코딩 - javascript]
[script 코딩 - jquery]
7. 버튼 클릭시 내용 보이기, 숨기기
[style 태그 안 css]
<style>
.container{
width: 500px;
}
.collapsible{
background-color: #777;
color:white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline:none;
font-size: 15px;
}
/* ::가상 요소 선택자*/
.collapsible::after{
content:'\002B'; /* + */
color:white;
float: right;
font-weight: bold;
margin-left: 5px;
}
.collapsible:hover , .active{
background-color: #555;
}
.content{
padding: 0 18px;
background-color: #f1f1f1;
max-height: 0; /* 오버플로우가 발생.. */
overflow: hidden; /* 숨기기 */
transition:max-height 0.2s ease-out;
}
.active::after{
content:'\2212'; /* - */
}
</style>
[body 태그 안 뼈대]
[javascript 코드]
[jquery 코드]
