html定义了网页的内容；css定义了网页的布局；js定义了网页的动作
js用法:html中脚本必须位于<script></script>标签内，放在<head></head>或者<body></body>内
同样可以同css一样保存在外部文件中(一般也放在外部文件中),文件名**.js
1、js输出
window.alert() 弹出警告框显示数据
js获取html元素(如果元素已经有id属性的话) getElementById("id").innerHTML = "content you want to insert";
写到html文档 document.write("content") //仅向文档输出写内容 文档如何已经加载了再输出会覆盖以前的文档输出
写到控制台(前提浏览器支持调试) console.log("content");
2、js语法
1)数字字面量可以是小数 可以是整数 也可以是科学计数(12e2)
2)字符串字面量可以是'' 或者 "" 括起来的 'js' "js"
3)表达式字面量用于计算 1 + 2 1*2
4)数组字面量 定义数组 ["","",...]
5)对象字面量 定义对象 {**:"",**:"",...}
6)函数字面量(定义函数)
使用 var 关键字来定义变量； 运算符 + - * / == != < >
js注释同java // 用于单行注释 /* */用于多行注释
略不同于java变量命名规范 js也必须以字母开头也可以使用_和$开头
当使用var声明变量但不定义时 变量的值都是 undefined
允许重新声明js变量，重新声明变量的时候，变量的值不会丢失
3、js基本知识概念
同java语句 用";"分号分割语句
使用 单个反斜杠对代码进行换行 \
其他同java 如语句块等等{}
js对字母大小写敏感 js常用java里面类似的驼峰命名法
js数据类型：String Number Boolean Array Object
js拥有动态的数据类型 相同的变量可以获取不同类型的值
1)number js只有数字类型，可以有小数点也可以没有小数点
2)布尔值 true 与 false
3)js数组 var arr = new Array();arr[0]="1";arr[1]="2";arr[2]="3";...
或者 var arr = new Array("1","2","3"...);
或者 var arr = ["1","2","3"...];
4)js对象 对象用{分割} 在对象内部 属性以名称和值的key:value的形式 属性用逗号分割 (PS:可以跨多行定义)
var animal = {age:11,name:"cat"...};
获取对象的属性两种方式(类似于EL语言)
name = animal.name ;或者 name = animal["name"]
5)js函数
声明变量的时候变量值都是undefined 表示不含有值 null一般用于变量值清空
注:js的变量均是对象，所以每次声明一个变量 便创建了一个对象
var s = "123";//(s是String) 或者
var s = new String("123");//(s是对象)
js对象:
同上
可以建立对象的时候 建立对象的方法(方法可以看出一个属性)
var animal = {lname:"mill",fname:"green",name: function(){return this.lname+" "+this.fname;}};
方法的调用 animal.name --->获取的是function(){return this.lname+""+this.fname;} 会把name当成一个属性
animal.name() -->获取 mill green
js函数:
function funName(){/*code to be executed;*/}
js函数可以有返回值但不同于java，不需要声明返回类型
js可以有函数参数 调用时一一入座匹配
js变量:
局部变量 全局变量 类比java 局部变量只有函数内部可以访问 全局变量所有脚本和函数均可访问
**如果没有使用给一个未声明的变量赋值 那么该变量会自动变成全局变量
name = 'yan' //name 没被声明过
注:html中，window对象是全局变量 所有数据都可以被window访问
js事件:
常见html事件
onchange onclick onmouseover(在该元素上移动鼠标) onmouseout(移出鼠标)
onkeydown onload(html加载完成)
js字符串String:
由上说过 js数据类型都是一个对象 故而也有其方法
可以添加转义字符 \ 来表示引号 如 \' \"
字符串可以看出一个数组 可以通过下标访问某位置的字符
var a ="122" ;
var b = a[0];
var length = a.length;//字符串长度
字符串的方法使用基本类似java
js运算符:
同java
+可以用于计算 也可以用于字符串连接 标准是:只要有字符串就是连接运算
js比较:
== 等于 != < > <= >=
=== 绝对等于(类型和值都相等，类似于java的equals)
!== 不绝对等于 值和===相反
逻辑运算 同java && || !
条件运算 (condition)?resWhenTrue:resWhenFalse;
js控制语句:
if else switch for(for in 此时for不需要使用var设置循环对象) while(do while) break continue
js有标签 可以对执行的js语句标记 然后使用break中断或者continue
typeof:
获取变量的类型 string number boolean object
注意 数组也是返回object
使用 a = null 时 typeof a -->获取 object
a = undefined 时 typeof a -->获取 undefined
null和undefined的区别 值相等 但是类型不等
null===undefined false
null == undefined true
js类型：
5种数据类型 string number boolean object function
3种对象类型 Array Object Date
2不包含值的类型 null undefined
constructor"属性" 获取变量的构造函数(类似于java的反射)
获取完整的构造函数string
字符串转数字 空字符串或者多个空格的字符串会转为0 其他会为NaN
Number("")//0
Number(" ")//0
Number("11 22")//NaN
自动类型转换
5+null --> 5
"5" + null --> 5null
"5" + 2 -->52
"5" - 2 --> 3
js正则表达式:
语法: /主体/修饰符(alternative)
var pattern = /[a-z]*/i //主体[a-z]* i修饰符
search()方法检索指定字符串中匹配正则表达式的子串索引
search也可以直接检索普通的字符串 字符串会自动转为正则表达式
replace()方法
replace(pattern,replaceStr);//同样 pattern也接受普通的字符串
修饰符:
i:匹配时大小写不敏感
g:全局匹配 (即即便找到第一个匹配字符串后继续往后匹配)
m:执行多行匹配
规范:
[abc][a-z] 方括号内其中任意一个
(x|y) 或者
\d 查找数字
\s 查找空白字符
\b 匹配单词的边界
\uxxxx 查找Unicode字符
量词 *:0次或者多次 ?:0次或者一次 +:1次或者多次
RegExp对象:
var pattern = RegExp("pattern"); 或者 var pattern = /pattern/
test()方法 获取是否匹配 返回true or false
exec()方法 返回匹配模式的数组 存放匹配的所有结果 未找到则返回null
js异常处理:
try catch throw
catch(err)
throw "errorMessage" //(此时如果被捕捉 err.message就是errorMessage)
js调试:
console.log()方法记录日志 跟踪js代码
debugger关键字 和设置断点类似
*js变量提升:
函数声明和变量声明(没初始化)会被移动到执行的代码体的最顶部
为了避免使用和理解问题，建议变量都在开始时声明
js 严格模式:
"use strict" 指令 将使js代码严格执行
比如
"use strict";
x = 2;//error x is not declared
"use strict"作用:
1)不允许使用未声明的变量 包括对象变量
2)不允许删除变量或者对象或者函数 delete a; delete func;
3)不允许变量同名 比如方法参数同名
4)不允许使用8进制 如012 以0开头的都是8进制
5)不允许使用转义字符 \
6)不允许对只读属性赋值
7)不能使用eval arguments 变量名 禁止使用关键字变量名
8)禁止使用this 严格情况 this是undefined
js运算符问题:
if(0){code will not be executed};
if(10){code will be executed};
使用名字索引后就不能使用下标索引获取对象属性了 如
var animal = [];
animal[0] = 11; ***
animal.length;//3
var animal = [];
animal["age"] = 11;***
animal.length;//0
animal[0];//为undefined
js表单验证:
document.form["formName"]["elementNameInForm"]//获取表单formName里面id为elementNameInForm的元素
表单<form> onsubmit属性 true false 判断是否要转向另一个界面
html自带的约束属性
disable:不可用
max min规定最大/小值(但还是可以输入不在这个范围的值)
pattern 规定输入的格式
required 规定是必须的
type 规定类型
elementRef.checkValidity();//html元素进行验证元素的数据是否合法 返回true false
如
<input min="100" max = "200" required>
***
var obj = document.getElementById("number");
obj.checkValidity()
setCustomValidity()
设置validationMessage属性 自定义错误信息
JS与JSON(javascript object notation):轻量级的数据交换格式
JSON:
1)数据为键值对 key:value
2)数据由逗号分隔 key:value,key:value
3)大括号保存对象 {"age":11,"name":"dog"}
4)方括号保存数组 "arr":[{obj1},{obj2}...]
js与json
JSON.parse();//JSON转为js对象
JSON.stringify();//js值转为JSON字符串
例： var jsonText = '{"arr":[{"age":11,"name":"cat"},{"age":12,"name":"dog"}]}'//一个对象 里面一个数组 数组里面两个对象
var res = JSON.parse(jsonText);
document.getElementById("eleId").innerHTML = res.arr[0].age + ""+res.arr[0].name;
javascript:void(0):
void:计算一个表达式 但不要求返回值 类似于java
<a href="javascript:void(0)">click here and nothing will happen</a>
<a href="javascript:void(alert('show message'))">click here to show message!</a>
HTML 载入外部 JavaScript 文件：<script src="**.js">
1217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
