目录
一、JS语言概述
概述：是一种解释性脚本语言（无需编译过程，直接执行即可）；是一种弱类型语言（同一种类型，都是var类型定义）
应用：在游览器中，为HTML增加触控效果
关系：HTML是毛坯房；CSS是内外装修；JS安装智能家电
变量与数据类型
script方式
1.直接引用js文件；在js文件李输出内容
2.直接在当前script标签中编写js代码
数据类型
string：字符串；number：整数；undifined：未被定义；boolean：布尔；object；null就是object类型
验证代码
<head>
<meta charset="UTF-8">
<title></title>
<!--方式1：直接引用js文件；在js文件里输出内容-->
<!--<script src="../js/text.js"></script>-->
<!--方式2：直接在当前script标签中编写js代码-->
<script>
/*三种打印情况*/
//alert("hello，js。****");//弹出框的打印提示
//document.write("hello,js&&&+<br />");//页面的打印提示
//console.log("hello,js$$$$");控制台打印提示
//js是弱类型，定义变量都是var类型接收
var a="wuyanzu"//定义字符串类型
document.write(a+"<br />")
a=666;//重新赋值整数类型
document.write(a+"<br />")//在js中""''都代表字符串
a=true//这里没有;
document.write(a+"<br />")
a=3.1415926
document.write(a+"/<br />")
//数据类型：string，number，undifined，boolean，object
//string
/*下面测试各种情况下的数据类型*/
a="wuyanzu";
document.write(typeof+"<br />")//string
/*以下的有问题*/
a=888;
document.write(typeof a+"<br />")//number
a=true
document.write(typeof a+"<br />")//boolean
a=3.1415926
document.write(typeof a+"<br />")//number
var b=null;
document.write(b+"<br />");null
document.write(typeof b+"<br />");//object
var c;
document.write(c+"<br />");//undefined
document.write(typeof c+"<br />");//undifined
document.write(c+1+"<br />");//NaN-->not a number
document.write(typeof NaN+"<br />");//number
</script>
</head>引用类型与数组
定义引用类型
方式：直接创建 var 对象名={属性:值,属性:值}
区别：在java中需要创建类和对象；在js中没有类的概念之间创建对象
数组的使用
包括：静态赋值、动态赋值、增删改查以及存引用类型
验证代码
<script>
/*创建对象*/
var star={name:"wuyanzu",age:45};
/*取对象的属性值*/
document.write(star.name+"----"+star.age+"<br />")
/*数组的使用*/
var a=[1,2,3];/*静态赋值*/
document.write(a+"<br />")
/*通过下标进行操作*/
document.write(a[0]+"<br />")
a[2]=5;//修改
a[5]=8;//添加 注意：a[3]和a[4]是undifined
//循环遍历的输出
for(var i=0;i<a.length;i++){
document.write(a[i]+"<br />")
}
delete a[2];//删除
document.write(a+"<br />")
a.length=0;//删除所有
document.write(a+<br />);
var b=new Array();//动态赋值
b.push(3,6);
document.write(b+"<br />")
//数组存引用类型
var c=[{name:"liangchaowei",age:45},{name:"zhangmanyu",age:47}];
for(var i=0;i<c.length;i++){
document.write(c[i].name+c[i].age+"<br />");
}
</script>运算符与流程控制
运算符
关系运算符
==比较内容一致；===比较内容和类型
++自增；--自减
算数运算符
加、减、乘除
流程控制
if分支结构
在js中，false、null、undifined、NaN、0以及""输出为false
代码验证
<script>
/*关系运算符*/
var a=1;
document.write((a=="1")+"<br />");//true
document.write((a==="1")+"<br />");//false；因为一个是整数，一个是字符串
document.write((a===1)+"<br />");//true；类型与内容一致
document.write(a++);//1
document.write(++a);//3
document.write(a--);//3
document.write(--a);//1
/*算数运算符*/
document.write("<br />");
var b=5/2;
document.write(b+"<br />");
//if分支
if(""){
document.write("为true");
}else{
document.write("为false")
}
</script>二、函数
分为调用和实现；也有参数和返回值的用法
函数的基本使用
<script>
/*1.无参数无返回值函数*/
test();//函数调用
function test(){//函数实现
document.write("无参，无返回值<br />");
}
/*2.有参数无返回值函数*/
print(999);
document.write(print(666));//无返回值则打印undifined
function print(a){
document.write("打印"+a+"<br />");
}
document.write(add(1,2));
document.write(add(1,2,3));
//如果返回值中的加数多余上面所赋予的数字个数会输出NaN
//如何解决？
/*function add(a,b){
return a+b;
}*/
/*function add(a,b,c){
return a+b+c;
}*/
//使用可变参数解决--arguments（数组）可以解决上述的问题
function add(){
var sum=0;
for (var i=0;i<arguments.length;i++) {
sum+=arguments[i];
}
return sum;
}
</script>弹窗函数
弹窗函数的结构简单，但实用性较强
代码验证
<script>
//alert("弹窗");//警告框
if (confirm("你确认接收这个惊喜吗？")) {
document.write("你点击了确认");
} else{
document.write("你点击了取消")
}
/*var a=prompt("温馨提示：欢迎光临我校")
document.write(a)*/
</script>其他函数
parseInt：将数字字符串转number
parseFloat：将数字字符串转小数的number类型
isNaN：是否为非数字；是true，不是false
代码验证
<script>
//parseInt：
var a="99感冒灵";
/*var a="感冒灵99";*///为NaN
//原因：当字符串不能转换为数字时，解析函数返回 NaN ：表示解析失败
var a=parseInt(a);
document.write(a+"<br />");//99
document.write(typeof a+"<br />");//number
//parseFloat：
a="3.14";
document.write(parseInt(a)+"<br />");//3
document.write(parseInt(a)+"<br />");//3.14
//isNaN
document.write(isNaN());
document.write(isNaN(123));
document.write(isNaN("123"));
document.write(isNaN("abc"));
</script>三、事件和正则
事件
含义：HTML与JS之间进行动态交互的桥梁
细节：通过函数调用的形式发到JS代码中
代码验证
<script >
function change(){
alert("改变触发");
}
function myclick(){
alert("点击触发");
}
function myover(){
alert("鼠标移入时触发");
}
function myout(){
alert("鼠标移出时触发");
}
function mydown(){
alert("键盘按下时触发");
}
function myup(){
alert("键盘弹起时触发");
}
/*//该html页面从上到下都加载完成后，自动触发onload
* onload=function(){
alert("页面加载完成后的触发")
}*/
function mysub(){
console.log("点击的提交按钮");//默认的返回结果为true，表示会提交到后端
return false;
}
</script><!--onchange：一般用作下拉列表，或文本内容的改变中-->
<select onchange="change()">
<option>重庆</option>
<option>四川</option>
<option>湖北</option>
<option>贵州</option>
</select>
<h1 onclick="myclick()">一级标题</h1>
<input type="button"onmouseover="myover()" value="鼠标移入时" />
<input type="button"onmouseout="myout()" value="鼠标移出时"/>
<!--键盘按下或弹起的触发：往往用在文本框中-->
<input onkeydown="mydown()" /><br />
<input onkeyup="myup()" /><br /><!--键盘弹起-->
<form onsubmit="return mysub()">
<input type="submit"value="提交" />
</form>
字符串操作
与Java类似，按照Java的方式去使用即可
代码验证
<script>
var s="morning";
var s1="morning";
/*document.write(s.equals(s1));*/
document.write(s==s1);
document.write(s.length);
document.write(" morning ".trim());/*去掉左右的空格*/
document.write(s.startsWith("mor"));/*是否以字串开头*/
</script>正则表达式
含义：一组特定规则的字符串
应用场景：匹配一些规则，完成相应的场景判断
代码验证
<script>
//案例：判断传入的字符串是否为手机号码“18624248484”
//分析：常规方式：使用字符串判断-1.以1开头 2.第2位为3578 3.11位都是数字
//正则表达式：^1[3578][0-9]{9}$ ^1[3578]\d{9}$
//var rep=new RegExp("^1[3578]\\d{9}$");
var rep=/^1[3578][0-9]{9}$/;
document.write(rep.test("18624248484")+"<br />")//true
//exec()方法检索字符串中的指定值。返回值是被找到的值。如果没有发送匹配，则返回null
var reg=/morning/ig;//i大小写不敏感；g代表全局匹配
var str="hello morning,morning一日之计在于晨,morning空气好";
var msg;
while(msg=reg.exec(str)){
document.write(msg+"<br />")//三个morning
}
reg=/hello/ig;
str="hello morning,morning一日之计在于晨,morning空气好";
var arr=str.match(reg);
document.write(arr+"<br />");//hello
reg=/morning/ig;
str="hello morning,morning一日之计在于晨,morning空气好";
document.write(str.replace(reg,"evening")+"<br />");//hello evening,evening一日之计在于晨,evening空气好
var str="hello morning,morning is best time";
arr=str.split(/[,]/);
document.write(arr+"<br />");
</script>
3112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
