day32
今日内容
- JavaScript基础
JavaScript基础
-
概念：一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
-
功能：
- 可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
-
Javascript发展史∶
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为:c–，后来更名为: scriptEase
- 1995年，Netscape(网景)公司，开发了一门客户端脚本语言: LiveScript。后来，请来sUnW公司的专家，修改LiveScript，命名为Javascript
- 1996年，微软抄袭]avaScript开发出Script语言
- 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准∶ECMAScript，就是统一了所有客户端脚本酒晋的编码方式。
-
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM + DOM)
ECMAScript：客户端脚本语言的标准
- 基本语法：
- 与html结合方式
- 内部js
- 定义<script>，标签体内容就是js代码
- 外部js
- 定义<script>，通过src属性引入外部的js文件
- 注意：
- <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序，通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
- <script>可以定义多个。
- 内部js
- 注释
- 单行注释：//注释内容
- 多行注释：/*注释内筒*/
- 数据类型
- 原始数据类型（基本数据类型）：
- 字符串(String)：字符串可以是引号中的任意文本，可以使用单引号或双引号
- 数字(Number)：JavaScript 只有一种数字类型。数字可以带小数点，也可以不带，还可以是NAN(not a number 一个不是数字的数字类型)
- 布尔(Boolean)：布尔（逻辑）只能有两个值：true 或 false
- 对空(Null)：一个对象为空的占位符
- 未定义(Undefined)：如果一个变量没有给初始化值，则会被默认赋值为undefined
- 引用数据类型：
- 对象(Object)
- 原始数据类型（基本数据类型）：
- 变量
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，而JavaScript是弱类型语言
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型。只能存储固定类型的数据
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
- 语法：
- var 变量名 = 变量值；
- 可以使用 typeof 操作符来检测变量的数据类型。typeof(变量名) 或者typeof 变量名。
- 注意：用 typeof 检测 null 返回是object。
- 运算符
- 一元运算符：只有一个运算数的运算符++、–、+（正号）
- +(-)：正负号
注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换- 其他类型转number
- string转number：按照字面值转换，如果值不是数字，则转为NaN（不是数字的数字数字）
- boolean转number：true转为1，false转为0
- 其他类型转number
- +(-)：正负号
- 算数运算符：+、-、* 、/
- 赋值运算符：=、+=、-=
- 比较运算符：> < >= <= == ===(全等于)\
- 比较方式：
- 类型相同：直接比较
字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止 - 类型不同：先进行类型转换，再比较
===(全等于)，在比较之前，先判断类型，如果类型不一样，则直接返回false
- 类型相同：直接比较
- 比较方式：
- 逻辑运算读：&& || !
- 其他类型转boolean
- number：0(NaN)为假，其他为真
- string：除了空字符串(""),其他都是true
- null&undefined：都是false
- 对象：都是true
- 其他类型转boolean
- 三元运算符：? :
- 一元运算符：只有一个运算数的运算符++、–、+（正号）
- 流程控制语句
- if……else
- switch：
- 在java中，switch语句可以接受的数据类型：byte int short char，枚举（1.5），String（1.7）
- 在JS中，switch语句可以接受任意的原始数据类型
- while
- do……while
- for
- 特殊语法：
- 与html结合方式
<script>
//1. 语句以;结尾，如果一行只有一条语句则;可以省略（不建议）
var a = 3
document.write(a)
document.write("<hr>")
/*
2.变量的定义使用var关键字，也可以不使用
* 用：定义的变量是局部变量
* 不用：定义的变量是全局变量（不建议使用）
*/
function fun() {
b = 4;
}
fun();
document.write(b);
</script>
练习：
<head>
<meta charset="UTF-8">
<title>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(i + "*" + j + "=" + (i * j) + " ")
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
- 基本对象
<!--
Function ：函数对象
Array 对象
Boolean 对象
Date 对象
Math 对象
Number 对象
String 对象
RegExp 正则对象
Global 全局属性和函数
-->
- Function ：函数对象
<script>
/*
Function:函数(方法)对象
1. 创建：
1. var fun = new Function(形式参数列表,方法体);
2. function 方法名称(形式参数列表){
方法体
}
3. var fun = function(形式参数列表){
方法体
}
2. 方法：
3. 属性：
length:形参的个数
4. 特点：
1. 方法定义时：形参的类型不用写,返回值类型也不用写
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），argument封装所有的实际参数
5. 调用：
方法名称(实际参数列表);
*/
/*
//1.创建方式1
var fun1 = new Function("a", "b", "alert(a);");
//调用方法
fun1(3, 4);
//2.创建方式2
function fun2(a, b){
alert(a + b);
}
fun2(3, 4);
*/
var fun3 = function(a, b){
document.write(a + "<br>");
document.write(b + "<br>");
}
// fun3(3, 4);
//alert(fun3.length);
fun3(1);
fun3(1, 2);
fun3(1, 2, 3);
fun3();
document.write("<hr>");
/*
求两个数的和
*/
function add(a, b){
return a + b;
}
/*
求任意个数的和
*/
function add(){
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum = sum + arguments[i];
}
return sum;
}
var sum = add(1, 2, 3);
document.write(sum + "<br>");
</script>
- Array 对象
<script>
/*
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中，数组长度是可变的，会自动扩容
*/
//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>");
document.write(arr2 + "<br>");
document.write(arr3 + "<br>");
document.write(arr4 + "<br>");
var arr5 = [1, 'a', true];
document.write(arr5 + "<br>");
document.write(arr5[0] + "<br>");
document.write(arr5[1] + "<br>");
document.write(arr5[2] + "<br>");
document.write(arr5[3] + "<br>");//undefined
arr5[10] = 1;
document.write(arr5.length + "<br>");
document.write(arr5.join("-") + "<br>");
arr5.push(11);
document.write(arr5.join("-") + "<br>");
</script>
- Date 对象
<script>
/*
Date：日期对象
1. 创建：
var date = new Date();
2. 方法：
toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。
getTime()：返回 1970 年 1 月 1 日至今的毫秒数。
3. 属性：
4. 特点：
*/
var date = new Date();
document.write(date + "<br>");
document.write(date.toLocaleString() + "<br>");
document.write(date.getTime() + "<br>");
</script>
- Math 对象
<script>
/*
Math：数学对象
1. 创建：
特点：Math对象不用创建对象，直接使用。Math.方法名();
2. 方法：
random()：返回 0 ~ 1 之间的随机数。[0,1)
ceil(x)：对数进行上舍入。
floor(x)：对 x 进行下舍入。
round(x)：四舍五入。
3. 属性：
4. 特点：
*/
document.write(Math.PI + "<br>");
document.write(Math.random() + "<br>");
document.write(Math.round(3.14) + "<br>");
document.write(Math.ceil(3.14) + "<br>");
document.write(Math.floor(3.14) + "<br>");
/*
取1~100之间的随机整数
1. Math.random()产生随机数，范围[0,1)小数
2. 乘以100 --> [0,100)小数
3. 舍弃小数部分,floor --> [0,100)整数
4. +1 --> [1,101)整数
*/
var ans = Math.floor(Math.random()*100) + 1;
document.write(ans + "<br>");
</script>
- RegExp 正则对象
<script>
/*
RegExp:正则表达式对象
1.正则表达式：定义字符串的组成规则。
单个字符：[]方括号：方括号用于查找某个范围内的字符
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。
元字符：元字符（Metacharacter）是拥有特殊含义的字符：
\w 查找数字、字母及下划线。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
量词：
n+ 匹配任何包含至少一个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。
* X如果缺省：{,Y}：最多Y次
* Y如果缺省：{X,}：最少X次
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
2.正则对象：
1. 创建：
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法：
test(参数) 检索字符串中指定的值是否符合正则定义的规范。返回 true 或 false。
*/
var reg1 = new RegExp("\w{6,12}");//转义字符\\表示\
var reg2 = /^\w{6,12}$/;
document.write(reg1 + "<br>");
document.write(reg2 + "<br>");
var username = "zhangsan";
var flag = reg2.test(username);
document.write(flag + "<br>");
</script>
- Global 全局属性和函数
<script>
/*
Clobal:
1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法：
encodeURI(参数) 把字符串编码为 URI。
decodeURI(参数) 解码某个编码的 URI。
encodeURIComponent(参数) 把字符串编码为 URI 组件。编码的字符更多
decodeURIComponent(参数) 解码一个编码的 URI 组件。
parseInt(参数) 解析一个字符串并返回一个整数。
逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
注意：
只有字符串中的第一个数字会被返回。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。var number = parseInt("a123abc");NaN
isNaN(参数) 检查某个值是否是数字。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
注意：NaN参与的==比较全部返回false
eval() 将 JavaScript 字符串，并把它作为脚本代码来执行。
*/
var str = "http://www.baidu.com?wd=传智播客";
var encode = encodeURI(str);
document.write(encode + "<br>");//http://www.baidu.com?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s = decodeURI(encode);
document.write(s + "<br>");//http://www.baidu.com?wd=传智播客
var str1 = "http://www.baidu.com?wd=传智播客";
var encode1 = encodeURIComponent(str1);
document.write(encode1 + "<br>");//http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s1 = decodeURIComponent(encode1);
document.write(s1 + "<br>");//http://www.baidu.com?wd=传智播客
var str2 = "123abc";
var number = parseInt(str2);
document.write(number + 1 + "<br>");
var str3 = "document.write(1) + \"<br>\";";
eval(str3);
</script>
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
