JavaScript基础
1、JavaScript介绍
- 概念：一门客户端脚本语言
- 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
- 功能：
- 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增加用户的体验
- JavaScript发展史：
- 九十年代网速在十几k，网速很慢，很多用户需要上网，如逛论坛，就需要进入注册页面进行用户注册、登录。则需要将填写的数据发送给服务器端，在服务器端进行判断用户名是否被注册、填写信息是否规范等。
此时如果在填写信息后，点击提交后，发现有些信息并没有填写规范，那么此时数据正在上传至服务器端进行验证，那么则需要浪费很多时间，由服务器进行验证后，返回给用户重新填写，那么又得需要用户进行等待。此时就会浪费用户的时间。（即本地没有校验，只能依靠低网速上传给服务器进项验证）。 - 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C- - （碰瓷），在网景和微软两家的浏览器大火的时候，Nombase公司将其改名为ScriptEase。
- 1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。发现其中有一些缺陷。后来，请来了SUN公司的专家，修改LiveScript，命名为JavaScript（借鉴java的名气，有助于宣传），但语法接近java，因为由SUN公司的人员参与。
- 1996年，微软公司推广自己的浏览器IE，抄袭了JavaScript，开发出了JScript语言。
- 1997年，ECMA（欧洲计算机制造商协会）统一指定了一套规范，让市场有标准化，依照JavaScript的基础，制定了ECMAScript，就是所有客户端脚本语言的标准。
- JavaScript = ECMAScript + JavaScript自己特有的BOM+DOM
- 九十年代网速在十几k，网速很慢，很多用户需要上网，如逛论坛，就需要进入注册页面进行用户注册、登录。则需要将填写的数据发送给服务器端，在服务器端进行判断用户名是否被注册、填写信息是否规范等。
2、ECMAScript
-
- 基本语法
- 与html的结合方式
- 内部的结合方式：定义
<script>,标签体内容就是js代码<script>标签可以随意放在html中，但是要注意这个标签的执行顺序<script> alert("hello world"); </script> - 外部的结合方式：通过src属性引入外部的js文件
<script src="路径/js文件"></script>
注意：<script>可以定义在html页面的任何地方，但是定义的位置会影响执行的顺序。<script>可以定义多个
- 内部的结合方式：定义
- 注释
- 单行注释：//注释内容
- 多行注释 ：/* 注释的内容 */
- 数据类型：
-
- 原始数据类型（基础数据类型）
-
- number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）
-
- string：字符串。字符串 “abc” “a” ‘a’
-
- boolean：true和false
-
- null：一个对象为空的占位符
-
- undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
-
- 引用数据类型：对象
-
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，而JavaScript是弱类型语言。
- 强类型：申请变量存储空间，定义了空间将来存储的数据的数据类型，此时在该空间只能放该指定数据类型的值。
- 弱类型：申请变量存储空间，不定义了空间将来存储的数据的数据类型，可以在该空间内放任意类型的值。
- 语法：
- var 变量名 = 初始化值;
例如：<script> // 定义变量 var a = 3; alert(a); a = "abc"; alert(a); </script>
进行不同数据类型变量的使用：
- var 变量名 = 初始化值;
- Java语言是强类型语言，而JavaScript是弱类型语言。
<script>
// // 定义变量
// var a = 3;
// alert(a);
// a = "abc";
// alert(a);
// 定义number类型
var num1 =1;
var num2 =1.2;
var num3 =NaN;
// 输出到页面上
document.write(num1+"<br>");
document.write(num2+"<br>");
document.write(num3+"<br>");
// 定义string类型
var str1 = "abc";
var str2 = 'efg';
document.write(str1+"<br>");
document.write(str2+"<br>");
// 定义booleanl类型
var flag = true;
document.write(flag+"<br>");
// 定义null
var obj1 =null;
var obj2 = undefined;
var obj3;
document.write(obj1+"<br>");
document.write(obj2+"<br>");
document.write(obj3+"<br>");
</script>
-
- 运算符
- typeof运算符： typeof(变量名：variable)
- 一元运算符：只有一个运算数的运算符
- ++、- - 、+（正号）
- ++、- -：自增（自减），在前，则先运算，后执行。反之，先执行，后运算。
- +（正号）/-（负号）：代表数字正负值
- 注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转化。
- 其他类型转number：
- String 转number：按照字面值进行转换，如果字面值不是数字，则转为NaN（不是数字的数字），NaN加任何数都为NaN。
- boolean转number：true转1，false转0；
- ++、- - 、+（正号）
- 算数运算符：+、 - 、* 、 /、%…
- 赋值运算符：=、-=、+=…
- 比较运算符：>、<、>=、<=、== 、 ===（全等于）…
-
- 类型相同 ：直接比较
document.write((3 > 4)+ " <br> ");
- 字符串：按照字典顺序比较，按位逐一比较，直到得到大小为止。
- 类型相同 ：直接比较
-
- 类型不同：先进性类型转化，再比较。注意全等于（===），再比较之前，先判断类型，再判断值，如果类型不一致，则直接返回false。
-
- 字符串与数字比，会将字符转为number类型。
-
- 逻辑运算符：&&、||、!
- 数字类型转boolean：0为假，非0为真
- strin转boolean：除空字符串（" "）,其他都是true
- null或undefined：都是false
- 对象：都是true（在对象的获取的时候，可以进行判断，能够防止空指针异常）
- 三元运算符：？ ：
- 表达式？值1：值2；（如果判断表达式为真，则返回值1，反之则返回值2）
- 流程控制语句
- if…else
- switch…case
- 在java中，switch语句可以接收的数据类型：byte、int、char、枚举（jdk1.5）、字符串（jdk1.7）
- 在js中，switch语句可以接任意的原始数据类型。
- while
- do…while
- for:
for(var i =1;i<=100;i++)
- js特殊语法：
-
- 语句以分号结尾，如果一行只有一条语句，则； 可以省略。（一般不建议）
-
- 变量的定义可以使用var关键字，也可以不使用。（用var：定义局部变量；不用var：定义的是全局变量。// 一般不建议使用，一般先定义，在方法中赋值，也可以进行使用）
-
- 案例小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习九九乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
// 1、完成基本的for循环嵌套，展示乘法表
for(var i =1;i<=9;i++){
document.write("<tr>")
for(var j =1;j<=i;j++){
document.write("<td>")
document.write(i+"*"+j+"="+(i*j)+" ");
document.write("</td>")
}
// document.write("<br>")
document.write("</tr>")
}
document.write("</table>");
</script>
</head>
<body>
-
- 基本对象：
-
- Array：数组对象
- 创建
- var arr = new Arrray(元素列表)
- var arr = new Array(默认长度)
- var arr = [元素列表]
- 方法
- join(参数)：将数组中的元素按照指定的分隔符拼接成字符串
- push()：将数组的的尾部添加一个或者多个元素，并返回新的长度
- 属性
| constructor | 返回创建 Array 对象原型的函数|
| length | 设置或返回数组中元素的数量。|
| prototype | 允许您向数组添加属性和方法。| - 特点
- JS中，数组元素的类型可变。
- JS中，数组长度是可变的。
-
- Boolean
-
- Date
-
- 创建：
var date = new Date();
var date = new Date();
document.write(date);
- 创建：
-
- 方法：
- toLocaleString()：返回当前date对象对应的时间本地字符格式
var date = new Date();
document.write(date.toLocaleString); - getTime():获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
-
- Math:数字对象
-
- 创建：Math对象不用创建，直接使用
-
- 方法：
- random()：返回0~1之间的随机数。（包含0，不包含1）
var date = new Date();
document.write(date.toLocaleString); - ceil(x)：对数进行上舍入。
document.write(Math.ceil(Math.PI) +"<br>") - floor(x)：对数进行下舍入。
document.write(Math.floor(Math.PI) +"<br>") - round(x)：对数四舍五入为最接近的整数。
document.write(Math.round(Math.PI) +"<br>")
例：取1~100之间的随机整数。
提示：
1、Math.random()产生随机数，范围 [0,1) 的小数。
2、乘以100 ------> [0，100）的数
3、舍弃小数部分，floor —> [0，99] 的整数
4、+1 -----> [1，100] 的整数
var num = Math.random();
num = Math.floor(Math.round(num *= 100))+1;
document.write(num);
- 3.属性：
- PI : 圆周率
-
- Number
-
- String
-
- RegExp：正则表达式对象
-
- 正则表达式：定义字符串的组成规则。
-
- 定义单个字符： []
- 如：[a]、 [ab]、[a-zA-Z0-9_] :
特殊的符号代表特殊含义的单个字符：\d：表示单个数字字符[0-9]； \w：单个单词字符[a-zA-Z0-9_]
-
- 量词符号：
*
表示0次或多次
?
表示0次或1次。
p>+出现一次或多次
{m,n}
表示m<= 数量 <= n
m如果缺省：{,n} 表示最多n次
n如果缺省：{m,} 表示最少n次
- 量词符号：
-
- 开始/结束符号：^ ：开始 $ : 结束
-
- 正则对象：
-
- 创建
-
- var reg = new RegExp(“正则表达式”);
-
- var reg = /正则表达式/;
-
- 方法
- test(参数): 验证指定字符串是否符合正则定义的规范
-
- Global：
-
- 特点：全局对象，这个Global中封装的对象不需要对象就可以直接调用。方法名()
-
- 方法：
-
- encodeURI()：url编码
-
- decodeURI()：url解码
-
- encodeURIComponent()：url编码------编码的字符更多
-
- decodeURIComponent() ：url解码------编码的字符更多
-
- parseInt()：将字符串转为数字
- 逐一判断每一个字符是否是数字，直到不是数字位置，将前面数字部分转为number
-
- isNaN():判断一个值是都是NaN
- NaN六亲不认，连自己都不认，NaN参与的 == 比较为false。此时需要isNaN()来进行判断是否为NaN。
-
- eval()：将JavaScript字符串，并把它作为脚本代码来执行。
-
- Function：函数（方法）对象
- 1.创建：
-
- var fun= new Function(形参，方法体) （作为了解）
var fun1=new Function(“a”,“b”,“alert(a);”)
// 调用方法
fun1(3,4);
- var fun= new Function(形参，方法体) （作为了解）
-
- function 方法名称（形参）{ 方法体 }
-
- // 创建方式3
/* var 方法名 = function(形参){
方法体
}
*/
var fun3 = function (a,b) {
alert(a+b);
}
fun3(3,4);
- // 创建方式3
-
- 2.方法：
- 3.属性：
- length:代表形参个数
- 4.特点：
-
- 方法定义时，形参的类型不用写,返回值对象也不用写
-
- 方法是一个对象，如果定义名称相同的方法，后面的会把前面的覆盖
-
- 在JS中，方法的调用只与方法的名称有关，与参数列表无关。
-
- 在方法声明中有一个隐藏的内置对象（数组）arguments，封装了所有的实际参数。
- function add() {
var sum = 0;
for (var i = 0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
var sum = add(1,2,5);
alert(sum);
-
- 5.调用：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。