整理一下学习js过程中的基础知识，陆续的会深入学习并记录~
<!DOCTYPE html>
<html>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
JavaScript：对事件作出反应
<button type="button" οnclick="alert('Welcome!')">点击这里</button>
JavaScript：改变 HTML 内容
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
JavaScript：改变 HTML 图像
点击灯泡就可以打开或关闭这盏灯
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" οnclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
JavaScript：改变 HTML 样式
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
JavaScript：验证输入
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
<head> 或 <body> 中的 JavaScript
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
<script src="myScript.js"></script>
JavaScript 对大小写敏感。
JavaScript 会忽略多余的空格
可以在文本字符串中使用反斜杠对代码行进行换行
document.write("Hello \World!");
JavaScript 注释 （同java）
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。
使用注释来阻止执行
在行末使用注释
变量是存储信息的容器。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
JavaScript 拥有动态类型
var x
// x 为 undefined
var x = 6;
// x 为数字
var x = "Bill";
// x 为字符串
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5;
// 12300000
var z=123e-5;
// 0.00123
JavaScript 对象
var person={firstname:"Bill", lastname:"Gates", id:5566};
var person={firstname : "Bill",lastname : "Gates",id : 5566};
对象属性有两种寻址方式：
name=person.lastname;name=person["lastname"];
条件运算符
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。
JavaScript 表单验证
必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
<html><head><script type="text/javascript">
function validate_required(field,alerttxt){with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} }}function validate_form(thisform){with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} }}
</script></head><body><form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>
E-mail 验证
输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
<html><head><script type="text/javascript">
function validate_email(field,alerttxt){with (field){apos=value.indexOf("@")dotpos=value.lastIndexOf(".")if (apos<1||dotpos-apos<2) {alert(alerttxt);return false}else {return true}}}function validate_form(thisform){with (thisform){if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false}}}
</script></head><body><form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
- 通过 id 找到 HTML 元素 var x=document.getElementById("intro");
- 通过标签名找到 HTML 元素
- var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
- 通过类名找到 HTML 元素
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
修改 HTML 内容的最简单的方法时使用
innerHTML
属性。
document.getElementById("p1").innerHTML="New text!";
修改html的属性值
document.getElementById("image").src="landscape.jpg";
改变元素的样式
<button type="button" οnclick="document.getElementById('id1').style.color='red'">点击这里
</button>
对事件做出反应
HTML 事件的例子：
- 当用户点击鼠标时
<html><head><script>function changetext(id){id.innerHTML="谢谢!";}</script></head><body><h1
οnclick="changetext(this)"
>请点击该文本</h1></body></html>
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body οnlοad="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("已启用 cookie")
}
else
{
alert("未启用 cookie")
}
}
</script>
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件
onmousedown、onmouseup 以及 onclick 事件
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
添加和删除节点
向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
扫一扫
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
