반응형
반응형

입력창 글자수 제한

<div class="form-group col-12" >
  <div class="textLengthWrap">
    <p class="textCount">0자</p>
    <p class="textTotal">/200자</p>
  </div>
  <textarea style="height:300px; resize: none;" maxlength="200" placeholder="텍스트를 입력하세요.">
  </textarea>	
</div>

$('#textBox').keyup(function (e) {
	let content = $(this).val();
    
    // 글자수 세기
    if (content.length == 0 || content == '') {
    	$('.textCount').text('0자');
    } else {
    	$('.textCount').text(content.length + '자');
    }
    
    // 글자수 제한
    if (content.length > 200) {
    	// 200자 부터는 타이핑 되지 않도록
        $(this).val($(this).val().substring(0, 200));
        // 200자 넘으면 알림창 뜨도록
        alert('글자수는 200자까지 입력 가능합니다.');
    };
});
반응형
저작자표시 비영리

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

[jQuery] URL에서 해시 값 가져오기  (0) 2023.07.04
7 JavaScript Web APIs to build Futuristic Websites you didn’t know  (0) 2023.07.04
jquery keyup, keydown, keypress 차이  (0) 2023.07.03
document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
반응형

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
반응형

월의 마지막 날짜 구하기

SELECT EOMONTH('2020-09-09') AS result

SELECT DATEADD (DAY, -1, DATEADD (MONTH, DATEDIFF (MONTH, 0, '2020-09-09') + 1, 0)) AS result


SELECT DATEADD(MONTH, DATEDIFF(MONTH, 0, '2020-09-09') + 1, 0) - 1 AS result
반응형
저작자표시 비영리

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

[MSSQL] 랜덤 (무작위) Select  (0) 2023.07.18
[MSSQL] IF…ELSE IF…ELSE  (0) 2023.07.14
[MSSQL] 날짜차이, 이전 행 정보 LAG LEAD  (0) 2023.07.03
[MSSQL] identity 를 설정한 칼럼에 insert 하기  (0) 2023.06.19
MSSQL 탭( char(9) )과 엔터값( char(10) + char(13) ) 찾아보기  (0) 2023.06.09
반응형

DATEDIFF, DATEPART

SELECT DATEDIFF(DAY,   '2021-06-12', '2021-07-13') AS [일차이]
     , DATEDIFF(MONTH, '2021-06-12', '2021-07-13') AS [개월차이] 
     , DATEDIFF(YEAR,  '2021-06-12', '2021-07-13') AS [년차이]

 

LAG, LEAD

https://learn.microsoft.com/en-us/sql/t-sql/functions/lag-transact-sql?view=sql-server-ver16 

 

LAG (Transact-SQL) - SQL Server

LAG (Transact-SQL)

learn.microsoft.com

SELECT empno  
     , ename
     , job
     , sal
     , LAG(sal) OVER(PARTITION BY job ORDER BY job, sal) AS sal_prev
     , LEAD(sal) OVER(PARTITION BY job ORDER BY job, sal) AS sal_next
  FROM emp
 WHERE job IN ('MANAGER', 'ANALYST', 'SALESMAN')
 ORDER BY job, sal
 
 
 CREATE TABLE T (a INT, b INT, c INT);   
GO  
INSERT INTO T VALUES (1, 1, -3), (2, 2, 4), (3, 1, NULL), (4, 3, 1), (5, 2, NULL), (6, 1, 5);   
  
SELECT b, c,   
    LAG(2*c, b*(SELECT MIN(b) FROM T), -c/2.0) OVER (ORDER BY a) AS i  
FROM T;

https://learn.microsoft.com/en-us/sql/t-sql/functions/lead-transact-sql?view=sql-server-ver16 

 

LEAD (Transact-SQL) - SQL Server

LEAD (Transact-SQL)

learn.microsoft.com

CREATE TABLE T (a INT, b INT, c INT);   
GO  
INSERT INTO T VALUES (1, 1, -3), (2, 2, 4), (3, 1, NULL), (4, 3, 1), (5, 2, NULL), (6, 1, 5);   
  
SELECT b, c,   
    LEAD(2*c, b*(SELECT MIN(b) FROM T), -c/2.0) OVER (ORDER BY a) AS i  
FROM T;
반응형
저작자표시 비영리

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

[MSSQL] IF…ELSE IF…ELSE  (0) 2023.07.14
[MSSQL] 월의 마지막 날짜 구하기  (0) 2023.07.03
[MSSQL] identity 를 설정한 칼럼에 insert 하기  (0) 2023.06.19
MSSQL 탭( char(9) )과 엔터값( char(10) + char(13) ) 찾아보기  (0) 2023.06.09
[MSSQL] 정렬조건없이 순번 매기기 , row_number() rank, dense_rank  (0) 2023.06.05
반응형

구글도 캐나다에서 '뉴스 서비스' 중단

https://www.cbc.ca/news/canada/google-facebook-canadian-news-1.6894029

 

When will Canadian news disappear from Google, Facebook? What the Bill C-18 rift means for you | CBC News

How will you get the news now? That’s a question many Canadians may be asking after tech companies Google and Meta, which owns the social media giants Facebook and Instagram, vowed to remove links to Canadian journalism.

www.cbc.ca

이제 어떻게 소식을 접할 수 있습니까?

그것은 많은 캐나다인들이 소셜 미디어 거대 기업인 페이스북과 인스타그램을 소유하고 있는 구글과 메타가 캐나다 저널리즘에 대한 링크를 제거하겠다고 맹세한 후에 물어볼 수 있는 질문일 것입니다. 

Bill C-18로도 알려진 온라인 뉴스법 에 대한 보복으로 뉴스 콘텐츠가 기술 회사의 플랫폼에서 공유될 때 "공정한 보상"을 위해 미디어 매체와 계약을 체결하게 됩니다.

이것이 광고 수익이 감소한 업계를 돕는 최선의 방법이라는 데 모든 사람이 동의하는 것은 아닙니다. 그러나 Bill C-18을 둘러싼 싸움의 중심에는 많은 캐나다인과 마찬가지로 Google과 Facebook에 의존하여 중요한 저널리즘을 찾는 일반 뉴스 소비자가 있습니다. 

다음은 온라인 뉴스법에 대해 알아야 할 사항과 뉴스 소비 습관을 변경해야 하는 경우와 시기입니다.

반응형
저작자표시 비영리

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

캐나다, 페이스북과 인스타그램 광고 중단  (0) 2023.07.11
[VSCODE] 확장프로그램 - indent-rainbow  (0) 2023.07.07
github 프로필을 README.md로 만들기  (0) 2023.06.16
github - https://demolab.com/  (0) 2023.06.16
“애플, 더 빠른 M3 15인치 맥북 에어 이미 테스트 중”  (0) 2023.06.14

+ Recent posts

티스토리툴바