javascript学习笔记（一）

来源：互联网发布：机油加盟代理淘宝编辑：程序博客网时间：2024/06/07 09:20

书本为Michael Moncur著《javascript入门经典》，代码取自书本。

知识点比较零碎，直接贴几段代码。

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Descriptive Links</title></head><body><h1>Descriptive Links</h1><p>Move the mouse pointer over one of these links to view a description:</p><ul><li><a href="order.html" id="order">Order Form</a><li><a href="email.html" id="email">Email</a><li><a href="complain.html" id="complain">Complain Department</a></ul><h2 id="description"></h2><script language="javascript" type="text/javascript" src="linkdesc.js"></script></body></html></span>

linkdesc.js

<span style="font-family:Microsoft YaHei;font-size:18px;">function cleardesc(){d = document.getElementById("description");d.innerHTML = "";}function hover(e){if (!e) var e = window.event;whichlink = (e.target) ? e.target.id : e.srcElement.id;if (whichlink == "order") desc = "Order a product";else if (whichlink == "email") desc = "Send us a email";else if (whichlink == "complain") desc = "Insult us, our products, or our families";d = document.getElementById("description");d.innerHTML = desc;}orderlink = document.getElementById("order");orderlink.onmouseover = hover;orderlink.onmouseout = cleardesc;orderlink = document.getElementById("email");orderlink.onmouseover = hover;orderlink.onmouseout = cleardesc;orderlink = document.getElementById("complain");orderlink.onmouseover = hover;orderlink.onmouseout = cleardesc;</span>

以上代码实现鼠标经过一段超链接文字在下方显示说明。

documen.getElementById()用于通过各ID值获取到对应的对象，.innerHTML用于设定对象的值。.onmouseover和.onmouseout两个属性对应鼠标在对象上和离开对象时触发的js方法。

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Create a new window</title></head><body><h1>Create a new window</h1><hr /><p>Use the buttons below to test opening and closing windows in JavaScript.</p><hr /><form name="windorm"><input type="button" value="Open New Window" onclick="NewWin=window.open('','NewWin','toolbar=no,status=no,width=200,height=100'); "><p><input type="button" value="Close New Window" onclick="NewWin.close();"</p><p><input type="button" value="Close Main Window" onclick="window.close();"</p></form><br /><p>Have fun!</p><hr /></body></span>

以上代码实现点击三个按钮分别实现

1、新建一个窗口，window.open(‘1’，‘2’，‘3’)中1中填文件名或不填分别是打开一个指定的页面窗口或一个空白窗口，2为窗口的name属性，用于之后的引用该窗口，3分别设定窗口的属性，包括width,height,toobar,location,directories,status,menubar,scrollbars,resizable等属性。

2、关闭窗口，.close()方法关闭窗口，用窗口的name属性选择要关闭的窗口。

3、同2，window.close()关闭当前窗口。

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hiding and Showing Objects</title><script language="javascript" type="text/javascript">function ShowHide() {if (!document.getElementById) return;var head1 = document.getElementById("head1");var head2 = document.getElementById("head2");var showhead1 = document.form1.head1.checked;var showhead2 = document.form1.head2.checked;head1.style.visibility=(showhead1) ? "visible" : "hidden";head2.style.visibility=(showhead2) ? "visible" : "hidden";}</script></head><body><h1 id="head1">This is the first heading</h1><h1 id="head2">This is the second heading</h1><p>Using the W3C DOM, you can choose whether to show or hide the headings on this page using the checkboxed below.</p><form name="form1"><input type="checkbox" name="head1" checked="checked" onclick="ShowHide()"  /><b>Show first heading</b><br /><input type="checkbox" name="head2" checked="checked" onclick="ShowHide()"  /><b>Show second heading</b><br /></form></body></html></span>

以上代码实现勾选不同的值显示不同的文字。主要用到name.style.visibility控制文字是否可见。

以上就是自己在学习javascript过程中敲下的几段代码，学习比较粗心有错误的地方还请指正。

0 0