JavaScript
1 JavaScript概述
javaScript 简称js.是可以嵌入到html中,是基于对象 和 事件驱动 的 脚本语言
特点:
(1)交互性
(2)安全性:js不能访问本地磁盘
(3)跨平台:浏览器中都具备js解析器
js作用:
js能够动态的修改html和css的代码,并且能够动态的校验数据。
js组成:
ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)
2js的引入方式
使用<script>标签
(1)内嵌脚本
(2)内部脚本
(3)外部脚本
js代码放在哪?
放在哪都行,一般写在<head>标签中。但是在不影响html功能的前提下 越晚加载越好
JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。现在可以不用在在 <script> 标签中使用type="text/javascript"。
3js基础语法
变量是用于存储信息的容器
javascript中的变量与我们在java中的变量一样。
在javascript中使用用 var 运算符(variable 的缩写)加变量名定义的
JavaScript 变量名称的规则:
变量对大小写敏感(y 和 Y 是两个不同的变量)
变量必须以字母或下划线开始
注意:由于 JavaScript 对大小写敏感,变量名也对大小写敏感。
4js数据类型
在ECMAScript中,变量可以存在两种数据类型,即原始类型和引用类型。
原始类型,类似于java中的基本数据类型,但是不同。
ECMAScript有五种原始类型
string 在javascript中字符串字符串字面值,可以使用单引号或双引号声明。
number 在javascript中任何数字都看成是Number类型,它即可以表示32位整数,也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。
boolean 它有两个值true和false.
undefined该类型只有一个值undefined.表示的是未初始化的变量
null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.
5类型转换
number\boolean转成string
toString();
string\boolean转成number
parseInt(); parseFloat(); boolean不能转
string可以将数字字符串转换成number如果“123a3sd5” 转成123
强制转换
Boolean() 强转成布尔
数字强转成布尔 非零就是true 零就是false
字符串强转成布尔 非“”(空字符串)就是true 空字符串“”就是false
Number() 强转成数字
布尔转数字 true转成1 false转成0
字符串转数字 不能强转
引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。
从传统意义上来说,ECMAScript 并不真正具有类。
ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。
对象是由 new 运算符加上要实例化的对象的名字创建的
var obj=new Object();
Object对象自身用处不大,但是 ECMAScript 中的 Object 对象与 Java 中的java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中
常用的javascript对象有 Boolean,Number,Array,String,Date,Math,RegExp.
可以使用instanceof运算符来判断对象的类型。
6运算符和语句
JavaScript运算符与Java运算符基本一致。
跟java一样,js也存在if、if-else、for、switch等逻辑语句,与java使用方式一致。
稍微特别一点的:
for in:
var arr = [1,3,5,7,"js"];
for(index inarr){//index代表角标
//alert(index);
alert(arr[index]);
}
7js内建对象
Number Boolean String ArrayDate Math RegExp
8js函数
(1)普通方式
语法:function 函数名(参数列表){函数体}
示例:
function method(){
alert("xxx");
}
method();
(2)匿名函数
语法:function(参数列表){函数体}
示例:
var method = function(){
alert("yyy");
};
method();
(3)对象函数
语法:new Function(参数1,参数2,...,函数体);
注意:参数名称必须使用字符串形式、最后一个
默认是函数体且函数体需要字符串形式
示例:
var fn = newFunction("a","b","alert(a+b)");
fn(2,5);
9js事件
onclick:点击事件
onchange:域内容被改变的事件
onfoucus:获得焦点的事件
onblur:失去焦点的事件
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
绑定方式
(1)将事件和响应行为都内嵌到html标签中
<input type="button"value="button" οnclick="alert('xxx')"/>
(2)将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button"οnclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>
(3)将事件和响应行为 与html标签完全分离
<input id="btn" type="button"value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>
10js的bom
(1)window对象
弹框的方法:
提示框:alert("提示信息");
确认框:confirm("确认信息");
有返回值:如果点击确认返回true 如果点击取消 返回false
var res = confirm("您确认要删除吗?");
alert(res);
输入框:prompt("提示信息");
有返回值:如果点击确认返回输入框的文本 点击取消返回null
var res = prompt("请输入密码?");
alert(res);
open方法:
window.open("url地址");
close( ) : 关闭窗口
定时器:
setTimeout(函数,毫秒值); 定时(只执行一次)
clearTimeout(定时器的名称)
setInterval(函数,毫秒值); 定时(重复执行)
clearInterval(定时器的名称)
(2)location
location.href="url地址";当前页面打开URL页面
(3)history
history.back()和history.forward()分别表示向后一页和向前一页。
history.go(num)表示向前或向后翻多少页,num为正数表示向前翻,为 负数则向后翻。
history.back()等价于history.go(-1),history.forward()等价于 history.go(1)。
11js的dom
DOM :DOM是Document ObjectModel文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件
查找元素节点getElementById()
getElementsByName()
getElementsByTagName()
是否存在子节点hasChildNodes()
替换节点 replaceChild()
获取属性 getAttribute()
设置属性 setAttribute()
创建新元素节点 createElement()
创建新文本节点 createTextNode()
插入节点 appendChild()
遍历节点树 childNodes()
获取第一个子节点 firstChild()
获取最后一个子节点 lastChild()