웹 사이트를위한 15 무료 JavaScript 샘플 스 니펫

작성자 :
  • 주요 기사
  • 업데이트 : 9 월 23, 2019

JavaScript는 요즘 온라인 어디에서나 사용 – 웹 사이트 상호 작용을 개선하고 정보를 검증하며 웹 사이트 전망을 향상시킵니다.

JavaScript는 1995에 처음 나타 났으며 그 이후로 받아 들여지고 사용되는 방식에서 먼 길을 왔습니다. JavaScript에 사용 된 구문은 C의 영향을 많이 받았습니다. 그러나 Java, Pearl, Python 및 Scheme도 그 역할을했습니다.

JavaScrip 초보자 팁 : 알아야 할 사항

우선, 알아야 할 몇 가지 기본 사항은 다음과 같습니다.

  • 브라우저에서 자바 스크립트를 끌 수 있습니다.
  • 페이지가로드 될 때마다 JavaScript가 실행됩니다.
  • JavaScript가 느린 인터넷 연결 로딩에 시간이 걸림
  • 자바 스크립트는 여전히 캐시 된 페이지에서 실행됩니다.
  • 웹 페이지 내에서 또는 외부에서 .js 파일로 자바 스크립트를 호스팅 할 수 있습니다.
  • 자바 스크립트는 자바와 완전히 다릅니다.

JavaScript가 잘못된 방식으로 사용될 때 실제로 재앙으로 이어질 것임을 이해하는 것도 중요합니다.

잘못 구성되고 느슨하게 코딩 된 JavaScript는 웹 사이트 속도를 저하시키고 전체 사이트 탐색을 손상시킵니다. 이로 인해 방문자의 수익률 (나쁜 사용자 경험으로 인한) 및 검색 엔진 순위 (웹 사이트 응답 속도 저하 및 봇 크롤링)로 인해 영향을받습니다. 여기에서 내 사례를 확인하려면 시청자의 입장에서 확인하십시오. 방문한 웹 사이트가 느리게로드되고 탐색하기가 어려우며 전반적으로 매력적이지 않은 경우 사이트로 돌아가시겠습니까? 나는하지 않을 것입니다.

아래는 JavaScript를 추가 할 때 고려해야 할 작은 목록입니다. 귀하의 웹 사이트.

  • 사이트가 제대로 작동하려면 JavaScript가 필요합니까?
  • 자바 스크립트가 차단 된 경우 사이트의 모습은 어떻습니까?
  • JavaScript가 서버 성능에 해를 미칠 수 있습니까?
  • 자바 스크립트를 추가하면 원하는 방향으로 사이트가 이동하게됩니까?

아니요,이 점들로 당신을 놀라게하려고하지 않습니다.

사실, 두려워하지 마십시오 웹 사이트에서 JavaScript를 사용하십시오 그것은 많은 이점을 제공하고 언급했듯이 대다수에 의해 사용됩니다. 여기서 살펴 보려는 핵심은 사이트에 JavaScript 기능을 불필요하게 추가하지 않는 것입니다. 일부 사이트는 나머지 사이트보다 더 많은 JavaScript가 필요합니다. 일부 사이트는 그다지 필요하지 않습니다. 하나의 사이트에서 수행한다고해서 동일한 작업을 수행해야한다는 의미는 아닙니다.

공짜 : 귀하의 웹 사이트를위한 15 멋진 자바 스크립트 스 니펫

자, 여기에 온 것들을 살펴 보자. 아래는 15 JavaScript 스 니펫 목록으로 기능이나 모양면에서 사이트를 향상시킨다. 코드는 head와 body 또는 .js 파일의 두 섹션으로 나뉩니다. 섹션 제목이 없으면 해당 특정 스 니펫에 필요하지 않습니다.

1. HTML5 비디오 이해

빠른 샘플

