728x90
반응형
캔버스
캔버스 그림을 그려줄 컨텍스트 객체
글씨를 그림으로도 그릴 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js canvas</title>
<script>
function loaded(){
var canvas = document.getElementById('canvas1');
//그림도구 객체 얻어오기
var context = canvas.getContext("2d"); //아이패드 펜슬 꺼내오는 느낌
//글씨 스타일 지정
context.fillStyle="red";
//그림도구를 이용하여 글씨 그려보기
context.fillText("Hello",10,40); //이건 글씨의 어디일까? 글씨의 좌측하단 지점을 의미
context.fillText("안녕",0,0);
context.fillText("안녕",0,400);
context.strokeStyle="blue";
context.strokeText("hello",100,40);
//사각형 그리기
context.fillStyle="green";
context.fillRect(10,50,100,40); //좌상단:10,50 너비:100, 높이:40
context.strokeStyle="green";
context.strokeRect(120,50,100,40);
//직선 그리기
context.beginPath(); //선 경로 작업 시작
context.moveTo(10,100); //선의 시작 위치
context.lineTo(100,150);
context.lineTo(150,120);
context.stroke(); //선을 그려라
//사각형, 곡선, 원, 도형, 그라디언트, 패턴 등등의 작업이 가능하다.
//이미지그리기
//png나 jpg같은 그림파일을 js용 객체로 변환해야한다.
var a = new Image(); //안드로이드에서 비트맵 같은친구. 실제로 그림을 가지고있다.
a.src = "./image/sakana.jpg";
//이미지 파일은 로드하는데 시간이 걸리기에 곧바로 그리려고하면 안그려질수있다.
a.onload = function(){//onload 니가 로드가 되면 = 함수를 호출해라
context.drawImage(a,10,180); //이미지의 좌상단 좌표
context.drawImage(a,10,180,100,100);
}
}
</script>
</head>
<body onload="loaded()">
<!-- 도화지 객체 -->
<canvas id="canvas1" width="300" height="400" style="border: 1px solid red;"></canvas>
</body>
</html>
게임
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js canvas game</title>
<script>
//플레이어 이미지 객체 생성, 바디 하기 전에 불러온다.
var imgPlayer = new Image();
imgPlayer.src="./image/cat1.gif";
var x =200, y=250; //이미지의 가운데 좌표를쓰고싶다.
var w = 40, h=40; //이미지의 절반 너비
var dx = 1, dy=1;
var imgback = new Image();
imgback.src = "./image/sleepcat.gif";
function loaded(){
canvas=document.getElementById('c1');
context = canvas.getContext('2d');
//context.drawImage(imgPlayer,200,250,100,100); //그림의 오른쪽 뾰족이 기준 좌측상단 기준
setInterval(runGame,10); //1초에 100번 움직인다. 함수를 등록하는 거니까 runGame()아니다.
}
//게임을 진행하는 코드
function runGame(){
moveAll(); //캐릭터들을 움직이기
drawAll(); //화면 그리기
};
function moveAll(){
x+= dx;
y+= dy;
if(x<=0 || x>=400-w) dx= -dx;
if(y<=0 || y>=500-h) dy= -dy;
};
function drawAll(){
context.drawImage(imgback,0,0,400,500)
context.drawImage(imgPlayer,x-w,y-h,w*2,h*2);
};
function keydown(){
keycode= window.event.keyCode; //주의할점! keyCode의 C는 대문자이다.
switch(keycode){
case 37 : dx=-1; break; //37 : 왼쪽
case 38 : dy=-1; break; //38 : 위로
case 39 : dx=1; break; //39 : 오른쪽
case 40 : dy=1; break; //40 : 아래
default:dx=1;dy=1; //auto느낌
}
}
function keyup(){
keycode=event.keyCode;
if(keycode>=37 && keycode<=40){
dx=0;
dy=0;
}
}
</script>
</head>
<body onload="loaded()" onkeydown="keydown()" onkeyup="keyup()">
<!-- 왜 onload를 쓰는지 알아야해 스크립트가 위에 있으니까 -->
<canvas id="c1" width="400" height="500" style="border: 2px solid black;"></canvas>
</body>
</html>
jQuery
자바스크립트 라이브러리→ 자바스크립트를 쉽게 쓸 수 있는방법을 연구했다.
jQuery만 쓰는거는 안좋다. 빠르게 쓸수있지만 업그레이드가 안되면 진전이 없다.
$(선택자).함수();
$는 jQuery를 의미함.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 라이브러리</title>
<!-- JQueye 라이브러리 :jquery 닷컴 -->
<!-- 1. 다운로드 방식 -->
<script src="./js/jquery-3.6.4.min.js"></script>
<!-- 2. CDN 방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
//HTML body 문서의 로드가 완료되었을때 발동하는 이벤트 처리
//요소에 직접 js를쓰면 나중에 제어하기 너무 힘들다.. 그러지말고
jQuery(document).ready(function(){//객체를 쓸때는 "document"라고 쓰면 안돼
// alert('ready');
// $("#btn").click(function(){
// alert("클릭!");
// });
$("#b1").click(function(){
$("img").hide(1000);
});
$("#b2").click(function(){
$("img").show("fast");
});
$("#b3").click(function(){
$("img").toggle("slow");
});
$("#b4").click(function(){
$("img").slideUp("slow");
});
$("#b5").click(function(){
$("img").slideDown("slow");
});
$("#b6").click(function(){
$("img").slideToggle("slow");
});
});
//애니메이션 효과
</script>
</head>
<body>
<!-- <button id="btn">버튼</button> -->
<hr>
<!-- 애니메이션 효과 -->
<button id="b1">hide</button>
<button id="b2">show</button>
<button id="b3">toggle</button>
<button id="b4">slideUp</button>
<button id="b5">slideDown</button>
<button id="b6">slideToggle</button>
<img src="./image/cat2.gif" alt="cat2" width="200">
<hr>
<!-- DOM 요소 제어 - 속성변경 -->
<p id="p1">이 요소에는 <strong>스트롱</strong>요소가 있습니다. </p>
<button id="btn1">text() 읽어오기</button>
<button id="btn2">html() 읽어오기</button>
<script>
$('#btn1').click(function(){
alert($('#p1').text());
});
$('#btn2').click(function(){
alert($('#p1').html()); //html로 읽어오는것은 태그문까지 글자로 표현한다.
});
</script>
<hr>
<h3 id="hh">여기에 text 콘텐츠 작성하기</h3>
<button id="btn3">text() 쓰기</button>
<button id="btn4">html() 쓰기</button>
<script>
$('#btn3').click(function btn3(){
$('#hh').text('텍스트추가 <a href="">구글</a>');
});
$('#btn4').click( function btn4(){
$('#hh').html('텍스트추가 <a href="">구글</a>');
});
</script>
</body>
</html>
AJAX 에이작스 (레트로핏 같은)
(Asynchronous Javascript and XML) → XML을 지정한게 아니라 오래전부터 쓰던 이름이라 유지함. json도 가능함.
서버와 데이터를 교환하는 기술 중 하나.
안드로이드에서는 화면이 안바뀌지만, js에는 화면이 바뀐다. 웹기술전체를 다 뒤집어둠.
안드로이드에서는 HttpUrlConnection →Retrofit2 라이브러리를 대신쓴다.
js에서는? XMLHttpRequest (클래스 이름 new 해서만든다)→이미 내장되어있는 fetch 라이브러리를 대신쓴다.
Asynchronous 중요한 키워드!
Acess to XMLHttpRequest at 'http://www.w3schools.com/XML/cd_catalog.xml' from origin 'http://----------------.dothome.co.kr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
→서버가 달라서 발생한 오류. 이걸 왜 막았을까? 왜 origin만 접근할수있게할까? 개인정보보호때문에! 웹에서 내가 의도하지 않아도 페이지를 열수있게 된다면 해커들 위험에 노출되기 쉽다. 해커의 목적은 해커의 프로그램을 사용자들이 다운로드 받게할수있을까 ? 하는거
CORS 정책을 피하려면?
cross origin을 막는다. 그래서 중간자 역할로 php를 사용한다. (clientUrl)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js fetch 라이브러리 수업</title>
<!-- fetch는 레트로핏같은 라이브러리 -->
</head>
<body>
<button onclick="aaa()">get방식</button>
<button onclick="bbb()">post방식</button>
<hr>
<div id="target"></div>
<script>
function aaa(){
//GET 방식 연습
var url = "./getTest.php?name=ROSA&msg=Good";
//fetch 라이브러리 - promiss 기법
fetch(url).then(function(response){ //이거 자체로 open,send 끝남 , 내려받아 url을. 그리고나서 이 함수를 실행시켜
//응답객체 : response 이건 객체이다.
//응답 객체가 가지고 온 응답결과를 글씨로 변환하는 작업 요청
return response.text(); //이것도 비동기 작업이다. 그래서 비동기로하다가 던져
}).then(function(responseText){
document.querySelector('#target').innerHTML=responseText;
}); //and then .. 계속 이런식으로 명령한다. 이것이 프로미스기법
}
function bbb(){
//POST 방식
var url="./postTest.php";
var data="title=Hello&msg=nice to meet you";
fetch(url,{//옵션은 객체로 준다.
method:'POST',
headers:{'Content-type':'application/x-www-form-urlencoded; charset=utf-8'},
body:data
}).then(function(response){
return response.text();
}).then(function(text){
document.querySelector('#target').innerHTML=text;
})
}
</script>
</body>
</html>
728x90
반응형
'HTML,CSS,JavaScript' 카테고리의 다른 글
| JavaScript DOM과 이벤트처리, 유효성 검증 (0) | 2023.05.10 |
|---|---|
| JavaScript Object (0) | 2023.05.09 |
| JavaScript 자바 스크립트란? (0) | 2023.05.08 |
| CSS3 부트스트랩 (0) | 2023.05.04 |
| CSS 회원가입 창 만들기 (0) | 2023.05.03 |
