概念：一门客户端脚本语言
-
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 -
脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能：
-
可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态效果，增强用户的体验。
JavaScript=ECMAScript+JavaScript自己特有的东西（BOM+DOM）
ECMAScript：客户端脚本语言的标准
1.基础语法
1.1 与html结合方式
-
内部JS： 定义<script>，标签体内容就是js代码 -
外部JS： 定义<script>，通过src属性引入外部的js文件 -
注意： 1.<script>可以定义在html页面的任何地方，但是定义的位置会影响执行的顺序。 2.<script>可以定义多个。
1.2 注释
-
1.单行注释：//注释内容 2.多行注释：/*注释内容*/
1.3 数据类型
-
1.原始数据类型（基本数据类型） 1.number：数字。（正式、小数、NaN(not a number 一个不是数字的数字类型)） 2.string：字符串。 字符串 "abc" "a" 'abc' 3.boolean：true和false 4.null：一个对象为空的占位符 5.undefined：未定义。如果一个变量没有给初始值，则会被默认赋值为undefined -
2.引用数据类型：对象
1.4 变量
-
变量：一小块存储数据的内存空间。 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。 弱类型：在开辟变量存储空间时，不定义空间将来存储的数据的数据类型。可以存放任意类型的数据。 -
语法： var 变量名 = 初始化值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>typeof</title>
<script>
//定义变量
// var a=3;
// alert(a);
// a="abc"
// alert(a);
//定义number类型
var num=1;
var num2=1.2
var num3=NaN
//输出到页面上
document.write(num+"---"+typeof(num)+"<br>");
document.write(num2+"---"+typeof(num2)+"<br>");
document.write(num3+"---"+typeof(num3)+"<br>");
//定义string类型
var str="abc";
var str2='def';
document.write(str+"---"+typeof(str)+"<br>");
document.write(str2+"---"+typeof(str2)+"<br>");
//定义boolean类型
var flag=true;
document.write(flag+"---"+typeof(flag)+"<br>");
//定义null
var obj=null;
var obj2=undefined;
var obj3;
document.write(obj+"---"+typeof(obj)+"<br>");
document.write(obj2+"---"+typeof(obj2)+"<br>");
document.write(obj3+"---"+typeof(obj3)+"<br>");
</script>
</head>
<body>
</body>
</html>
1.5 运算符
-
1.一元运算符：只有一个运算数的运算符 ++ -- +(正号) -(负号) 注意：在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型的转换。 其他类型转number： string转number：按照字面值转换。如果字面值不是数字，则转为NaN(不是数字的数字) boolean转number：true转为1，false转为0 -
2.算术运算符 + - * / % ... -
3.赋值运算符 = += -= ... -
4.比较运算符 > < >= <= == ===（全等于） 比较方式： 1.类型相同，直接比较 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止 2.类型不同：先进行类型转换，再比较 ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false -
5.逻辑元素符 && || ! &&：与（短路） ||：或（短路） ！：非 其他类型转boolean： 1.number:0或NaN为假，其他为真 2.string：除了空字符串（""），其他都是true 3.null&undefined：都是false 4.对象：所有对象都为true -
6.三元运算符 ? : 表达式 语法： 表达式?值1:值2; 判断表达式的值，如果是true则取值1，如果是false则取值2; -
7.JS特殊语法 1.语句以;结尾，如果一行只有一条语句则;可以省略（不建议） 2.变量的定义可以使用var关键字，也可以不使用 用：定义的变量是局部变量 不用：定义的变量是全局变量(不建议)
1.6 流程控制语句
-
1.if...else... -
2.switch 在java语句中，switch语句可以接受的数据类型：byte int short char 枚举 String -
3.while -
4.do...while -
5.for
案例：99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS练习_99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
for (var i=1;i<=9;i++){
document.write("<tr>");
for (var j=1;j<=i;j++){
document.write("<td>");
document.write(j+"*"+i+"="+(j*i)+" ");
document.write("</td>");
}
// document.write("<br>");
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
2.基本对象
Function：函数（方法）
-
1.创建： 1.var fun=new Function(形式参数列表，方法体);//了解 2.function 方法名称（形式参数列表）{ 方法体 } 3. var 方法名=function(形式参数列表){ 方法体 } -
2.方法： -
3.属性: length：代表形参的个数 -
4.特点： 1.方法定义时，形参的类型不用写 2.方法是一个对象，如果定义名称相同的方法，会覆盖 3.在js中方法的调用只和方法的名称有关，和参数列表无关 4.在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数 -
5.调用： 方法名称（实际参数列表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象_Function</title>
<script>
//创建方式1
var fun1=new Function("a","b","alert(a);");
// //调用方法
// fun1(3,4)
// alert(fun1.length);
//创建方式2
function fun2(a,b) {
alert(a+b);
}
// fun2(3,4)
// alert(fun2.length);
//创建方式3
var fun3=function (a,b) {
alert(a+b);
}
// fun3(3,4);
// alert(fun3.length);
fun2=function (a,b) {
// alert(a-b);
alert(a);
alert(b);
}
// fun2(3,4);
//fun2(1,2);
fun2(1);//1,undefined
fun2();//undefined undefined
fun2(1,2,3);
/**
* 求两个数的和
*/
// function add(a,b) {
// return a+b;
//
// }
// var sum=add(1,2);
// alert(sum);
/**
* 求任意个数的和
*/
function add() {
var sum=0;
for (var i=0;i<arguments.length;i++){
sum+=arguments[i]
}
}
add(1,2,3,4,5);
</script>
</head>
<body>
</body>
</html>
Array：数组对象
-
1.创建 1.var arr=new Array(元素列表); 2.var arr=new Array(默认长度); 3.var arr=[元素列表]; -
2.方法 join(参数)：将数组中的元素按照指定的分隔符拼接成字符串 push(参数)：想数组的末尾添加一个或者更多个元素，并返回新的数组长度 -
3.属性 length:数组的长度 -
4.特点 1.JS中，数组元素的类型是可变的 2.JS中，数组长度可变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象_Array</title>
<script>
//1.创建方式1
/*var arr1=new Array(1,2,3);
var arr2=new Array(5);
var arr3=[1,2,3,4];
var arr4=new Array();
document.write(arr1+"<br>");//1,2,3
document.write(arr2+"<br>");//,,,,
document.write(arr3+"<br>");//1,2,3,4
document.write(arr4+"<br>");*/
var arr=[1,"abc",true];
document.write(arr+"<br>");
document.write(arr[0]+"<br>");
document.write(arr[1]+"<br>");
document.write(arr[2]+"<br>");
document.write(arr[3]+"<br>");//undefined
arr[8]="hehe";
document.write(arr[8]+"<br>");
//document.write(arr.length);//9
document.write(arr.join("--")+"<br>");
arr.push(11);
document.write(arr.join("--")+"<br>");
</script>
</head>
<body>
</body>
</html>
Boolean
Date ：日期对象
-
1、创建： var date=new Date(); -
2、方法： toLocaleString()：返回当前date对象对应的时间 本地字符串格式 getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
Math：数学对象
Math：数学
-
1.创建： 特点：Math对象不用创建，直接使用。Math.方法名(); -
2.方法 random()：返回0~1之间的随机数(含0不含1) ceil(x)：对数进行上舍入 floor(x)：对数进行下舍入 round(x)：把数四舍五入为最接近的整数 -
3.属性 PI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象_Math</title>
</head>
<script>
document.write(Math.PI+"<br>");
document.write(Math.random()+"<br>");
document.write(Math.round(3.14)+"<br>");
document.write(Math.ceil(3.14)+"<br>");//4
document.write(Math.floor(3.14)+"<br>");//3
/**
* 取1~100之间的随机整数
* 1.Math.random()产生随机数：范围(0,1]小数
* 2.乘以100-->[0,99.99999]小数
* 3.舍弃小数部分：floor--->[0,99]
* 4.+1--> [1,100]的整数
*/
var number=Math.floor(Math.random()*100)+1;
document.write(number+"<br>");
</script>
<body>
</body>
</html>
Number
String
RegExp：正则表达式对象
-
1.正则表达式：定义字符串的组成规则 1.单个字符:[] 如：[a] [ab] [a-zA-Z0-9_] 特殊符号代表特殊含义的单个字符： \d:单个数字字符[0-9] \w:单个单词字符[a-z A-Z 0-9_] 2.量词符号： ?：表示出现0次或1次 *：表示出现0次或多次 +：表示出现1次或者多次 {m.n}：表示 m<=数量<=n *m如果省略：{,n}：最多n次 *n如果省略：{m,}：最少m次 如： *单词字符组成 *长度6到12位 \w{6,12} 3.开始结束符号 ^：开始 $：结束 -
2.正则对象 1.创建 1.var reg=new RegExp("正则表达式"); 2.var reg=/正则表达式/; 2.方法 1.test(参数)：验证指定的字符串是否符合正则定义的规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象_RegExp</title>
<script>
var reg1=new RegExp("^\\w{6,12}$");
var reg2=/^\w{6,12}$/;
// alert(reg1);
// alert(reg2);
var username="zhangsan";
//验证
var flag=reg1.test(username)
alert(flag);
</script>
</head>
<body>
</body>
</html>
Global对象
-
1.特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名(); -
2.方法： encodeURI：url编码 decoderURI：url解码 encoderURIComponent()：url编码，编码的字符更多 decoderURIComponent()：url解码 parseInt()：将字符串转数字 逐一判断每一个字符是否是数字知道不是数字为止，将前边的数字部分转为number isNaN():判断一个值是否是NaN NaN六亲不认，连自己都不认。NaN参与的==比较，全部是false eval()：将JavaScript字符串转成脚本代码执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象_Global</title>
<script>
var str="网页编程";
var encode=encodeURI(str);
document.write(encode+"<br>");
var s=decodeURI(encode);
document.write(s+"<br>");
var str="网页编程";
var encode1=encodeURIComponent(str);
document.write(encode1+"<br>");
var s1=decodeURIComponent(encode1);
document.write(s1+"<br>");
var str="123abc";
var number=parseInt(str);
//alert(number);//124
var a=879;
//document.write(a==NaN);//false
document.write(isNaN(a));
var jscode="alert(123)";
eval(jscode);
</script>
</head>
<body>
</body>
</html>
1426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
