rolling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 300px;
height: 300px;
}
a{
text-decoration: none;
}
</style>
<script type="text/javascript">
let num = 1;
// 지역변수로 해놓으면 한번 실행되고 사라지기 때문에 전역변수로 설정
function next(){
num ++;
if(num>3){
num=1;
// 이미지가 4번부터는 에러뜸 그래서 3이 넘어가면 다시 1로넘어가게끔
}
document.getElementById("gallery").src="../1_html/sample/image/img0"+num+".png";
return false;
}
function prev(){
num --;
if(num<1){
num = 3;
}
document.getElementById("gallery").src="../1_html/sample/image/img0"+num+".png";
// 도큐먼트에서 -> 갤러리라는 아이디를 찾아서 -> 이미지 소스 변경
return false;
}
</script>
</head>
<body>
<div id="galleryWrap">
<p>
<a href="" onclick="return prev();">◀️</a>
<img src="../1_html/sample/image/img01.png" id = gallery>
<a href="" onclick="return next();">▶️</a>
</p>
</div>
</body>
</html>
dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dom</title>
<script>
function serchId(){
// document.getElementById()
// id가 test인 엘리먼트 탐색
const doc = document.getElementById("test");
console.log(doc);
doc.innerHTML="id로 탐색합니다.";
doc.style.color="red";
}
function serchName(){
//name이 test02인 엘리먼트들을 탐색
let doc = document.getElementsByName("test02")[1]; // 인덱스번호입력하여 원하는 값 찾음
console.log(doc);
doc.value="name 속성으로 엘리먼트 탐색";
}
function serchTagName(){
var doc = document.getElementsByTagName("p");
//문서내 p태그 찾음 -> 실행후 페이지 소스코드로 원하는 p태그 찾음
console.log(doc[3]);
doc[3].style.color = "blue";
doc[3].innerHTML="tagName으로 탐색"
}
</script>
</head>
<body>
<p>DOM(Document Object medel) 탐색 메소드</p>
<p id="test" onclick="serchId();">
1. 엘리먼트의 id로 탐색 : document의 엘리먼트 중 하나를 선택 - 반환 : 값 하나</p>
<p onclick="serchName();">2. 엘리먼트의 name으로 탐색 : 엘리먼트 여러개를 선택 - 반환 : 배열<br>
<input type="text" name="test02" value=""><br>
<input type="text" name="test02" value=""><br>
<input type="text" name="test02" value=""><br>
</p>
<p onclick="serchTagName();">3. 엘리먼트 태그이름으로 탐색 : 엘리먼트 여러개를 선택 = 반환 : 배열</p>
</body>
</html>
Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object</title>
<script>
//객체 생성1
function myClass603(){
let name="603호";
this.name02="세종대점";
this.getName=function(){
return name;
}
}
//객체 생성2
const myClass603_2 = {
name:"multi",
print:function(){
alert(myClass603_2.name+ ": print");
return myClass603_2.name;
}
}
myClass603.prototype.printName=function(){
let abc= "메롱";
alert(this.name02 + " , " + this.getName() + " : prototype " + abc);
}
function objTest(){
//function 기반 객체
let cls = new myClass603();
alert(cls.name02);
// myClass603에 cls라는 이름을 붙혀주는 객체생성
window.alert(cls.getName());
cls.printName();
//let name은 접근이 불가했으나 this.name은 접근이 가능했음
alert(myClass603_2.name);
myClass603_2.print();
}
</script>
</head>
<body>
<pre>
객체 : 관련된 데이터와 함수의 집합이다.
구성
-함수: 기능 정의
-속성: 객체 내부 데이터
-this: 객체 내부의 메소드나 속성을 정의 할 때 사용
-프로토타입 : 객체 확장
</pre>
<button onclick="objTest();">객체</button>
</body>
</html>
실행순서 : cls.name02 ⇒ 세종대점 / cls.getName ⇒ 603호 / printName ⇒ 세종대점 ,603호 :prototype 메롱 / myClass603_2.name ⇒ multi / myClass603_2.print ⇒ multi : print
numberObject
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const numberObj = () => {
let out = document.querySelectorAll("div")[0] // css 선택자를 이용
// querySelectorAll로 div태그중 첫번째 찾기
//1.작성 방법
let num = new Number(8);
let num02 = 7;
// NaN : Not a Number 의 줄임말
out.innerHTML = "NaN : " + parseInt('A')+ "<br>";
// infinity
out.innerHTML += (Infinity/100) + "<br>" ;
}
</script>
</head>
<body>
<pre>
1. Number객체
--정수와 실수를 다루는 객체
<button onclick="numberObj();">number객체</button>
-속성
NaN(숫자가 아닌 값)
infinity(범위를 벗어난 숫자)
</pre>
<div>
</div>
</body>
</html>
transObject
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function numTest(num){
// alert(num+":"+ typeof num);
// alert(num+5);
let val = Number(num) +5;
alert(val + ":" + typeof val);
}
function intTest(num){
let val = parseInt(num)+ 15;
alert(val +":"+ typeof val)
}
function floatTest(num){
let val = parseFloat(num);
}
</script>
</head>
<body>
<h2>1. 숫자형 형변환 number() 함수</h2>
<p>문자형의 정수/실수를 숫자형으로 변환시켜 준다.</p>
<input type="text" id="num">
<button onclick="numTest(num.value);">확인</button>
<h2>2. 정수형 형변환 parseInt() 함수</h2>
<p>문자형의 정수를 숫자로 변환시켜 준다.</p>
<input type="text" id="int">
<button onclick="intTest(int.value);">확인</button>
<h3>3. 실수형 형변환 parseflosat()</h3>
<P>문자형의 실수를 숫자로 변환시켜 준다.</P>
<input type="text" id="int">
<button onclick="intTaest(int.value);">확인</button>
<h3>4. 문자열과 숫자의 + 연산</h3>
<button onclick = "stringTest();">확인</button>
<div id="res"></div>
<script>
function stringTest(){
let doc = document.getElementById("res")
let val = 7+7;
doc.innerHTML += val +"<br>";
val=7+"7";
doc.innerHTML += val + "<br>";
}
</script>
</body>
</html>
aa 는 숫자가 아니지만 형이 숫자로 변경됨
'JS' 카테고리의 다른 글
| [JavaScript]스크립트언어란? (0) | 2024.07.01 |
|---|---|
| [JS] 자주 쓰는 함수 모음 (0) | 2024.05.10 |