JavaScript 基础
2015-07-26 14:04
651 查看
JavaScript概述
•JavaScript是客户端脚本语言,是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。
•JavaScript认为文档和显示文档的浏览器都是由不同的对象组成的集合。这些对象具有一定的属性，你可以对这些属性进行修改或计算。
•JavaScript的基本特点：
–脚本语言：边解释，边执行，而不是编译完成再执行
–基于对象
–简单性
–动态性:直接对用户或客户输入做出响应，无须经过Web服务程序
–跨平台性:依赖于浏览器本身，与操作环境无关
JavaScript的引入
•在标识<script>标签对之间就可加入JavaScript脚本代码。其中的language属性指明这段代码是用JavaScript来编写的。type则是这段代码的类型。这两个属性写一个就行，w3c推荐使用type属性
•
•JavaScript可以直接嵌入到html中通过浏览器直接运行的，也可以单独成一个文件，在html中导入，这非常类似于css。
导入的方法是：
<script src=“路径\js文件"></script>
•Html中嵌入JavaScript代码的方式：
–可以写在任何地方，但<script>标签跟html标签同样不能交叉
–放在<head>标签中（推荐使用）
–放在<body>标签中：写在应用该代码的对象附近，可以提高可读性
•跟css一样， JavaScript也可以写在某些标签里，例如：
•<button onclick=“alert(1)”>按钮</button>
•单击这个按钮就会弹出警告框，输出一个1
•
•又比如：
•<a href=“javascript:alert(2)”>弹出警告框</a>
•点这个超链接就会弹出警告框，输出一个2
•注意，写在a标签的href属性时，前面要加上javascript，表示这是一段js代码
250;mso-char-wrap:1;mso-kinsoku-overflow:1'>
JavaScript中的注释
•JavaScript中的注释和Java基本一致，也分为单行和多行注释。•注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。
–单行注释：使用//符号对单行信息进行注释
–多行注释：使用/*…..*/对多行信息进行注释
数据类型
•字符串：“abc” ‘hello’ “你好“ （单引号和双引号均可）String•数字：包括整数数字和浮点型数字 number
•布尔值：true 和 false
•空值：null（注意，该值跟java的null含义不同）
•未定义值：undefined
运算符typeof可以获得某个值的类型，写法：typeof 值
•特殊字符：又叫转义字符
–\b 表示退格
–\n 表示换页
–\t 表示Tab符号
–\r 表示回车符
–\" 表示双引号本身
–\' 表示单引号本身
–\\ 表示反斜线本身
•Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
•可以理解为， undefined就类似于java的Null，代表了“不存在”的意思
•Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
•但js的Null不等于java的null，js中的null是一个特殊的值。一个变量的值为null，代表了这个变量“没有有意义的值”，但不是无值，这个变量的值是null。如果把这 个值传递到后台，在java中使用 变量==null 进行判断，会输出false。
•这实际上是js开发期间的一个错误，但因为已经被使用，也就将错就错了
•在js中，undefined==null会返回true，但不要因此混淆两者
变量声明及类型转换
•变量的声明：使用var来显式声明变量：
var str = "你好“;
显式声明跟java一样可以直接初始化，也可以不初始化
直接赋值称为隐式声明：
num=15;
隐式声明是依靠赋值来完成的，所以必须赋值
•parseInt(字符串)和parseFloat(字符串)
可以字符串转化为整型或浮点型数字
•类型转换：
–字符串--〉数字 Number()
–Number("1")
–任何类型--〉字符串 String()
–String(1)
–任何类型--〉布尔类型 Boolean(value)
–Value是空字符串、数字0、undefined或null时，得到false，否则是true
表达式及运算符
•算术运算符：+ -*/ %++--（字符串相加的规则跟java相同）
•比较运算符：< > <=>= ==!=
•逻辑运算符 && || !
•赋值运算符= += -= *= /=
%=
•三元运算符 ？A：B (age>=18)?”成人”:”孩子”;
•这些运算符用法与java相同，优先级也基本相同，只是&&优先级高于||
•一个特殊之处是，当你使用&& ||时，逻辑表达式返回的值是最后被执行的表达式的值，而不是一个boolean值。尝试这段代码：
var attr = true && 4;
alert(attr);
事实上你甚至能这样写：表达式 &&函数。
这样会用函数的返回值进行运算，同时也就等于执行了函数
•另外，因为自动类型转换的存在，我们可以有一些特殊的用法，比如Boolean(value)可以用!!value代替
这是因为!value会把value转化成boolean型，再加个!确保得到正确的boolean值，就可以简单的完成类型转换了
数组
•数组声明：var 数组变量名 = new Array()–创建时指定数组长度
var week = new Array(7) 注意A大写.数组可嵌套
–创建时不指定数组长度，自动延伸数组的长度
var week = new Arrary()
–创建时直接赋值
var week = new Arrary(值1，值2，……)
•数组的长度：使用数组的length属性来获得数组的长度
•Array是js内置的对象，它实际是以键值对方式存储的，类似于java的map，而在使用上类似ArrayList。因此js的数组长度是可变的。又因为Array是一个对象，所以你可以直接更改它的属性，例如：
•var week = new Array(7);
week.length=5;
结果就是把这个数组直接变成只有5个元素的数组，另外两个元素被抛弃。
•你也可以直接给数组的任意位置追加元素，例如:
week[9]=50;
结果数组长度会变成10，其中序号为9的元素是50，而序号为7、8的元素是undefined
•数组1.concat(数组2)，把数组2跟数组1合并，返回一个新数组，范例：
var arr = new Array(1,2,3)
var arr2 = new Array(4,5,6)
document.write(arr.concat(arr2))
•数组名.join([“分隔符”])，数组转化字符串，返回值是个字符串，其中用分隔符隔开每个元素，如果不写分隔符，默认是用逗号。范例：
var arr = new Array(4,13,8,6)
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
当不设置分隔符时，也可以使用toString() 方法，跟join()效果相同
•数组名.sort([排序函数名]) ，数组元素排序。若不指定排序函数，则默认所有元素为字符串，并按字符顺序排序。排序函数的写法跟java的compareTo方法相同，但函数名可自定
流程控制
•顺序：按照程序编写的顺序来执行•条件
if(条件) {语句1
}
else if(条件)
…
else {语句 n}
switch (表达式){
case 常量1：语句1;break;
…
case 常量n：语句n;break;
[default：语句n+1;]
}
•循环
for(初值;条件;更新){语句}
do{语句}while(条件)
while(条件){语句}
同样使用break结束循环，continue跳过本次循环
函数
•函数–在JavaScript中的函数可以简单理解为一组语句，用来完成一系列工作。跟java里的“方法”基本上是一样的
•创建函数
–function 函数名（参数 1, 参数2, …参数N）
{
函数体（语句集）
}
同样可以使用return给出返回值并结束函数
同样使用try catch来捕捉异常。不同的是js里的异常对象叫做err而不是exception。
在函数内部声明的变量是局部变量，在函数外面声明的变量是全局变量，这也跟java一样
e61c
调用函数的语法就是函数名([参数]);
事件调用函数
•事件：–就是Web页面在浏览器处于活动状态时发生的各种事情。如：浏览器加载、卸载一个页面，用户单击鼠标、移动鼠标，以及按下键盘的某个键
–
•事件调用函数：
–当发生了某个事件之后去调用函数进行处理的方式。
–
•事件调用函数的格式：
–on事件名 ＝ 事件处理函数
| 事件调用函数 | 何时触发 | 支持的页面元素 |
| onclick | 鼠标单击时 | 所有元素 |
| ondbclick | 鼠标双击时 | 所有元素 |
| onchange | 显示的值改变时 | 表单元素 |
| onfocus | 窗口或元素获得焦点时 | <body>和表单元素 |
| onblur | 窗口或元素失去焦点时 | <body>和表单元素 |
| onload | 文档,图像,或对象加载完毕时 | <body>, <frameset>, <img>, <iframe>, <object> |
| onsubmit | 表单提交时 | <form> |
| onunload | 文档卸载时 | <body>, <frameset> |
按下键盘任意键再松开，就触发keypress事件
•onkeydown事件
按下键盘任意键，就触发onkeydown事件，不用等松开
•onkeyup事件
松开之前按下的键盘的某个键，这个事件就表示有一个键弹起来
•Onmousedown
当鼠标按钮在元素上被按下时触发
•Onmousemove
当鼠标指针在元素上移动时触发
•Onmouseout
当鼠标指针移出某元素时触发
•Onmouseover
当鼠标指针悬停于某元素之上时触发
•Onmouseup
当鼠标按钮在元素上被松开时触发
这些事件对大部分常用标签都有效。但不同浏览器，效果可能有差异
Event对象
Event对象是代表被触发的事件的对象，它有这些属性：•altKey 布尔值，表示当事件被触发时，“ALT”是否被按下。
•ctrlKey 布尔值，表示当事件被触发时，"CTRL" 键是否被按下。
•shiftKey布尔值，表示当事件被触发时，“SHIFT”键是否被按下。
•clientX 数字，表示当事件被触发时，鼠标指针相对于浏览器的水平坐标。
•clientY数字，表示当事件被触发时，鼠标指针相对于浏览器的垂直坐标。
•screenX 数字，表示当某个事件被触发时，鼠标指针相对于显示器的水平坐标。
•
•screenY 数字，表示当某个事件被触发时，鼠标指针相对于显示器的垂直坐标。
•
•type 字符串，表示所触发的事件类型，比如onclick、onload
•
•keyCode 数字，键盘按键触发的事件中，所按下的键的ascii代码（IE专用属性，非IE浏览器用which代替）
•
•srcElement 对象，表示触发该事件的那个浏览器对象，比如因为按钮的onclick事件触发，而执行了一段js代码，在这段js代码中，event.srcElement得到的就是这个按钮对象（IE专用属性，非IE浏览器用target代替）
JavaScript中的对象
•内置对象–JavaScript将一些非常常用的功能预先定义成对象，用户可以直接使用，这种对象就是内置对象
–
•浏览器对象
–网页和浏览器本身的各种元素在JavaScript程序中的体现
–它使JavaScript可以定位、改变内容以及展示HTML页面的所有元素
–
•自定义对象
–JavaScript允许用户自定义对象进行使用
常见内置对象
•Math 数学对象–提供了进行所有基本数学计算的功能和常量的属性和方法
<html>
<head>
<script language="JavaScript">
alert(Math.abs(-1));//返回绝对值
alert(Math.round(3.8));//返回四舍五入之后的整数
alert(Math.random());//返回0和1之间的一个伪随机数
</script>
</head>
<body>
</body>
</html>
•Date 日期对象
–提供了获取、设置日期和时间的属性和方法
<html>
<body>
<script type="text/javascript">
function getDate(){
var d, s = "现在时间: "; // 声明变量。
d = new Date(); // 创建 Date 对象。
s += (d.getMonth() + 1) + “/”; // 获取月份。跟java一样用0-11的数字表示
s += d.getDate() + "/"; // 获取日。
s += d.getYear()+ " "; // 获取年份。
s += d.getHours()+ "："; // 获取钟点。
s += d.getMinutes()+ "："; // 获取分钟。
s += d.getSeconds(); // 获取秒钟。
return(s); // 返回时间。
}
alert(getDate());
</script>
</body>
</html>
•String 字符串对象
–提供了对字符串进行处理的属性和方法
•用法跟java的String类基本相同，同样拥有
toLowerCase 、split、charAt 等方法，功能和用法也跟java一样
•Array 数组对象
–用来创建数组
自定义对象
–JavaScript允许用户自定义类和对象–可以直接写一个构造函数从而创建一个自定义的类，写法与java相同。然后同样使用new 构造函数来创建对象。范例：
function User(name,age){ this.name=name; this.age=age; } var use=new User();
–也可以直接使用属性：值的列表来创建对象，并初始化属性，例如：
var user={name:“user1”,age:18}；
这种方法的效果就像是创建了一个java里的map
•自定义对象的使用方法跟java基本相同
•给自定义对象写方法。同样有各种写法
一、直接写在构造函数中，例如：
function User(name,age){
this.name=name;
this.age=age;
this.getName=function(){ return this.name; } ; }
蓝色部分就是一个方法，方法名是getName，可以用该类的对象调用此方法
二、写在构造函数外面，例如：
function User(name){
this.name=name;
this.getName=getUserName; }
function getUserName(){
return this.name;
}
通过红色的那句代码，外面的那个蓝色的函数被指定为该类的成员方法
三、通过名值对方式创建对象时直接写，例如：
var user={name : “user1” , age : 18 , getName :function(){ return this.name; }
}
红色是方法名，蓝色是方法体
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 5个常见可用性错误和解决方案
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制：7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程（二）
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法