1. js的内容:
写入HTML输出
对事件做出反应
改变HTML内容
改变HTML图像
改变HTML样式
验证输入
2. html中的脚本必须嵌套在<script> 与</script>之间,脚本可放置在head或者body中,一般head中放函数,
外部的js: <script src=" js/index.js" > </script>
3. js输出
通常操作html,指定id的元素改变其内容
document.getElementById("demo").innerHTML="My First JavaScript";
写到文档输出:
document.write("<p>My First JavaScript</p>");
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
4. js注释
// 单行
/*
*多行
*/
5. js变量
var x = 2; //弱类型语言 变量是用来存储数据的容器 必须字母开头对大小写敏感
当变量没有赋值时候,值是undefined
重新声明该变量,值不变
6. js数据类型
字符串:"hello"
数字:4
布尔:true
数组:var arr = new Array(); arr[0] = 1 ; arr[1] = 2;
var arr = new Array("one", "two", "three");
对象:属性是名称和值的对,name:value
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
name = person.lastname;
或者 name = person["lastname"];
null表示空值,undefined表示不含有值
7. 属性和方法
访问属性:object. property
访问方法:object. method();
8. js函数:事件驱动
function funName(arg1, arg2)
{
//code blocks
return something;
}
函数内为局部变量,函数结束后被删除;函数外为全局,网页上所有脚本都能访问
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。即使它在函数内执行
9. js运算符
算术
赋值
比较
逻辑
条件
+:用于字符串连接
10. if else:
if(){}
else if(){}
else{}
switch():
{
case 1:
//code blocks
break;
default:
//
}
for(var i=0;i<str.length;i++)
{ }
for(x in person) //var person = {fname:"jone", lname:"herry", age:88};
{
txt = txt + person[x];
}
while(){}
do{} while();
break跳出循环 ; continue进入下一循环
11. 异常 try catch finally
try{}
catch(err){}
12. js DOM文档对象模型:js访问html所有元素
DOM树:

查找html元素:
通过id:
var x=document.getElementById("intro");
通过标签名:
var y=x.getElementsByTagName("p");
通过类名: 在IE8中无效
改变html:
改变输出流:document.write();
改变html内容:
document.getElementById(id).innerHTML=new HTML
改变html属性:
document.getElementById(id).attribute = new value; //eg: .src = "lan.jpg";
改变样式:
document.getElementById(id).style.property= new style; //eg: .style.color ="blue ";
DOM事件:
用户点击鼠标;onclick
网页已经加载;onload onunload
图像已经加载
鼠标移动到元素上;onmouseover onmouseout onmousedown onmouseup
输入字段被改变;onchange
提交表单;
用户触发按键;
获得焦点:onfocus
DOM元素:节点
创建新的<p>元素:var para = document.createElement("p");
创建文本节点 var node = document.createTextNode("this is new paragraph");
p元素追加文本结点:para.appendChild(node);
在找到的元素后面添加这个创建的新元素:element.appendChild(para);
删除元素:parent.removeChild(child);
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
13. js 对象
内建对象:
Date String Array
创建直接的实例
这个例子创建了对象的一个新实例,并向其添加了四个属性:
实例
person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
使用对象构造器
本例使用函数来构造对象:
实例
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
创建 JavaScript 对象实例
一旦您有了对象构造器,就可以创建新的对象实例,就像这样:
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
本文深入探讨JavaScript编程语言的核心概念和实际应用,包括HTML输出、事件响应、改变HTML内容与样式、验证输入、输出方法、变量、数据类型、函数、运算符、DOM操作等。详细解释了如何使用JavaScript进行网页开发,涵盖变量声明、数据类型、函数定义、DOM操作及事件处理,为开发者提供全面的JavaScript基础知识与实践指导。

被折叠的 条评论
为什么被折叠?



