这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 浏览器对象模型 BOM(BrowserObjectModel), 结合实例形式较为详细的分析了 BOM 模型的常用对象与相关使用技巧, 需要的朋友可以参考下
本文实例讲述了 JavaScript 浏览器对象模型 BOM。分享给大家供大家参考,具体如下:
window 对象位于 BOM 层次结构的最顶层。它包含了一些非常重要的子对象,包括 location,navigator,document,screen,history。location 对象包含当前页面的 URL 信息。有些信息是只读的,有些信息是可以读写的比如 href 属性。我们不仅可以通过 href 属性来获取当前页面的 URL 信息,还可以通过修改 href 属性,来跳转到新的页面。
- <html>
- <body>
- <script type='text/javaScript'>
- window.location.replace("http://www.baidu.com");
- window.location.href = "http://www.sina.com";
- </script>
- </body>
- </html>
history 对象保存了用户自打开浏览器以来所访问页面的历史记录。但是某些页面不会被记录下来,比如使用 location 对象的 replace()方法加载的页面将不会记录在 history 对象中。 navigator 对象表示浏览器自身,它包含了浏览器一些非常有用的信息,比如版本号,浏览器类型以及用户所使用的操作系统。 screen 对象包含了客服端显示能力的相关信息。
- <html>
- <body>
- <script type='text/javascript'>
- switch (window.screen.colorDepth) {
- case 1:
- case 4:
- document.bgColor = "white";
- break;
- case 8:
- case 15:
- case 16:
- document.bgColor = "blue";
- break;
- case 24:
- case 32:
- document.bgColor = "skyblue";
- break;
- default:
- document.bgColor = "white";
- }
- document.write("Your screen supports " + window.screen.colorDepth + " bit color");
- </script>
- </body>
- </html>
document 是最重要的对象之一。document 对象包含了三个数组属性 links[],images[],forms[]。这三个数组分别代表了页面中所有由 < A>、<img>、<form> 所创建对象的集合。
- <html>
- <body>
- <img name=img1 src="images/1.jpg" border=0 width=200 height=150>
- <script type='text/javaScript'>
- var myImages = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg");
- var imgIndex = prompt("Enter a number from 0 to 3", "");
- document.images['img1'].src = myImages[imgIndex];
- </script>
- </body>
- </html>
- <html>
- <head>
- <script type='text/javascript'>
- var imagesArray = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg");
- function changeImg(imageNumber) {
- var newImage = imagesArray[Math.round(Math.random() * 3)];
- alert(document.images[imageNumber].src);
- while (document.images[imageNumber].src.indexOf(newImage) != -1) {
- newImage = imagesArray[Math.round(Math.random() * 3)];
- }
- document.images[imageNumber].src = newImage;
- return false;
- }
- </script>
- </head>
- <body>
- <img name='img1' src="images/1.jpg" width=150 height=200 onclick="return changeImg(0)">
- <img name='img2' src="images/2.jpg" width=150 height=200 onclick="return changeImg(1)">
- </body>
- </html>
- <html>
- <head>
- <script type='text/javascript'>
- function linkPage() {
- alert('You Clicked?');
- return false;
- }
- </script>
- </head>
- <body>
- <A href='http://www.baidu.com' name='link' onclick="return linkPage()">
- Click Me
- </A>
- </body>
- <script type='text/javaScript'>
- window.document.links['link'].href = "http://www.google.com";
- </script>
- <html>
通过这三个数组就能访问到为标记所创建的相应对象,可以通过修改 img 对象的属性来修改页面的图片,通过修改超链接对象的属性来改变超链接的 URL。
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0512/330090.html