15 멋진 자바 스크립트 샘플 코드

작성자 :
  • 주요 기사
  • 업데이트 : Mar 06, 2012

JavaScript에 대한 간략한 개요

JavaScript는 웹 사이트 상호 작용을 개선하고, 정보를 확인하고 / 또는 웹 사이트 전망을 개선하기 위해 요즘 온라인 어디에서나 사용됩니다. 자바 스크립트는 1995에 처음 등장했으며 그 이후로 널리 받아 들여지고 사용되는 방식에있어 많은 발전을 이루었습니다. JavaScript에서 사용 된 구문은 C의 영향을 크게받습니다. 그러나 Java, Pearl, Python 및 Scheme도 그 역할을했습니다.

JavaScript 란 무엇입니까?

오래된 YouTube 클립이 질문에 잘 대답합니다. 여기에 간다.

초급 팁 : 당신이 알아야 할 것은 무엇입니까?

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

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

또한 JavaScript가 잘못된 방식으로 사용될 경우 실제로 JavaScript가 재앙으로 이어질 것이라는 점을 이해하는 것이 중요합니다. 잘못 구성된 자바 스크립트는 웹 사이트를 느리게하고 전체 사이트 탐색을 손상시킵니다. 이것은 차례 차례로 (나쁜 사용자 경험 때문에) 방문자의 반환 비율뿐만 아니라 검색 엔진 순위 (느린 웹 사이트 응답율 때문에)에 영향을 미친다. 내 사건의 유효성을 확인하려면 시청자의 입장을 고려해야합니다. 방문한 웹 사이트가 천천히로드 된 경우 탐색하기가 어려우며 전반적으로 매력적이지 않습니다. 사이트로 돌아가시겠습니까? 나는하지 않을 것이다.

다음은 웹 사이트에 JavaScript를 추가 할 때 고려해야 할 몇 가지 사항입니다.

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

아니, 나는이 점들로 너를 놀라게하려고하지 않고있다. 사실 웹 사이트에서 자바 스크립트를 사용하는 것이 두려워하지 않아야합니다. 이는 언급 한 바와 같이 다수가 사용하는 것으로서 이점이 있습니다. 여기에서 다루려고하는 요점은 불필요 할 때 JavaScript 기능을 사이트에 계속 추가하지 않는 것입니다. 일부 사이트는 나머지 JavaScript보다 더 많은 JavaScript가 필요합니다. 어떤 사람들은 단지 필요로하기 때문에 - 단지 한 사이트가하고 있기 때문에 당신이 똑같이해야한다는 것을 의미하지는 않습니다.

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

자바 스크립트 스 니펫

자, 여기에 온 것들을 생각해 보도록하겠습니다. 기능이나 외관에서 사이트를 향상시킬 15 JavaScript 스 니펫 목록은 다음과 같습니다. 코드는 head 및 body 또는 .js 파일의 두 섹션으로 나뉩니다. 섹션 제목이 주어지지 않으면 그 특정 스 니펫에는 필요하지 않습니다.

HTML5 비디오 이해하기

빠른 샘플

<script type="text/javascript">

function understands_video () {
return !! document.createElement ( 'video'). canPlayType; // 부울
}

if (! understands_video ()) {
// 이전 브라우저 또는 IE 여야합니다.
// 어쩌면 숨기기 사용자 정의와 같은 작업을 수행 할 수 있습니다.
// HTML5 컨트롤. 또는 무엇이든…
videoControls.style.display = 'none';
}

</ 스크립트>

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

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

자바 스크립트 쿠키

빠른 샘플

<script type="text/javascript">

/ **

지정된 이름과 값으로 Cookie를 설정합니다.

*

* name 쿠키의 이름

* value 쿠키의 값

* [만료] 쿠키의 만료 날짜 (기본값 : 현재 세션 끝)

* [경로] 쿠키가 유효한 경로 (기본값 : 호출 문서의 경로)

* [도메인] 쿠키가 유효한 도메인

* (기본값 : 호출 문서의 도메인)

* [secure] 쿠키 전송에 a가 필요한지 여부를 나타내는 부울 값입니다.

* 안전한 전송

*/

함수 setCookie (이름, 값, 만료, 경로, 도메인, 보안) {

document.cookie = name + "="+ 이스케이프 (값) +

(만료)? "; 만료 ="+ 만료 .toGMTString () : "") +

(? (경로) "; 경로 ="+ 경로 : "") +

(도메인)? "; 도메인 ="+ 도메인 : "") +

(() 확보 "; 확보": "");

}

</ 스크립트>

<script type="text/javascript">

/ **

* 지정된 쿠키의 값을 가져옵니다.

*

* name 원하는 쿠키의 이름.

*

* 지정된 쿠키 값을 포함하는 문자열을 반환합니다.

쿠키가 존재하지 않으면 null.

*/

