ตัวอย่างตัวอย่าง JavaScript CoolNumber 15

บทความที่เขียนโดย:
  • บทความที่แนะนำ
  • อัปเดต: มี.ค. 06, 2012

ภาพรวมอย่างรวดเร็วใน JavaScript

JavaScript is used everywhere online these days – to improve website interactivity, to validate information, and/or to improve a website outlooks. JavaScript first appeared in 1995 and has come a long way since then in terms of being accepted and how it is used. The syntax used in JavaScript was strongly influenced by C; but Java, Pearl, Python, and Scheme also played its part too.

JavaScript คืออะไร?

มีคลิป YouTube เก่า ๆ ตอบคำถามดีๆ นี่ไป

เคล็ดลับการเริ่มต้นใช้งาน: สิ่งที่คุณต้องการทราบ

สำหรับผู้เริ่มต้นข้อมูลพื้นฐานบางอย่างที่คุณต้องรู้ ได้แก่

  • JavaScript can be turned off in the browser
  • JavaScript will run each time a page is loaded
  • JavaScript takes time to load on a slow Internet connection
  • JavaScript is still ran from cached pages
  • You can host JavaScript within a web page or externally from a .js file
  • JavaScript is completely different than Java

It is also important to understand that JavaScript will actually lead to disaster when it’s used in a wrong way. Poorly configured and sloppy coded JavaScripts will slow your website and damage the overall site navigation. This in turn affect the return rate of your visitors (due to bad user experience) as well as search engine rankings (due to slow website response rates). To help validate my case here, put yourself in the shoes of a viewer. If a website you were visiting loaded slowly, was difficult to navigate, and in overall, unappealing – would you return to the site? I wouldn’t.

Below is a small list of things to think about when adding JavaScript to your website.

  • Is JavaScript required for the site to function properly?
  • What will the site look like if the JavaScript was blocked?
  • Will the JavaScript harm the server performance?
  • Will adding the JavaScript help move your site in the direction you want it to go?

No, I am not trying to scare you away with these points. In fact, don’t be afraid to use JavaScript on your websites as it provides tons benefits and, as mentioned, it’s used by the majorities. The key point I am trying to get across here is don’t just keep adding JavaScript features to a site when they are unnecessary. Some sites are will need more JavaScript than the rest; some just need less – Just because one site is doing it doesn’t mean you should do the same.

Freebies: 15 Cool JavaScript Snippets For Your Website

JavaScript Snippet

Now, let’s get down to the stuffs that you came here for – below is a list of 15 JavaScript snippets that will enhance your site in either functionality or appearance. The code will be broken down into two sections, the head and body or .js file. If no section title is given then it is not needed for that particular snippet.

Understanding HTML5 Video

ตัวอย่างรวดเร็ว

<script type="text/javascript">

function understands_video() {
return !!document.createElement(‘video’).canPlayType; // boolean
}

if ( !understands_video() ) {
// ต้องเป็นเบราว์เซอร์รุ่นเก่าหรือ IE
// Maybe do something like hide custom
// HTML5 ควบคุม หรืออะไรก็ตาม ...
videoControls.style.display = ‘none’;
}

</ script>

ข้อมูลโค้ด JavaScript ทำอะไร?

This little snippet will prevent your website from trying to display a video that the browser cannot support, saving you bandwidth and processing power.

JavaScript Cookies

ตัวอย่างรวดเร็ว

<script type="text/javascript">

/ **

* ตั้งค่าคุกกี้ที่มีชื่อและค่าที่กำหนด

*

* ชื่อชื่อคุกกี้

* value ค่าของคุกกี้

* [หมดอายุ] วันหมดอายุของคุกกี้ (ค่าเริ่มต้น: สิ้นสุดเซสชันปัจจุบัน)

* [เส้นทาง] เส้นทางที่คุกกี้ถูกต้อง (ค่าเริ่มต้น: เส้นทางของเอกสารการโทร)

* [โดเมน] โดเมนที่คุกกี้ถูกต้อง

* (ค่าเริ่มต้น: โดเมนของเอกสารการโทร)

* [ปลอดภัย] ค่าบูลีนระบุว่าการส่งคุกกี้ต้องการ a

