built-in 기능을 막을때 사용
정말 중요한 기능이기에 꼭 기억 해야 한다.
event.preventDefult();전송에는 name="name" 과 value="value"를 필수 입력 해야 한다.
form tag에는 submit 이벤트가 존재(onsubmit)한다.
<form action="//daum.net" onsubmit="return fsubmit()">
</form>-
이를 무시하기 위해서 onsubmit에 return fsumit()을 입력하여
버튼의 submit 기능을 해제한다. -
onsubmit="" 이 입력되어 있다면 form을 직접 제어 하는것으로 간주
입력한 기능이 정상적으로 작동되지 않을 수 있다.
폼 전송 제어 방법
- 2000년대쯤 사용되는 방법(아직도 사용되는 구식방법)
function fsubmit(){
if (document.nm_form.nm_name.value == "구반장"){
return false;
}
}- 폼 전송 제어방법 (현재 사용되는 나름 최신 방법)
var vMyForm = document.querySelector("#myForm");
function f_submit(){
event.preventDefault(); //빌트인 기능을 막는다.
/* 전송직전에 하고 싶은 일이 있다면 이 안에서 하면 됨 */
vMyForm.submit(); //강제전송
}
vMyForm.addEventListener("submit", f_submit);자바 스크립트는 파라미터(매개변수)를 무엇을 넘겨도 상관이 없다.
함수가 함수를 매개변수로 넘기는것도 가능하다 (First Class Language)
함수의 매개변수로 넘어간 함수를 콜백(Call Back)함수라고도 한다.
비동기를 사용할 때 call back 함수를 위해서 사용한다고도 하는데
이는 전혀 근거가 없는 말이다.
function f_param(p_param){
alert(typeof(p_param));
}
f_param(272);
f_param("블랭핑크");
f_param(["1", "2", "3"]); //배열은 자동으로 toString으로 불려와짐
f_param({name:"제이슨 스타템"});
f_param(function(){alert("나 함수임");});
- ↓ call back함수
ex1)
function f_param(p_param){
p_param();
}
f_param(function(){alert("나 함수임");});
// f_param이 p_param을 가지고 있으므로 function내에서 p_param을 부르면
// f_param으로 입력되어 있는 alert("나 함수임"); 이 불러와짐
// f_param(function(){alert("나 함수임");});
// 위 명령어가 p_param 대신 들어간것과 같음
ex2)
function each(p_arr, p_cb){
for(var i=0; i<p_arr.length; i++){
p_cb(i,p_arr[i];
}
}
//"로제"를 "로제짱"으로 바꾸기
var vArr = ["로제", "제니", "리사"];
each(vArr, function(index, value){
if(value=="로제"){
vArr[index] = value + "짱";
}
});
alert(vArr);
/*
each(["로제","제니","리사"], function(index, value){
alert(index + ": " + value);
});
*/
ex3)
var $={}; // 네임스페이스용으로 일단 비어있는 객체 생성
$each = function(p_arr.p_cb){ //메소드 생성
for(var i=0; i<p_arr.length; i++{
p_cb.call(vArr, i, p_arrp[i]);
}
}
var vArr = ["로제", "제니", "리사"];
$.each(vArr, function(index, value){
console.log(this);
if(value=="로제"){
this[index] = value + "짱";
}
});
jQuery를 잘 사용하기 위해서는 해당 홈페이지에 있는 설명서를 잘 읽어봐야 하는데
- 그렇게 정독하지 않고 사용하기 때문에 성능이 떨어지고,
저항이 많이 사용된다.- 기본기가 잘 되어 있으면 성장이 빠르고 회사가 좋아하고, 안심하고 사용 할 수 있다.
하지만 기본기가 안되어 있으면 위험한 소스를 생성하게 되고, 모래성을 쌓는것과 같다.- 회사가 프로젝트 참여의 기회를 준다면
신입은 그 기회를 제대로 받아 들일 수 있도록 해야 한다.
그 기회는 기본기가 될 것이다.
파일 끌어다 놓기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#myDrop{
width: 200px;
height: 220px;
border: 1px solid black;
overflow: scroll; /* 스크롤 오버 생성 */
}
</style>
<body>
<div id="myDrop" ondragover="f_dragOver()" ondrop="f_drop()"></div>
<script>
var vMyDrop = document.querySelector("#myDrop");
function f_dragover(){
event.preventDefault();
}
function f_drop(){
event.preventDefault();
console.log(event.dataTransfer.files);
var files = event.dataTransfer.files;
for(var i=0; i<files.length; i++) { //여러 이미지 동시에 넣기
var fileReader = new FileReader(); // 불러온 파일을 대신 읽어주는 역할
fileReader.readAsDataURL(file); // fileRader는 비동기로 작동한다 (파일이 클 수도 있고, 작을 수도 있기 때문)
// 로딩이 완료되면 이벤트가 발생되어야 한다.
fileReader.onload = function(){
var vImage = document.createElement("img");
vImage.src = fileReader.result;
vimage.width = 100; vimage.height = 100;
vMyDrop.appendChild(vImage);
}
}
}
//div 영역 외에도 빌트인 기능 막기
function f_block(){
event.preventDefault();
}
window.addEventListener("dragover", f_block);
window.addEventListener("drop", f_block);
</script>
</body>
</html>여러파일 한번에 넣기
여러 파일 한번에 넣게 되면 파일을 다 불러오기 전에 다른 파일을 불러오게 되어서
로딩이 온전히 끝나지 못한다.
이를 확실하게 하기위해서는 파일을 한개씩만 읽는 상수를 만들어야한다.
//비동기 반복문 일반적인 해결법, 별도로 함수 처리 한다.
function f_readFile(){
var fileReader = new FileReader(); // 불러온 파일을 대신 읽어주는 역할
fileReader.readAsDataURL(file);
fileReader.onload = function(){
var vImage = document.createElement("img");
vImage.src = fileReader.result;
vimage.width = 100; vimage.height = 100;
vMyDrop.appendChild(vImage);
}
}
function f_drop(){
event.preventDefault();
console.log(event.dataTransfer.files);
var files = event.dataTransfer.files;
for(var i=0; i<files.length; i++) { //여러 이미지 반복문으로 동시에 넣기
f_readFile(files[i]);
}
}Files
<body>
<div id="myDrop" ondragover="f_dragOver()" ondrop="f_drop()"></div>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="myFile" name="file" value="" onchange="f_check(this)">
</form>
<script>
function f_check(p_this){
console.log(p_this.files); //일단 눈으로 확인 할 수 있도록 log 찍어 준다.
// input type="file" 안에는 files가 포함되어 있다.
}
var vMyDrop = document.querySelector("#myDrop");
function f_dragover(){
event.preventDefault();
}
function f_readFile(){
var fileReader = new FileReader(); // 불러온 파일을 대신 읽어주는 역할
fileReader.readAsDataURL(file);
fileReader.onload = function(){
var vImage = document.createElement("img");
vImage.src = fileReader.result;
vimage.width = 100; vimage.height = 100;
vMyDrop.appendChild(vImage);
var vSpan = document.createElement("span");
vSpan.innerHTML = p_file.name;
vMyDrop.appendChild(vSpan);
}
}
function f_drop(){
event.preventDefault();
console.log(event.dataTransfer.files);
var files = event.dataTransfer.files;
for(var i=0; i<files.length; i++) { //여러 이미지 반복문으로 동시에 넣기
f_readFile(files[i]);
}
}
//div 영역 외에도 빌트인 기능 막기
function f_block(){
event.preventDefault();
}
window.addEventListener("dragover", f_block);
window.addEventListener("drop", f_block);
</script>
</body>
Johannes