Study/JavaScript
JavaScript : Math 객체, Event onscroll, onmousemove, preventDefault
posey
2022. 12. 6. 09:44
2022.12.06.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 58
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 58
<Math 메소드 알아보기>
- JavaScript
<script>
document.write("Math.E : " + Math.E + "<br>");
document.write("Math.PI : " + Math.PI + "<br>");
document.write("Math.SORT2 : " + Math.SORT2 + "<br>");
document.write("Math.SORT1_2 : " + Math.SORT1_2 + "<br>");
document.write("Math.LN2 : " + Math.LN2 + "<br>");
document.write("Math.LN10 : " + Math.LN10 + "<br>");
document.write("Math.LOG2E : " + Math.LOG2E + "<br>");
document.write("Math.LOG10E : " + Math.LOG10E + "<br>" + "<br>");
let num1 = 2.124567;
document.write("Math.round(2) : " + Math.round(2) + "<br>");
document.write("Math.ceil(num1) : " + Math.ceil(num1) + "<br>");
document.write("Math.floor(num1) : " + Math.floor(num1) + "<br>");
document.write(
"Math.trunc(num1) : " + Math.trunc(num1) + "<br>" + "<br>"
);
let num2 = -2.124567;
document.write("Math.ceil(num2) : " + Math.ceil(num2) + "<br>");
document.write("Math.floor(num2) : " + Math.floor(num2) + "<br>");
document.write("Math.trunc(num2) : " + Math.trunc(num2) + "<br>");
document.write("Math.sign(-4) : " + Math.sign(-4) + "<br>");
document.write("Math.sign(null) : " + Math.sign(null) + "<br>");
document.write("Math.sign(6) : " + Math.sign(6) + "<br>");
document.write("Math.pow(6, 2) : " + Math.pow(6, 2) + "<br>");
document.write("Math.sqrt(36) : " + Math.sqrt(36) + "<br>");
document.write("Math.abs(-36) : " + Math.abs(-36) + "<br>");
document.write("Math.abs(36) : " + Math.abs(36) + "<br>");
document.write(
"Math.min(36, 10, 0, 1, -2 : " + Math.min(36, 10, 0, 1, -2) + "<br>"
);
document.write(
"Math.max(36, 10, 0, 1, -2 : " + Math.max(36, 10, 0, 1, -2) + "<br>"
);
document.write("Math.random() * 2 : " + Math.random() * 2 + "<br>");
</script>
<Math 메소드 예제>
- JavaScript
<script>
let food = ["짜장면", "짬뽕", "탕수육", "잡채"];
document.write(food[3]); // 0, 1, 2, 3
console.log(Math.random());
</script>
0
새로고침을 하면 random으로 console 창 출력되는 숫자가 달라진다.
<Math 메소드 예제2>
- JavaScript
<script>
let food = ["짜장면", "짬뽕", "탕수육", "잡채", "군만두"];
// 첫 번째 방법
/* let i = Math.ceil(Math.random() * 4);
document.write(food[i]); // 0, 1, 2, 3, 4 */
// 두 번째 방법
let num = food.length;
let i = Math.floor(Math.random() * num);
document.write(food[i]); //0, 1, 2, 3, 4
console.log(i);
</script>
0
이 예제도 역시 새로고침을 하면 random으로 console 창 출력되는 숫자가 달라진다.
<Math 메소드 배경색 바꾸기 예제>
- HTML
<button id="bg" onclick="chcolor()">background change</buttn>
- CSS
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
body{
text-align: center;
background: #eee;
margin-top: 50px;
}
button {
padding: 10px 20px;
border-radius: 5px;
background: #222222;
color: #fff;
cursor: pointer;
}
</style>
- JavaScript
<script>
let color = ["rgb(252, 187, 187)",
"rgb(140, 204, 140)",
"rgb(145, 205, 237)",
"rgb(245, 231, 161)"];
function chcolor() {
let i = Math.floor(Math.random() * color.length);
document.querySelector("body").style.backgroundColor = color[i];
}
chcolor(i);
</script>
0
<onscroll event 알아보기>
- HTML
<div id="div1" onscroll="myfnc()">
<div id="content">Scroll me !</div>
</div>
<p id="demo"></p>
<button onclick="fnc()">Scroll 원위치</button>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
body {
background: #eee;
}
#div1 {
width: 500px;
height: 500px;
overflow: auto;
}
#content {
width: 2000px;
height: 2000px;
background: #ccc;
padding: 20px;
}
button {
background: #222222;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 10px 15px;
}
button:hover {
background: #222222ac;
border: none;
}
- JavaScript
<script>
function myfnc() {
let txt = document.getElementById("div1");
let x = txt.scrollLeft;
let y = txt.scrollTop;
document.getElementById("demo").innerHTML =
"<br> 가로 : " + x + "<br> 세로 : " + y;
}
function fnc() {
let txt = document.getElementById("div1");
txt.scrollLeft = 0;
txt.scrollTop = 0;
}
</script>
0
<onscroll event 예제>
- JavaScript
<script>
window.onscroll = function () {
let ht = document.documentElement.scrollTop;
console.log(ht);
if (ht <= 500 && ht < 1000) {
document.querySelector("body").style.backgroundColor = "black";
} else if (ht >= 1000) {
document.querySelector("body").style.backgroundColor = "red";
} else {
document.querySelector("body").style.backgroundColor = "green";
}
};
</script>
0
<onscroll event Top 버튼 만들어보기>
- HTML
<div id="nav"></div>
<div id="content">contents</div>
<button id="btn" onclick="topfnc()">Top</button>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
font: 18px "Montserrat", sans-serif;
font-weight: 500;
}
body {
height: 3000px;
background-color: #eee;
}
#nav {
position: fixed;
width: 100%;
height: 50px;
background: #333;
transition: 0.8s;
}
#content {
position: relative;
top: 60px;
}
#btn {
position: fixed;
right: 20px;
bottom: 20px;
cursor: pointer;
padding: 15px;
background: #333;
color: #fff;
border-radius: 50%;
}
- JavaScript
<script>
window.onscroll = function () {
let ht = document.documentElement.scrollTop;
if (ht < 50) {
document.getElementById("btn").style.opacity = "0";
} else {
document.getElementById("btn").style.opacity = "1";
}
};
// function topfnc() {
// window.scrollTo({ top: 0, behavior: "smooth" });
// }
function topfnc() {
document.documentElement.scrollTop = 0;
}
</script>
0
<onscroll event 응용 예제>
- HTML
<div class="top">
<h1>The onscroll Event</h1>
</div>
<hr />
<div class="content">
<img src="../images/photo1.jpg" id="myImg" alt="photo1" />
</div>
<button id="btn" onclick="topfnc()">Top</button>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
}
.top {
height: 500px;
}
.top h1 {
margin: 30px 20px;
}
.content {
height: 1500px;
}
.content img {
width: 300px;
opacity: 0;
margin: 30px 20px;
}
#btn {
position: fixed;
right: 20px;
bottom: 20px;
cursor: pointer;
padding: 15px;
background: #333;
color: #fff;
border-radius: 50%;
}
.slideup {
animation-name: slideup;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.slidedown {
animation-name: slidedown;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slideup {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slidedown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(70%);
}
}
- JavaScript
<script>
window.onscroll = function () {
let ht = document.documentElement.scrollTop;
if (ht > 350) {
document.getElementById("myImg").className = "slideup";
} else {
document.getElementById("myImg").className = "slidedown";
}
if (ht < 50) {
document.getElementById("btn").style.opacity = "0";
} else {
document.getElementById("btn").style.opacity = "1";
}
};
function topfnc() {
document.documentElement.scrollTop = 0;
}
</script>
0
<onmousemove 알아보기>
- HTML
<form action="" name="form1">
<p><input type="text" name="client_x" /></p>
<p><input type="text" name="client_y" /></p>
<p><input type="text" name="page_x" /></p>
<p><input type="text" name="page_y" /></p>
<p><input type="text" name="screen_x" /></p>
<p><input type="text" name="screen_y" /></p>
</form>
<button id="btn" onclick="topfnc()">Top</button>
- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
font-family: "Montserrat", sans-serif;
}
body {
margin-top: 1000px;
padding-bottom: 1000px;
}
input {
padding: 10px 20px;
font-weight: 500;
font-size: 20px;
}
#btn {
position: fixed;
right: 20px;
bottom: 20px;
cursor: pointer;
padding: 15px;
background: #333;
color: #fff;
border-radius: 50%;
}
- JavaScript
<script>
document.onmousemove = function (e) {
/* 매개변수 변수명을 event 또는 e로 사용할 필요는 없지만, 보통 event 객체의 의미로 event 또는 e를 주로 사용함 */
let myform = document.form1;
myform.client_x.value = "clientX : " + event.clientX;
myform.client_y.value = "clientY : " + event.clientY;
// 문서를 기준으로 좌표 구함. 스크롤 계산안함
myform.page_x.value = "pageX : " + event.pageX;
myform.page_y.value = "pageY : " + event.pageY;
// 문서를 기준으로 스크롤 높이까지 계산해 좌표를 구함
myform.screen_x.value = "screenX : " + event.screenX;
myform.screen_y.value = "screenY : " + event.screenY;
// 스크린(모니터) 기준으로 좌표를 구함
};
function topfnc() {
document.documentElement.scrollTop = 0;
}
</script>
0
마우스를 올리면 각각의 기준으로 좌표를 구해 데이터가 변하는 것을 확인할 수 있다.
<a link 태그 막기 예제>
- HTML
<a href="http://www.naver.com" id="google" onclick="url_link(a)">구글</a>
<button id="btn" onclick="topfnc()">Top</button>
- JavaScript
<!-- 첫 번째 방법 -->
<script>
function topfnc() {
document.documentElement.scrollTop = 0;
}
let txt = document.getElementById("google");
function myfnc(e) {
e.preventDefault();
location.href = "http://www.google.com";
}
txt.onclick = function (a) {
myfnc(a);
};
</script>
<!-- 두 번째 방법 -->
<!-- <script>
function topfnc() {
document.documentElement.scrollTop = 0;
}
let txt = document.getElementById("google");
txt.onclick = function (e) {
e.preventDefault();
location.href = "http://www.google.com";
};
</script> -->
<!-- 세 번째 방법 -->
<!-- <script>
function topfnc() {
document.documentElement.scrollTop = 0;
}
let txt = document.getElementById("google");
txt.onclick = function () {
location.href = "http://www.google.com";
return false; // 구문의 제일 끝에 기입해야함
};
</script> -->
0
a 태그에는 네이버의 주소로 작성했음에도 불구하고 구글 링크로 접속할 수 있도록 한다.
<checkbox 클릭이 되지 않도록 막기 예제>
- HTML
Try to check this box: <input type="checkbox" id="box" />
- JavaScript
<script>
let txt = document.getElementById("box");
// txt.onclick = function (e) {
// e.preventDefault();
txt.onclick = function () {
return false;
};
</script>
0
checkbox에 클릭을 해도 클릭이 되지 않도록 한다.
* 내용 출처
반응형