객체기반 언어
- 객체.메서드
- 객체.속성
BOM
- window,alert()
- window.scrollY
- history.back()
DOM
- document.querySelector().offsetTOP
- document.querySelectorAll()
내장객체
- let aa=new Date() - 날짜정보객체
- aa.getFullYear();
- Math.floor()
함수 - 식이나 변수를 저장하는 곳으로 반복되는 식을 적용할 때 사용한다.
선언적 함수
function 함수명(){
스크립트
}
함수호출
함수명()
익명함수 선언 (충돌을 줄이고자 설정)
let fun=functon(){
스크립트
}
fun();
매개변수가 있는 함수
- 외부에서 전달되는 데이터를 반듣 매개변수가 있음. 리턴값은 없음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<style>
input{
width: 80px; height: 40px;
padding: 10px 5px;
margin: 50px 5px;
}
</style>
</head>
<body>
<!-- <input type="text" id="num1">+
<input type="text" id="num2">=
<input type="text" id="result" readonly> -->
<button type="button" id="btn">
Click
</button>
<script>
// let input=document.querySelectorAll("input")
// console.log(input)
// let num1=input[0].value;
let btn=document.querySelector("#btn")
function num(){
let result=2*5+10; //result 안에 식을 저장
alert(result) //alert창에 추가 함
}
btn.addEventListener("click", num)//버튼을 클릭하면 num이 실행되도록 함
</script>
</body>
</html>
매개 변수란 함수를 호출하였을 때 전달한 값을 저장하는 변수를 가리킨다. 이렇게 전달된 값을 함수에 일련에 실행문에 사용할 수 있다.
<script>
// let input=document.querySelectorAll("input")
// console.log(input)
// let num1=input[0].value;
let btn=document.querySelector("#btn")
function num(a,b){
let result=2*a+b; //result 안에 식을 저장
alert(result) //alert창에 추가 함
}
btn.addEventListener("click", function(){
num(10,50)
})//버튼을 클릭하면 num이 실행되도록 함
</script>
이런식으로 특정 숫자를 지정하지 않고 식으로 만들어서 각각 a와 b에 해당되는 자리에 숫자를 넣어주어서 식을 지정시켜서 실행시킬 수 있다.
<body>
<input id="num1" class="input"> *
<input id="num2" class="input"> =
<input id="result" class="input" readonly>
<button type="button" id="btn">
Click
</button>
let input=document.querySelectorAll(".input")//인풋 클래스안의 모든것을 저장하라
let btn=document.querySelector("#btn")
function sum(x,y,el){//함수안에 임의의 변수 선언
let res=x*y;//변수안에 식을 넣음
el.textContent=res;
}//선언적 함수 이는 밑에 선언해도 된다. 인터프린트 방식이지만 함수는 포에스팅 방식으로 밑에 있는 식을 읽어들여서 적용되기도 하기 때문
btn.addEventListener("click", function(){
let num1=input[0].value //value 는 텍스트를 숫자로 변환하는 속성이다.
let num2=input[1].value
sum(num1,num2,input[2])
})
function sum(x,y,el){
let res=x*y;
el.value=res;
}
</script>
화살표함수
<body>
<ul class="list">
<li><a href="#" class="link">MENU1</a></li>
<li><a href="#" class="link">MENU2</a></li>
<li><a href="#" class="link">MENU3</a></li>
</ul>
<script>
let btnLink=document.querySelectorAll(".link");
btnLink[0].classList.add("active");
btnLink.forEach(function(btn){
btn.addEventListener("click", ()=>{
btnMenu(btnLink, this)
// btnLink.forEach(function(el){
// el.classList.remove("active")
// });
// this.classList.add("active");
})
});
function btnMenu(aa,bb){
aa.forEach(function(el){
el.classList.remove("active")
});
this.classList.add("active");
}
</script>
</body>
함수가 들어가는 자리에 ()=> 를 넣어주는 것 여기서 주의 할 점은 함수 대신 입력하고 소괄호에 변수를 넣는건 같지만
CANVAS
자바스크립트를 사용해서 그림을 그리는 듯한 효과를 넣는것으로 기본적으로 캔버스 태그를 선언하고 크기와 모양을 잡아 자바를 지정해 넣어준다.
<style>
#myCanvas{
border: 5px dotted dodgerblue;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
})
</script>
</head>
<body>
<canvas id="myCanvas" width="300px" height="300px"></canvas>
</body>
아래에는 이전버전의 자바스크립트 이지만 현제는 함께 식에 선언하여 넣을 수도 있다.
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.moveTo(0,0); //시작점
ctx.lineTo(300,300); //끝나는 지점
ctx.stroke()
})
</script>
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.moveTo(50,50); //시작점
ctx.lineTo(300,150); //끝나는 지점
ctx.stroke()
위치를 설정하고 이는 캔버스 안에서만 적용이 되고 직선외의 다양하게도 가능하다.
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.fillRect(20,20,100,100); //사각형 그리기 x,y 각각 20인 위치에서 넓이 높이 100의 도형을 그리겠다는 의미
ctx.clearRect(30, 30, 80,80) //도형을 지운다는 속성으로 해당 위치와 크기만큼 지운다는 명령어 이다.
})
</script>
사각형이나 삼각형등 도형은 전부 닫힌 패스라고 할수 있다. 하지만 선처럼 열린패스를 만들 수도 있다.
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.stroke();
})
</script>
도형과 마찬가지로 시작점 위치와 끝나는 지점의 위치를 지정해주면 된다.
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.stroke();
})
</script>
이렇게 이어서 또 지정해주면 이어서 그려지게 된다.
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.closePath(75,25);
ctx.stroke();
})
</script>
클로즈 패스를 사용해서 도형을 닫아 줄수도 있다.
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.closePath(75,25);
ctx.stroke();
ctx.fill();
})
</script>
fill속성을 사용해 색을 채워줄수도 있다.(검정이 기본값이기 때문에 검정으로 칠해졌다.)
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
//arc(x,y,radius, startAngle, endAngle, counterClockwise)
//counterClockwise - 회전방향(false(기본값 - 시계방향/오른쪽) / true(반시계반향/왼쪽))
ctx.beginPath();//작업선 시작점
ctx.arc(150, 150, 50, 0, Math.PI/2, false);
ctx.stroke();
})
</script>
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
//arc(x,y,radius, startAngle, endAngle, counterClockwise)
//counterClockwise - 회전방향(false(기본값 - 시계방향/오른쪽) / true(반시계반향/왼쪽))
ctx.beginPath();//작업선 시작점
ctx.arc(150, 150, 50, 0, Math.PI/2, true);
ctx.stroke();
})
</script>
원도 그릴수가 있는데 그리는 방향을 설정하거나 위치나 그리는 정도를 설정할 수 있고 주로 false를 사용해서 그린다.
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.beginPath();//작업선 시작점
ctx.fillstyle="rgb(255,255,0)";
ctx.strokeStyle="yellow";
ctx.lineWidth=10;
ctx.fillRect(10,10,100,100);
ctx.strokeRect(10,10,100,100);
})
</script>
<script>
window.addEventListener("DOMContentLoaded", ()=>{
let ctx=document.querySelector("#myCanvas").getContext("2d");
ctx.beginPath();//작업선 시작점
ctx.fillStyle="rgb(255,255,0)";
ctx.strokeStyle="blue";
ctx.lineWidth=10;
ctx.lineJoin="round";
ctx.fillRect(10,10,100,100);
ctx.strokeRect(10,10,100,100);
ctx.lineWidth=20;
ctx.lineCap="round"
ctx.moveTo(20,140);
ctx.lineTo(20,250);
ctx.stroke();
})
</script>
'기록 > 수업정리_javascr' 카테고리의 다른 글
| GSAP 플러그 - 스크롤 트리거 (0) | 2024.08.19 |
|---|---|
| svg (0) | 2024.08.14 |
| 내장객체 (날짜정보) (0) | 2024.08.02 |
| 연산자(증감, 논리) (0) | 2024.08.01 |
| scrollTo() (0) | 2024.07.31 |