<script type = "text / javascript"> 함수 understands_video () {return !! document.createElement ( 'video'). canPlayType; // 부울} if (! understands_video ()) {// 이전 브라우저 또는 IE 여야합니다. // HTML5 컨트롤 숨기기와 같은 기능을 수행 할 수 있습니다. 또는 무엇이든 ... videoControls.style.display = 'none'; } </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 작은 발췌 문장은 귀하의 웹 사이트가 브라우저가 지원할 수없는 비디오를 표시하지 못하게하여 대역폭과 처리 능력을 절약합니다.

2. 자바 스크립트 쿠키

빠른 샘플

<script type = "text / javascript"> / ** * 주어진 이름과 값으로 쿠키를 설정합니다. * * 이름 쿠키 이름 * 값 쿠키 값 * [만료] 쿠키 만료 날짜 (기본값 : 현재 세션 종료) * [경로] 쿠키가 유효한 경로 (기본값 : 호출 문서 경로) * [ domain] 쿠키가 유효한 도메인 * (기본값 : 호출 문서의 도메인) * [secure] 쿠키 전송에 * 보안 전송이 필요한지 여부를 나타내는 부울 값 * / 함수 setCookie (이름, 값, 만료, 경로, 도메인, 보안) {document.cookie = 이름 + "="+ 이스케이프 (값) + ((만료)? "; expires ="+ expires.toGMTString () : "") + ((경로)? "; path ="+ 경로 : "") + ((도메인)? "; domain ="+ 도메인 : "") + ((보안)? "; 보안": ""); } </ script> <script type = "text / javascript"> / ** * 지정된 쿠키의 값을 가져옵니다. * * name 원하는 쿠키의 이름입니다. * * 지정된 쿠키 값을 포함하는 문자열을 반환합니다. * 또는 쿠키가 없으면 null을 반환합니다. * / 함수 getCookie (이름) {var dc = document.cookie; var 접두사 = 이름 + "="; var begin = dc.indexOf ( ";"+ 접두사); if (begin == -1) {begin = dc.indexOf (접두사); if (begin! = 0)는 null을 반환합니다. } else {begin + = 2; } var end = document.cookie.indexOf ( ";", 시작); if (end == -1) {end = dc.length; } 반환 unescape (dc.substring (begin + prefix.length, end)); } </ script> <script type = "text / javascript"> / ** * 지정된 쿠키를 삭제합니다. * * 쿠키 이름 * 쿠키의 [경로] 경로 (쿠키를 만드는 데 사용 된 경로와 동일해야 함) * 쿠키의 [도메인] 도메인 (쿠키를 만드는 데 사용 된 도메인과 동일해야 함) * / function deleteCookie ( 이름, 경로, 도메인) {if (getCookie (name)) {document.cookie = 이름 + "="+ ((경로)? "; path ="+ 경로 : "") + ((도메인)? "; 도메인 = "+ 도메인 :" ") +"; 만료 = 목, 01-Jan-70 00 : 00 : 01 GMT "; }} </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫은 약간 길지만 매우 유용하며 사이트의 정보를 시청자의 컴퓨터에 저장 한 다음 다른 시점에 읽을 수 있습니다. 이 스 니펫은 다양한 작업을 수행하는 여러 가지 방법으로 사용될 수 있습니다.

3. 이미지 미리로드

빠른 샘플

<script type = "text / javascript"> var images = new Array (); 함수 preloadImages () {for (i = 0; i <preloadImages.arguments.length; i ++) {images [i] = new Image (); images [i] .src = preloadImages.arguments [i]; }} preloadImages ( "logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"); </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫을 사용하면 사이트의 일부만 표시 할 때 사이트가 그 불편을 겪을 수 없습니다. 이것은 나쁜 것처럼 보일뿐만 아니라 비전문가이기도합니다. preloadImages 섹션에 이미지를 추가하기 만하면 롤 준비가 완료됩니다.

4. 이메일 검증

빠른 샘플

머리:

<script type = "text / javascript"> 함수 validateEmail (theForm) {if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } alert ( "잘못된 이메일 주소! 다시 입력 해주세요!."); 귀국 (거짓); } </ script>

