JavaScript是 这些天在网上无处不在 –改善网站互动性，验证信息和/或改善网站前景。
JavaScript最早出现在1995中，从那时起，在接受度和使用方式上已经走了很长一段路。 JavaScript中使用的语法受到C语言的强烈影响； 但是Java，Pearl，Python和Scheme也发挥了作用。
JavaScrip初学者提示：您需要了解什么？
首先，您需要了解的一些基础知识是：
- 可以在浏览器中关闭JavaScript
- 每次加载页面时都会运行JavaScript
- JavaScript需要时间来加载慢速Internet连接
- JavaScript仍然来自缓存页面
- 您可以在网页中或从.js文件外部托管JavaScript
- JavaScript与Java完全不同
同样重要的是要了解，如果以错误的方式使用JavaScript，实际上会导致灾难。
配置不当且编码不正确的JavaScript会减慢您的网站速度并损害网站的整体导航。 反过来，这会影响访问者的返回率（由于不良的用户体验）以及搜索引擎排名（由于网站响应率降低和漫游器爬行）。 为了在这里验证我的案子，请让自己成为观众。 如果您访问的网站加载缓慢，导航困难，并且总体上没有吸引力，您是否会返回该网站？ 我不会
以下是向其中添加JavaScript时要考虑的一小件事 你的网页.
- 网站是否需要JavaScript才能正常运行？
- 如果JavaScript被阻止，网站会是什么样子？
- JavaScript会损害服务器性能吗？
- 添加JavaScript帮助会将您的网站移动到您想要的方向吗？
不，我不是要吓these这些观点。
实际上，不要害怕 在您的网站上使用JavaScript 因为它提供了很多好处，并且如上所述，大多数人都在使用它。 我试图在这里讲解的重点是，不要在不必要的时候继续向网站添加JavaScript功能。 有些网站比其他网站需要更多的JavaScript； 有些只需要更少–仅仅因为一个站点正在做并不意味着您应该做同样的事情。
免费赠品：15 Cool JavaScript Snippets为您的网站
现在，让我们来看看您到这里来的东西-以下是15个JavaScript代码段的列表，这些代码段将在功能或外观上增强您的网站。 该代码将分为两部分，head和body或.js文件。 如果没有给出节标题，则该特定代码段不需要。
1。 了解HTML5视频
快速样品
<script type="text/javascript">
function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}
if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}
</script>
JavaScript代码段的作用是什么？
这个小小的代码片段会阻止您的网站尝试显示浏览器无法支持的视频，从而节省带宽和处理能力。
2。 JavaScript Cookies
快速样品
<script type="text/javascript">
/**
* Sets a Cookie with the given name and value.
*
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
</script>
<script type="text/javascript">
/**
* Gets the value of the specified cookie.
*
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
</script>
<script type="text/javascript">
/**
* Deletes the specified cookie.
*
* name name of the cookie
* [path] path of the cookie (must be same as path used to create cookie)
* [domain] domain of the cookie (must be same as domain used to create cookie)
*/
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
</script>
JavaScript代码段的作用是什么？
这个片段有点长但非常有用，它允许您的网站在查看者的计算机上存储信息，然后在另一个时间点读取它。 此代码段可以以多种不同方式使用，以完成不同的任务。
3。 预加载图片
快速样品
<script type="text/javascript">
var images = new Array();
function 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>
JavaScript代码段的作用是什么？
此代码段将阻止您的网站在仅显示网站的一部分时遇到尴尬的时间; 这不仅看起来很糟糕，而且也是不专业的。 您所要做的就是将图像添加到preloadImages部分，然后就可以滚动了。
4。 电子邮件验证
快速样品
Head:
<script type="text/javascript">
function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}
</script>
Body:
<form onSubmit="return validateEmail(this);" action="">
E-mail Address:
<input type="text" name="emailid" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
JavaScript代码段的作用是什么？
此代码段将验证是否以表格形式输入了格式正确的电子邮件地址，它不能保证该电子邮件地址是真实的，因此无法使用JavaScript进行检查。
5。 没有右键单击
快速样品
<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代码段的作用是什么？
此代码段会阻止观看者右键单击您的页面。 这可以阻止普通用户从您的网站借用图片或代码。
6。 显示随机报价
快速样品
Head:
<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(quotes[rand]);
}
writeRandomQuote();
</script>
Body:
<script type="text/javascript">writeRandomQuote();</script>
JavaScript代码段的作用是什么？
好的，所以这不是所有网站都会使用的片段，但它可以用来显示不仅仅是随机引号。 您可以将引号的内容更改为您想要的任何内容，并在您的网站上的任何位置显示随机图像或文本。
7。 上一个/下一个链接
快速样品
<a href="javascript:history.back(1)">Previous Page</a> | <a href="javascript:history.back(-1)">Next Page</a>
JavaScript代码段的作用是什么？
如果您在文章或教程中有多个页面，则此片段非常有用。 它将允许用户轻松浏览页面。 从资源的角度来看，它也很小，重量轻。
8。 为页面添加书签
快速样品
<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Your Site Name')">Add to Favorites</a>
JavaScript代码段的作用是什么？
此代码段将允许用户轻松为您的页面添加书签; 他们只需点击链接即可。 它的小功能可以增加观众的整体体验。
9。 轻松打印页面链接
快速样品
<a href="javascript:window.print();">Print Page</a>
JavaScript代码段的作用是什么？
这个小链接将允许您的视图轻松打印您的页面。 它利用浏览器已经设置的快速打印功能，在点击之前不使用任何资源。
10。 显示格式化日期
快速样品
Head:
<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>
Body:
<script type="text/javascript">showDate();</script>
JavaScript代码段的作用是什么？
此代码段允许您在网页上的任意位置显示当前日期，而无需更新。 简单地把它放在适当的位置并忘记它。
11。 逗号分隔符
快速样品
Head:
<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(out);
}
</script>
Body:
<script type="text/javascript">addCommas("4550989023");</script>
JavaScript代码段的作用是什么？
此代码段主要用于经常使用数字的网站。 这个片段将使您的数字保持全面相同。 您所要做的就是复制要添加号码的正文行，并将号码替换为您的号码。
12。 获取浏览器的显示区域
快速样品
<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
JavaScript代码段的作用是什么？
此代码段允许您在视图浏览器中获取显示区域的宽度和高度。 这将使设计人员能够根据用户浏览器窗口的大小创建和使用不同的显示。
13。 重定向与可选延迟
快速样品
<script type="text/javascript"> setTimeout( "window.location.href = 'http://walkerwines.com.au/'", 5*1000 ); </script>
JavaScript代码段的作用是什么？
此代码段允许您将查看者重定向到另一个页面，并且可以选择设置延迟。 这个片段的使用非常明显，它是一个非常有价值的工具。
14。 检测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";
}
}
</script>
JavaScript代码段的作用是什么？
此代码段允许您检测您的查看器是否在iPhone或iPod上，允许您向其显示不同的内容。 这个片段对于移动市场的规模来说是非常宝贵的，它只会继续增长。
15。 将消息打印到状态栏
快速样品
<script language="javascript" type="text/javascript"> <!-- window.status = "<TYPE YOUR MESSAGE>"; // --> </script>
JavaScript代码段的作用是什么？
这个小片段将允许您将消息打印到状态栏。 您可以在将吸引用户眼球的区域中显示最近或重要的新闻。
了解更多：