function getCookie (name) {

var dc = document.cookie;

var 접두사 = 이름 + "=";

var begin = dc.indexOf ( ";"+ prefix);

if (begin == -1) {

begin = dc.indexOf (prefix);

if (begin! = 0)가 null을 반환하면;

} 다른 {

시작 + = 2;

}

var end = document.cookie.indexOf ( ";", begin);

if (end == -1) {

끝 = dc.length;

}

unescape를 돌려 준다 (dc.substring (begin + prefix.length, end));

}

</ 스크립트>

<script type="text/javascript">

/ **

* 지정된 쿠키를 삭제합니다.

*

* 이름 쿠키의 이름

* [경로] 쿠키의 경로 (쿠키를 만드는 데 사용 된 경로와 동일해야 함)

* 쿠키의 [도메인] 도메인 (쿠키를 만드는 데 사용 된 도메인과 같아야 함)

*/

함수 deleteCookie (이름, 경로, 도메인) {

if (getCookie (name)) {

document.cookie = 이름 + "="+

(? (경로) "; 경로 ="+ 경로 : "") +

(도메인)? "; 도메인 ="+ 도메인 : "") +

"; 만료 = Thu, 01-Jan-70 00 : 00 : 01 GMT";

}

}

</ 스크립트>

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

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

이미지 미리로드

빠른 샘플

<script type="text/javascript">

var images = new Array ();

function preloadImages () {

for (i = 0; i <preloadImages.arguments.length; i ++) {

images [i] = 새로운 이미지 ();

images [i] .src = preloadImages.arguments [i];

}

}

preloadImages ( "logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

</ 스크립트>

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

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

전자 메일 유효성 검사

빠른 샘플

머리:

<script type="text/javascript">
function validateEmail (theForm) {
== w + ([.-] w +) * (.w {2,3}) + $ /. test (theForm.email-id.value)) {
반환 (TRUE);
}
경고 ( "잘못된 전자 메일 주소! 다시 입력하십시오!");
반환 (거짓);
}
</ 스크립트>

신체:

<form onSubmit = "return validateEmail (this);" action = "">
이메일 주소:
<input type = "text"name = "emailid"/>
<input type = "submit"value = "Submit"/>
<입력 유형 = "재설정"값 = "재설정"/>
</ 양식>

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

이 스 니펫은 양식에 올바른 형식의 전자 메일 주소가 입력되었는지 여부를 확인합니다. 전자 메일 주소가 진짜임을 보장 할 수는 없으므로 JavaScript로 확인할 방법이 없습니다.

오른쪽 클릭 없음

빠른 샘플

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

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

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

무작위 따옴표 표시

빠른 샘플

머리:

<script type="text/javascript">
writeRandomQuote = function () {
var quotes = new Array ();
따옴표 [0] = "행동은 지성의 진정한 척도입니다.";
따옴표 [1] = "야구는 귀뚜라미보다 빨리 끝났습니다.";
따옴표 [2] = "모든 목표, 모든 행동, 모든 생각, 경험 한 모든 느낌, 그것이 의식적으로 또는 무의식적으로 알려 졌든간에, 마음의 평화 수준을 높이려는 시도입니다.";
따옴표 [3] = "좋은 머리와 좋은 마음은 언제나 강력한 조합입니다.";
var rand = Math.floor (Math.random () * quotes.length);
document.write (따옴표 [rand]);
}
writeRandomQuote ();
</ 스크립트>

신체:

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

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

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

이전 / 다음 링크

빠른 샘플

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

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

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

페이지 북마크하기

빠른 샘플

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com','Your Site Name')"> 즐겨 찾기에 추가 </a>

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

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

간편한 인쇄 페이지 링크

빠른 샘플

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

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

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

서식있는 날짜 표시

빠른 샘플

머리:

<script type="text/javascript">
function showDate () {
var d = 새 날짜 ();
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 type = "text / javascript"> showDate (); </ script>

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

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

쉼표 구분 기호

빠른 샘플

머리:

<script type="text/javascript">
function 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 (임시, "+", "+");
}
var out = return n2 + n3;
document.write (출력);
}
</ 스크립트>

신체:

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

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

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

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

빠른 샘플

<script type="text/javascript">

<! -

var viewportwidth;

var 뷰포트;

// 더 표준을 따르는 브라우저 (mozilla / netscape / opera / IE7)는 window.innerWidth와 window.innerHeight를 사용합니다.

if (typeof window.innerWidth! = 'undefined')

{

viewportwidth = window.innerWidth,

뷰포트 높이 = window.innerHeight

}

// 표준 준수 모드의 IE6 (즉, 문서의 첫 번째 줄로 유효한 doctype 포함)

else if (typeof document.documentElement! = '정의되지 않음'

&& 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 type="text/javascript">

setTimeout ( "window.location.href =

'http://walkerwines.com.au/' ", 5 * 1000);

</ 스크립트>

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

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

iPhone 감지

견본

<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";

}

}

</ 스크립트>

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

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

상태 표시 줄에 메시지 인쇄

빠른 샘플

<script language = "javascript"type = "text / javascript">
<! -
window.status = "<당신의 메시지 입력>";
/ / ->
</ 스크립트>

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

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

WHSR 게스트의 기사

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