前言
当刚开始学习JavaScript时,还以为它与Java有什么密不可分的关系,其实JavaScript 与 Java 是两种完全不同的语言,借用老师的一句话就是: 它们两个就相当于雷锋和雷峰塔。 学习web,JavaScript是必不可少的一门语言,javascript 是基于对象模型和事件驱动的脚本语言,可以嵌入到 html 中。 简单介绍 JS特点
(1) 交互性:能够包含更多活跃的元素 (2) 安全性:js 不能访问本地磁盘 (3) 跨平台性:所有的浏览器都内置 js 解析器 JS 的作用
(1) js 可以动态的修改(增删)html 及 CSS 的代码 (2) js 可以动态的校验数据 JS 的组成
ECMAScript(核心) BOM(浏览器对象模型)和 DOM(文档对象模型) JS的引入方式
1:内嵌脚本
<input type="button" value="button" onclick="alert('x')" />
2:内部脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="btn" type="button" value="button"/>
</body>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert("xxx");
};
</script>
</html>
需要注意的是< script > 和 < /script > 之间的代码行包含了 JavaScript,JS的代码写哪里都可以,但是在不影响 html的情况下,越晚加载越好。
3: 外部脚本
当我们希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。可以将 JavaScript 写入一个外部文件之中,然后以 .js 为后缀保存这个文件。 外部脚本先创建一个.js 文件 ,将 js 代码写在其中,在 html 中使用< script>标签进行引入
<script type="text/javascript" src="my.js"></script>
其中: src:引入的 js 的路径
type=“text/javascript”:告知浏览器解析文件的时候使用 js 解析器解析
注意:外部的 js 文件中不能包含< script>标签。在导入外部 js 文件的< script>标签中不能在写 javascript 代码。
比如,我们要写一个js程序,它的html 部分为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html 内容</title>
</head>
<body>
<input id="btn" type="button" value="button"/>
</body>
<script type="text/javascript" src="js内容.js"></script>
</html>
js内容为:
window.onload = function()
{
document.getElementById("btn").onclick = function()
{
alert("xxx");
};
};
document.getElementById(“”) 返回对拥有指定id的第一个对象的引用。
JS中的alert,作用是在浏览器中弹出一个警告框。
JS的基本语法
1. 变量
javascript 中的变量与我们在 java 中的变量一样,在 javascript 中使用用 var 运算符(variable 缩写)加变量名定义的:
JavaScript 变量名称的规则:
变量对大小写敏感(y 和 Y 是两个不同的变量)
变量必须以字母或下划线或者”$”开始
变量名长度不能超过255个字符。
变量名中不允许使用空格,首个字不能为数字。
不用使用脚本语言中保留的关键字及保留符号作为变量名。
2.原始类型
原始类型,可以理解成是一个值类型。简单说,就是一个字面值,它是不可变的,例如: number:数字类型 string:字符串类型 boolean:布尔类型 undefined:未定义,该类型只有一个值 undefined.表示的是未初始化的变量 null:空类型,该类型只有一个值 null,表示尚未存在的对象
注意:值 undefined 实际上是从值 null 派生出来的。因此 null==undefined 得到的结果是 true
对变量或值调用 typeof 运算符将返回下列值之一:
变量或值 | 返回值 |
Undefined | undefined |
Boolean | boolean |
Number | number |
String | string |
Null | object |
为什么 typeof 运算符对于 Null 值会返回 “object”? 这实际上是 JavaScript
最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
3:类型转换
类型的转换:
number 和 boolean 转成 string
toString();
string 转成 number
parseInt();
parseFloat();
注意:原始类型都是伪对象 所以是可以调用方法的
4.强制转换
测试强制转换成Boolean 类型
var b1 = Boolean("");//空字符串返回 false
var b2 = Boolean("worde")//非空字符串返回 true
var b3 = Boolean("10")//非零数字返回true
var b3 = Boolean("0")//零数字返回 false
var b4 = Boolean("null")//null 返回 false
var b5 =Boolean(new object())//对象 返回true
测试强制转换成数字类型
对于强制转换成数字类型:
如果是纯数字的字符串的话,则直接转换成数字
如果字符串中含有非数字的内容的话,会转换成NaN
如果字符串是一个空串,或者都是空格的话,会转换成 0
测试强制转换成字符串
toString() 方法可把数组转换为字符串,并返回结果。
语法 arrayObject.toString()
var s1 = String(null);//返回 null
var sNull = null;
var s2 = sNull.toString(); //引发错误
5.引用类型
引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。从传统意义上来说,ECMAScript 并不真正具有类。ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。对象是由 new 运算符加上要实例化的对象的名字创建的
java: Object obj = new Object();
js: var obj = new Object();
6.运算符
(1) 赋值运算符 var x = 5;
(2) 判断运算符 >、<、>=、<=、!=(也可写成<>)、==(全等代表值与类型都一致)
(3) 算数运算符 +、-、×、/、%
如果一个加数是字符串的话 就进行字符串连接
如果是字符串数字在进行类似减法的运算的时候
先把字符串转换成数字然后在运算
(4) 逻辑运算符:&& || !
(5) void 运算符: < a href=“javascript:void(0);” >dianji< /a>
(6) 类型运算符:
typeof:判断数据类型
instanceof:预测数据类型
(7)三元运算符: 三元运算符和 Java 差不多,例如
var max=(num1 > num2)? num1:num2;