마우스.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#id_nemo{
position: absolute; /* 기본값 static은 움직이지 않음 */
width: 100px;
height: 100px;
background-color: lightpink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="id_nemo"></div>
<script>
var v_nemo = document.querySelector("#id_nemo");
const {width:boxWidth, height:boxHeight} = v_nemo.getBoundingClientRect();
let isDragging = null;
let originLeft = null;
let originTop = null;
let originX = null;
let originY = null;
v_nemo.addEventListener("mousedown", (e) => {
isDragging = true;
originX = e.clientX;
originY = e.clientY;
originLeft = v_nemo.offsetLeft;
originTop = v_nemo.offsetTop;
})
document.addEventListener("mousemove", (e) => {
if(isDragging){ //마우스 이동 시작을 전역으로 알렸을 경우에만 적용
const diffX = e.clientX - originX; //이동한 거리
const diffY = e.clientY - originY; //이동한 거리
v_nemo.style.left = originLeft + diffX + "px";
v_nemo.style.top = originTop + diffY + "px";
}
});
document.addEventListener("mouseup", (e) => {
isDragging = false;
})
// function f_mouseMV(){
// //마우스 좌표
// console.log("X=", event.clientX); // X 좌표
// console.log("Y=", event.clientY); // Y 좌표
// v_nemo.style.left = event.clientX + "px";
// v_nemo.style.top = event.clientY + "px";
// }
// window.addEventListener("mousemove", f_mouseMV);
// 드래그 할 때 같이 움직이기
// function f_drag(){
// event.preventDefault(); // 해당 event에 built-in된 기능 막기
// event.stopPropagation();
// // console.log("X=", event.clientX);
// // console.log("Y=", event.clientY);
// // alert("드래그하기");
// }
// window.addEventListener("mousedown", f_drag);
// window.addEventListener("mousedown", f_drop);
//[숙제]찍어서 끌면 마우스포인터랑 같이 움직여지는 것
// 놨을 때 멈춰지기
// function f_drop(){
// event.preventDefault(); // 해당 event에 built-in된 기능 막기
// event.stopPropagation();
// alert("떼기");
// }
</script>
</body>
</html>마우스 끌기.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
.wrapper{
width: 30vw;
height: 50vh;
border: 3px solid black;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="wrapper" ondragover="f_over()" ondrop="f_drop()"></div>
<script>
var v_wrapper = document.querySelector(".wrapper");
function f_over(){
event.preventDefault(); // 해당 event에 built-in된 기능 막기
event.stopPropagation(); // 이벤트 버블링/캡쳐링 막기
//자식 => 부모 이벤트 전달 - 버블링 ,
//부모 => 자식 이벤트 전달 - 캡쳐링
}
function fileRead(p_file){
var v_fileReader = new FileReader(); // 파일 읽어주는 객체
v_fileReader.readAsDataURL(p_file); //URL 형식으로 읽는 것
v_fileReader.onload = function(){ // 파일 다 읽었다면 함수 실행
// console.log(v_fileReader.result); // 읽은 결과를 출력
//제한시간 2분, 읽어온 이미지 파일을 wrapper에 넣으시오
var v_img = document.createElement("img"); // img 태그 생성
// v_img.src = v_fileReader.result; // src에 읽어온 내용 할당
v_img.setAttribute("src", v_fileReader.result);
v_img.width = 100;
v_img.height = 100;
v_wrapper.appendChild(v_img); // 이미지가 눈에 보이게
}
}
function f_drop(){
event.preventDefault(); // 해당 event에 built-in된 기능 막기
event.stopPropagation();
v_wrapper.innerHTML = "";
//마우스 버튼을 놓았을 때
//현재 파일 1개만 대응 멀티파일에 대응토록 수정
console.log(event.dataTransfer.files);
var v_files = event.dataTransfer.files;
for(var i=0; i< v_files.length; i++){
// var v_file = event.dataTransfer.files[i];
fileRead(v_files[i]); // 비동기 겹칠때 함수로 빼면 거의 해결
}
// var v_file = event.dataTransfer.files[0];
}
window.addEventListener("dragover", function(){
event.preventDefault();
})
window.addEventListener("drop", function(){
event.preventDefault();
})
</script>
</body>
</html>리팩토링.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>
<script>
// news.google.com/rss/search?q=조이서 -> 구글 뉴스 openapi
//중복체크(배열속에 특정 값이 있는지?)를 일반화
//리팩토링이라고 부름
function isRepeat(p_arr,p_val){ // p_arr속에 p_val이 있는지 체크
for(i=0; i < p_arr.length; i++){
if(p_arr[i] == p_val){
return true; // 같은 게 있으면 true반환
}
}
return false; // 못찾았으니까 false;
}
//로또 : 중복제거 로직 -> 정리(refactoring)
var v_lottoNums = []; // 로또 번호 담을 배열
for(;"횟수를 알 수 없음";){ //true (문자열은 빈 공백만 false)
var v_ranNum = Math.ceil(Math.random()*45); // 1~45
if(!isRepeat(v_lottoNums,v_ranNum)){
v_lottoNums.push(v_ranNum);
}
if(v_lottoNums.length == 6){
break; // 무한 루핑 종료
}
/*
// 발생된 숫자가 이미 배열에 있는지 확인해야 함
var v_isRepeat = false; // 같은 게 없다고 가정(flag변수) - 이게 프로그램적으로 유리
for(var i=0; i <v_lottoNums.length; i++){
if(v_lottoNums[i] == v_ranNum){ // 배열에 같은 게 있다면
v_isRepeat = true; //가정이 틀렸음
break; //이미 틀렸으니 더 할 이유 없음
}
}
if(!v_isRepeat){// 같은 게 없다고 증명되면
v_lottoNums.push(v_ranNum);
}
*/
//종료 조건
}
alert(v_lottoNums); // 확인
</script>
</body>
</html>Again.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js"></script>
</head>
<body>
<button id="jinsuk">진석AJAX</button>
<script>
var v_jinsuk = document.querySelector("#jinsuk");
var f_click = function(){
var v_ajax = new XMLHttpRequest();
//서버 경유로 CORS 회피! - openAPI사용시
v_ajax.open("get", "serverBypass.php", true);
//false면 동기, true면 비동기
v_ajax.onreadystatechange = function(){
if(v_ajax.readyState == 4 && v_ajax.status == 200){
// console.log(v_ajax.responseText);
//spring 시간에 jackson 라이브러리 배울것임
console.log(v_ajax.responseXML);
var v_xmlDoc = v_ajax.responseXML;
var x2js = new X2JS();
var jsonObj = x2js.xml2json(v_xmlDoc);
console.log(jsonObj); // 잘 되었는지 확인
}
}
// AJAX는 내용을 받아서 가공할 수 있기 때문에 CORS제약사항을 줌
// 회피방법(가장 많이 사용 서버(본인)우회)
// jsp말고 php(초간단)를 이용해서 검증
v_ajax.send(); // 비동기라서 send를 밑에 씀
}
v_jinsuk.addEventListener("click", f_click);
</script>
</body>
</html>serverBypass.php
<?php
//php는 jsp처럼 서버에서 동작하는 서버프로그램 언어
//간단히 개념적으로 보기 위해서 php를 사용하겠음
// 변수 선언 $, 문자열 더하기 ., 그 외는 대부분 함수로 기능 제공해줌
// $kgb="잘 되남"." 될걸";
// echo $kgb;/* jsp의 out.print와 같은 기능 echo */
header('Content-Type: text/xml'); // 응답 형식 지정
echo file_get_contents("https://news.google.com/rss/search?q=%EC%A1%B0%EC%9D%B4%EC%84%9C&hl=ko&gl=KR&ceid=KR:ko");
?>