신체: <form onSubmit = "return validateEmail (this);" action = ""> 이메일 주소 : <input type = "text"name = "emailid"/> <input type = "submit"value = "Submit"/> <input type = "reset"value = "Reset" /> </ form>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫은 올바른 형식의 이메일 주소가 양식에 입력되었는지 검증하며, 이메일 주소가 실제임을 보증 할 수 없으며 JavaScript로이를 확인할 수있는 방법이 없습니다.

5. 오른쪽 클릭 없음

빠른 샘플

<script type = "text / javascript"> 함수 f1 () {if (document.all) {return false; }} function f2 (e) {if (document.layers || (document.getElementById &! document.all)) {if (e.which == 2 || e.which == 3) {return false; }}} if (document.layers) {document.captureEvents (Event.MOUSEDOWN); document.onmousedown = f1; } else {document.onmouseup = f2; document.oncontextmenu = f1; } document.oncontextmenu = 새 함수 ( "return false"); </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫은 사용자가 내 페이지를 마우스 오른쪽 버튼으로 클릭 할 수 없게합니다. 이로 인해 평범한 사용자는 귀하의 사이트에서 이미지 나 코드를 빌릴 수 없습니다.

6. 임의의 따옴표 표시

빠른 샘플

머리: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "액션은 지능의 실제 척도입니다."; quotes [1] = "야구는 더 빨리 끝나는 크리켓보다 훨씬 유리합니다."; quotes [2] = "의식적이든 무의식적이든 상관없이 모든 목표, 모든 행동, 모든 생각, 경험하는 모든 느낌은 마음의 평안을 높이려는 시도입니다."; quotes [3] = "좋은 머리와 좋은 마음은 항상 강력한 조합입니다."; var rand = Math.floor (Math.random () * quotes.length); document.write (quotes [rand]); } writeRandomQuote (); </ script>

신체: <script type = "text / javascript"> writeRandomQuote (); </ script>

자바 스크립트 스 니펫은 무엇을합니까?

좋아, 이것은 모든 사이트가 사용하는 스 니펫은 아니지만 무작위 따옴표 이상을 표시하는 데 사용될 수 있습니다. 원하는 내용으로 따옴표로 묶은 내용을 변경하고 임의의 이미지 또는 텍스트를 사이트의 어느 곳에 나 표시 할 수 있습니다.

7. 이전 / 다음 링크

빠른 샘플

<a href="javascript:history.back(1)"> 이전 페이지 </a> | <a href="javascript:history.back(-1)"> 다음 페이지 </a>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫은 기사 또는 자습서에 여러 페이지가있는 경우 유용합니다. 그것은 사용자가 쉽게 페이지 사이에서 탐색 할 수 있습니다. 그것은 또한 자원 관점에서 작고 가벼운 무게입니다.

8. 페이지 북마크

빠른 샘플

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', '귀하의 사이트 이름')"> 즐겨 찾기에 추가 </a>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫을 통해 사용자는 쉽게 페이지를 북마크에 추가 할 수 있습니다. 그들이해야 할 일은 링크를 클릭하는 것입니다. 시청자의 전반적인 경험을 향상시킬 수있는 이와 같은 작은 기능.

9. 쉬운 인쇄 페이지 링크

빠른 샘플

<a href="javascript:window.print();"> 페이지 인쇄 </a>

자바 스크립트 스 니펫은 무엇을합니까?

이 작은 링크를 사용하면보기를 통해 페이지를 쉽게 인쇄 할 수 있습니다. 브라우저에서 이미 설정 한 빠른 인쇄 기능을 사용하고 클릭 할 때까지 아무런 리소스도 사용하지 않습니다.

10. 형식화 된 날짜 표시

빠른 샘플

머리: <script type = "text / javascript"> 함수 showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // 월은 0부터 시작합니다. var curr_year = d.getFullYear (); document.write (curr_date + "-"+ curr_month + "-"+ curr_year); } </ script>