* การส่งผ่านแบบปลอดภัย

*/

ฟังก์ชัน setCookie (ชื่อค่าหมดอายุเส้นทางโดเมนปลอดภัย) {

document.cookie = ชื่อ + "=" + หนี (ค่า) +

(หมดอายุ)? "; expires =" + expires.toGMTString (): "") +

((เส้นทาง) "; เส้นทาง =" เส้นทาง +: "") +

(โดเมน)? "; domain =" + domain: "") +

((รักษาความปลอดภัย) "; การรักษาความปลอดภัย": "");

}

</ script>

<script type="text/javascript">

/ **

* ได้รับค่าของคุกกี้ที่ระบุ

*

* ชื่อชื่อของคุกกี้ที่ต้องการ

*

* ส่งกลับสตริงที่มีค่าของคุกกี้ที่ระบุ,

* หรือเป็นค่า null หากไม่มีคุกกี้

*/

ฟังก์ชัน getCookie (ชื่อ) {

var dc = document.cookie;

คำนำหน้า var = ชื่อ + "=";

var begin = dc.indexOf (";" + คำนำหน้า);

if (begin == -1) {

เริ่มต้น = dc.indexOf (คำนำหน้า);

if (begin! = 0) return null;

} else {

เริ่ม + = 2;

}

var end = document.cookie.indexOf (";" เริ่มต้น);

if (end == -1) {

end = dc.length;

}

return unescape (dc.substring (เริ่ม + prefix.length สิ้นสุด));

}

</ script>

<script type="text/javascript">

/ **

* ลบคุกกี้ที่ระบุ

*

* ชื่อชื่อคุกกี้

* เส้นทาง [path] ของคุกกี้ (ต้องเหมือนกับเส้นทางที่ใช้สร้างคุกกี้)

โดเมน * ของโดเมนเนมของคุกกี้ (ต้องเหมือนกับโดเมนที่ใช้สร้างคุกกี้)

*/

ฟังก์ชัน deleteCookie (ชื่อเส้นทางโดเมน) {

ถ้า (getCookie (ชื่อ)) {

document.cookie = ชื่อ + "=" +

((เส้นทาง) "; เส้นทาง =" เส้นทาง +: "") +

(โดเมน)? "; domain =" + domain: "") +

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

}

}

</ script>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet is a little long but very useful, it will allow your site to store information on the viewer’s computer then read it at another point in time. This snippet can be used in many different ways to accomplish different tasks.

Preload your images

ตัวอย่างรวดเร็ว

<script type="text/javascript">

var images = new อาร์เรย์ ();

preloadImages ฟังก์ชัน () {

สำหรับ (i = 0; i <preloadImages.arguments.length; i ++) {

ภาพ [i] = รูปภาพใหม่ ();

ภาพ [i] .src = preloadImages.arguments [i];

}

}

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

</ script>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet will prevent your site from having that awkward time when it is only displaying part of the site; this not only looks bad but is also unprofessional. All you have to do is add your images to the preloadImages section and you are ready to roll.

E-mail Validation

ตัวอย่างรวดเร็ว

หัว:

<script type="text/javascript">
function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
กลับ (true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
กลับ (false);
}
</ script>

ร่างกาย:

<form onSubmit="return validateEmail(this);" action="">
ที่อยู่ E-mail:
<input type="text" name="emailid" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</ form>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet will validate that a properly formatted E-mail address is entered in a form, it cannot guarantee that the E-mail address is real, there is no way to check for that with JavaScript.

No Right-Click

ตัวอย่างรวดเร็ว

<script type="text/javascript">
function 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 = new function("return false");
</ script>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet will prevent the viewer from being able to right-click on your page. This can discourage the average user from borrow images or code from your site.

แสดงคำพูดแบบสุ่ม

ตัวอย่างรวดเร็ว

หัว:

<script type="text/javascript">
writeRandomQuote = function () {
var quotes = new Array();
quotes[0] = "Action is the real measure of intelligence.";
quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one’s level of peace of mind.";
quotes[3] = "A good head and a good heart are always a formidable combination.";
var rand = Math.floor(Math.random()*quotes.length);
document.write (คำพูด [แรนด์]);
}
writeRandomQuote ();
</ script>

ร่างกาย:

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

