반응형
반응형

1. keyup

키보드에서 손을 땠을 때 실행

2. keydown

키보드를 눌렀을 때 실행

키보드를 누르고 있을 때 한번만 실행됨

3. keypress

키보드를 눌렀을 때 실행

키보드를 누르고 있을 때 계속 실행됨

 

* Ctrl, Alt, Shift 키 등은 keydown에서는 작동하지만 keypress 에서 작동하지 않음

 

* keyCode ASCII code 값

keydown, keyup에서는 a = 65, A = 65로 동일하게 보여짐

keypress에서는 a = 97, A = 65로 다른 값이 보여짐

 -> Caps Lock 여부 체크, 대소문자 구분을 통한 로직 작성 가능

 

* FireFox 에서의 버그

event.keyCode 가 파이어폭스에서 동작안할 수 있음 따라서 keyCode 사용 시 아래와 같이 사용하면 됨

 

var keyCode = event.keyCode ? event.keyCode : event.which;

 







keydown, keypress 는 이전 누른 값을 가지고 있음

keyup 은 한글 처리 가능 및 현재 누른 값을 가지고 있음

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

7 JavaScript Web APIs to build Futuristic Websites you didn’t know  (0) 2023.07.04
[script] 입력창 글자수 제한  (0) 2023.07.03
document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[jQuery] jQuery .data()  (0) 2023.05.30
반응형

1. $(document).ready()

- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행
- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨
  

2. $(window).load()

- DOM의 standard 이벤트
- html의 로딩이 끝난 후에 시작
- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨
- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함
- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생길 때에는 그만큼의 시간을 기다려야 함
- 외부 링크나 파일 인크루트시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용됨
- body onload 이벤트와 같이 body에서 onload 이벤트를 쓰게 되면 모든 window.load() 가 실행되지 않는 현상이 발생함
 

* window > document
- document는 window의 자식 객체
  (window의 자식 객체 : document, self, navigator, screen, forms, history, location etc..)
- document : html의 요소들이나 속성들에 접근할 시 사용하는 객체

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
    console.log("console> window.onloade() 첫번째");
});
 
$(window).load(function() {
    console.log("console> window.onload() 두번째");
});
 
$(document).ready(function() {
    console.log("console> document.ready() 첫번째");
});
 
$(document).ready(function() {
    console.log("console> document.ready() 두번째");
});
</script>
 
</head>
<body>
 
</body>
</html>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[script] 입력창 글자수 제한  (0) 2023.07.03
jquery keyup, keydown, keypress 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
반응형

화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인

 

Typical Media Query Breakpoints

https://jsfiddle.net/mill01/1jedsc76/8/

 

media queries - JSFiddle - Code Playground

 

jsfiddle.net

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

.example {
  padding: 20px;
  color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}
</style>
<script>
$( window ).resize(function() {
   //창크기 변화 감지
   var windowWidth = $( window ).width();
   $("#width_size").val(windowWidth);
});
</script>
</head>
<body>

<h2>Typical Media Query Breakpoints</h2>
<input type="text" id="width_size" >
<p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>

</body>
</html>

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
[ javascript ] CDATA 사용 이유  (0) 2023.05.08
반응형

KeyboardEvent keyCode

<!DOCTYPE html>
<html>
<body>
<h1>Keyboard Events</h1>
<h2>The keyCode Property</h2>

<p>Press a keyboard key in the input field and display the value:</p>

<input type="text" size="40"   onkeypress="myFunction(event)">

<p id="demo"></p>
<p>The keyCode property is deprecated, use the key property instead.</p>

<script>
function myFunction(event) {
  let value= event.which;
  document.getElementById("demo").innerHTML = value;
}  
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#inp").keypress(function(e){
		//검색어 입력 후 엔터키 입력하면 조회버튼 클릭
		if(e.keyCode && e.keyCode == 13){
			$("#btn").trigger("click");
			return false;
		}
		//엔터키 막기
		if(e.keyCode && e.keyCode == 13){
			  e.preventDefault();	
		}
	});
	$("#btn").click(function(){
		alert("이벤트 감지");
	});
});
</script>
<input type="text" class="form-control input-sm" id="inp" name="inp">
<button type="button" class="btn btn-primary btn-sm" id="btn" name="btn">조회</button>
</body>
</html>

 

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
[ javascript ] CDATA 사용 이유  (0) 2023.05.08
9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
반응형

https://gojs.net/latest/index.html

 

GoJS - Build Interactive Diagrams for the Web

GoJS A Web Framework for Rapidly Building Interactive Diagrams

gojs.net

GoJS in 12 Minutes: JavaScript Diagramming Library Tutorial

 

https://www.youtube.com/watch?v=7cfHF7yAoJE 

 

 

GoJS Samples  https://gojs.net/latest/samples/

 

GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software

 

gojs.net

Our samples demonstrate how to build several Diagram types and showcase specific features and layouts. You can use the HTML and JavaScript in these samples as the starting point for your application.

If you are done looking around and are ready to experiment with GoJS, read the getting started tutorial.

There is a React sample on GitHub at: gojs-react-basic, and an Angular sample at: gojs-angular-basic. See more at Projects.

If you are looking for examples of a particular GoJS method or property, you can search the source code of all samples and extensions and documentation on GitHub:

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[ javascript ] CDATA 사용 이유  (0) 2023.05.08
9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[jQuery] Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)  (0) 2022.10.31
Masonry - Cascading grid layout library  (0) 2022.10.12
How TO - Create a Draggable HTML Element  (0) 2022.10.06
반응형

1. CheckBox 체크

$('#ckBox').prop('checked',true);
$('input:checkbox[name="네임"]').prop('checked',true);

첫 번째 라인과 같이 체크박스의 id를 지정해서 체크하여도 되고, 두 번째 라인과 같이 name, id 등을 선택하여 체크할 수 있다.

true로 설정하면 체크가 되고, false로 설정하면 체크가 해제 된다.

2. CheckBox 체크여부 확인

$('#ckBox').is(':checked');

.is(':checked') 를 이용하여 체크되어 있는지 아닌지를 알 수 있다.

(true : 체크되어 있음, false : 체크되어 있지 않음)

3. CheckBox 전체 체크

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

위와 같은 checkbox가 있을 때, 전체 체크하는 방법은 간단하다.

	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});

allCk 체크박스를 클릭 했을 때, allCk가 체크되어 있다면 checkbox를 전부 다 true로 해주면 된다.

 

 

테스트 소스

<!DOCTYPE html>
<html>
<head>
	<script src="./jquery-3.4.1.min.js"></script>
</head>

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

<button type="button" id="btn1">1번 체크/언체크</button>
<button type="button" id="btn2">2번 체크/언체크</button>
<button type="button" id="btn3">3번 체크/언체크</button>
<script>
	$('#btn1').click(function(){
		var checked = $('#ck1').is(':checked');
		$('#ck1').prop('checked',!checked);
	});
	
	$('#btn2').click(function(){
		var checked = $('#ck2').is(':checked');
		$('#ck2').prop('checked',!checked);
	});
	
	$('#btn3').click(function(){
		var checked = $('#ck3').is(':checked');
		$('#ck3').prop('checked',!checked);
	});
	
	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});
</script>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
Masonry - Cascading grid layout library  (0) 2022.10.12
How TO - Create a Draggable HTML Element  (0) 2022.10.06
“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05

+ Recent posts

티스토리툴바