신체: <script type = "text / javascript"> showDate (); </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫을 사용하면 웹 페이지의 어느 곳에서나 현재 날짜를 표시 할 수 있으며 업데이트 할 필요가 없습니다. 단순히 제자리에두고 잊어 버리십시오.

11. 쉼표 분리기

빠른 샘플

머리: <script type = "text / javascript"> 함수 addCommas (num) {num + = ''; var n1 = num.split ( '.'); var n2 = n1 [0]; var n3 = n1.length> 1? '.' + n1 [1] : ''; var temp = / (d +) (d {3}) /; while (temp.test (n2)) {n2 = n2.replace (temp, ''+ ','+ ''); } var out = return n2 + n3; document.write (out); } </ script>

신체: <script type = "text / javascript"> addCommas ( "4550989023"); </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫은 주로 숫자를 사용하는 사이트에서 주로 사용됩니다. 이 발췌 문장은 귀하의 전화 번호가 전체적으로 동일하게 유지되도록합니다. 당신이해야 할 일은 번호를 추가하고 거기에있는 번호를 귀하의 번호로 대체하고자하는 본문 라인을 복사하는 것입니다.

12. 브라우저의 표시 영역 가져 오기

빠른 샘플

<script type = "text / javascript"> <!-var viewportwidth; var viewportheight; // 표준 호환 브라우저 (mozilla / netscape / opera / IE7)가 많을수록 window.innerWidth 및 window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / 표준 호환 모드 (즉, 문서의 첫 번째 줄로 유효한 doctype이있는)의 IE6 else if (typeof document.documentElement! = 'undefined'&& typeof document.documentElement.clientWidth! = 'undefined'&& document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // IE 이전 버전 {viewportwidth = document.getElementsByTagName ( 'body') [0] .clientWidth, viewportheight = document.getElementsByTagName ( 'body') [0] .clientHeight} document.write ( '<p> 뷰포트 너비는'+ viewportwidth + 'x'+ viewportheight + '</ p>'); //-> </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫을 사용하면보기 브라우저에서 표시 영역의 너비와 높이를 가져올 수 있습니다. 이렇게하면 디자이너가 사용자의 브라우저 창의 크기에 따라 다른 디스플레이를 만들고 사용할 수 있습니다.

13. 선택적 지연으로 리디렉션

빠른 샘플

<script type = "text / javascript"> setTimeout ( "window.location.href = 'http://walkerwines.com.au/'", 5 * 1000); </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫을 통해 시청자를 다른 페이지로 리디렉션 할 수 있으며 지연을 설정할 수 있습니다. 이 스 니펫의 사용은 매우 자명하며 벨트에 넣는 데 매우 유용한 도구입니다.

14. 아이폰 감지

견본

<script type = "text / javascript"> if ((navigator.userAgent.match (/ iPhone / i)) || (navigator.userAgent.match (/ iPod / i))) {if (document.cookie.indexOf ( "iphone_redirect = false") == -1) {window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR"; }} </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 스 니펫을 사용하면 시청자가 iPhone 또는 iPod에 있는지 여부를 감지하여 다른 콘텐츠를 표시 할 수 있습니다. 이 스 니펫은 모바일 시장의 규모와 함께 계속 성장할 것입니다.

15. 상태 표시 줄에 메시지 인쇄

빠른 샘플

<script language = "javascript"type = "text / javascript"> <!-window.status = "<TYPE Your MESSAGE>"; //-> </ script>

자바 스크립트 스 니펫은 무엇을합니까?

이 작은 스 니펫을 사용하면 상태 표시 줄에 메시지를 인쇄 할 수 있습니다. 사용자의 시선을 사로 잡을 지역에 최근 또는 중요한 뉴스를 표시 할 수 있습니다.

WHSR 게스트 소개

이 기사는 게스트 기여자가 작성했습니다. 아래의 저자보기는 전적으로 독자적이며 WHSR의 견해를 반영하지 않을 수 있습니다.