ข้อมูลโค้ด JavaScript ทำอะไร?

Ok so this is not a snippet that all sites would use but it can be used to display more than just random quotes. You can change the content ok the quotes to whatever you want and have random images or text displayed anywhere on your site.

Previous/Next Links

ตัวอย่างรวดเร็ว

<a href="javascript:history.back(1)">Previous Page</a> | <a href="javascript:history.back(-1)">Next Page</a>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet is great if you have multiple pages on an article or tutorial. It will allow the user the browse between the pages with ease. It is also small and light weight from a resource point of view.

Bookmark a Page

ตัวอย่างรวดเร็ว

<a href="javascript:window.external.AddFavorite(‘http://www.yoursite.com’, ‘Your Site Name’)">Add to Favorites</a>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet will allow the user to bookmark your page with ease; all they have to do is click the link. Its little features like this that can increase your viewers overall experience.

ลิงก์ของหน้าพิมพ์ง่าย

ตัวอย่างรวดเร็ว

<a href="javascript:window.print();">Print Page</a>

ข้อมูลโค้ด JavaScript ทำอะไร?

This little link will allow your views to easily print your page. It utilizes the quick print feature already setup by your browser and utilizes no resources until it is clicked.

แสดงวันที่จัดรูปแบบ

ตัวอย่างรวดเร็ว

หัว:

<script type="text/javascript">
function showDate() {
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //months are zero based
var curr_year = d.getFullYear();
document.write(curr_date + "-" + curr_month + "-" + curr_year);
}
</ script>

ร่างกาย:

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

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet will allow you to display the current date anywhere on your webpage and does not need to be updated. Simply put it in place and forget about it.

ตัวคั่นด้วยเครื่องหมายจุลภาค

ตัวอย่างรวดเร็ว

หัว:

<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(temp, ” + ‘,’ + ”);
}
var out = return n2 + n3;
document.write (ออก);
}
</ script>

ร่างกาย:

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

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet would be used mainly by sites that use numbers often. This snippet will keep your numbers looking the same across the board. All you have to do is copy the body line where you want to add a number and replace the number there with your number.

ดูพื้นที่แสดงผลของเบราเซอร์

ตัวอย่างรวดเร็ว

<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

}

// IE6 ในโหมดที่เป็นไปตามมาตรฐาน (เช่นกับ doctype ที่ถูกต้องเป็นบรรทัดแรกในเอกสาร)

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> ความกว้างของ viewport คือ' + viewportwidth + 'x' + viewportheight + '</ p>');

/ / ->

</ script>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet will allow you to get the width and height of the display area in your views browser. This will give the designer the ability to create and use different displays based on the size of the user’s browser window.

Redirect with Optional Delay

ตัวอย่างรวดเร็ว

<script type="text/javascript">

setTimeout ("window.location.href ="

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

</ script>

ข้อมูลโค้ด JavaScript ทำอะไร?

This snippet will allow you to redirect your viewers to another page and it has the option of setting a delay. The use of this snippet is pretty self-explanatory and it is a very valuable tool to have in your belt.

Detect iPhones

ตัวอย่าง

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

ข้อมูลโค้ด JavaScript ทำอะไร?

ข้อมูลโค้ดนี้จะช่วยให้คุณสามารถตรวจสอบว่าผู้ดูของคุณอยู่ใน iPhone หรือ iPod หรือไม่เพื่อให้คุณสามารถแสดงเนื้อหาที่แตกต่างออกไปได้ ข้อมูลโค้ดนี้มีค่ายิ่งสำหรับตลาดโทรศัพท์มือถือที่มีขนาดใหญ่และเป็นเพียงการเติบโตอย่างต่อเนื่องเท่านั้น

Print Message to Status Bar

ตัวอย่างรวดเร็ว

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

ข้อมูลโค้ด JavaScript ทำอะไร?

This little snippet will allow you to print a message to the status bar. You can display recent or important news in an area the will catch the eye of the user.

บทความโดย WHSR Guest

บทความนี้เขียนขึ้นโดยผู้สนับสนุนแขก มุมมองของผู้เขียนด้านล่างนี้เป็นของตนเองหรืออาจไม่สะท้อนมุมมองของ WHSR