JavaScript:
概念：一门客户端脚本语言
- 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
功能：
可以增强用户和html页面的交互过程，可以控制html元素，让页面有一些动态效果，增强用户体验
与HTML结合方式：
内部JS：
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部Js 想放哪里就放那里 -->
<script>
alert("Hello,World!");
</script>
</head>
<body>
</body>外部JS：
<script src="js/a.js"></script>注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
数据类型：
基本数据类型（原始数据类型）：
- number: 数字——整数、小数、NaN( not a number 不是数字的数字类型)
- string: 字符串——字符、字符串 "asd" ''a'' 'asd'
- boolean: true和false
- null: 一个对象为空的占位符 【typeof 运算符对null值会返回object】
- undefined:未定义（如果一个变量没有给初始化值，则被默认赋值为undefined
null，undefined的区别:
答：
null的类型是object对象
undefined的类型就是undefined
二者的值相等但类型不相等
即：null === undefined //false
null == undefined //true
console.log(1 + "2" + "2"); // 122
console.log(1 + +"2" + "2"); //32
console.log(1 + -"1" + "2"); //02
console.log(+"1" + "1" + "2"); //112
console.log( "A" - "B" + "2"); //NaN2
console.log( "A" - "B" + 2); //NaN
javascript里如果一个对象和String进行"+"运算, 优先当作字符串的连接操作. 如果另外一个对象不是String那么转换为String再连接于是1+"2"时会把1转换为"1", 最后得到"12" 而+"2"和-"2"只能当作正负号, 于是转换为Number "A"-"B"减法运算只能对Number运算所以会先把字符串转换为Number, 因为"A"和"B"不是能转换为数字的字符串, 于是得到NaN
引用数据类型：对象
变量：
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，而JavaScipt是弱类型语言
弱类型语言：
弱类型语言也称为弱类型定义语言。与强类型定义相反。像vb，php，JavaScript等就属于弱类型语言·
例如：在vbscript中，可以将字符串 12 和整数 3 进行连接得到字符串 123，然后可以把它看成整数 123，而不需要显式转换。
弱类型有时显得很方便，有时却又极易出错。比如：
var result=5+5; //two numbers
alert(result); //outputs "10"
var result=5+'5'; // a number and a string
alert(result); //outputs "55"
因此使用弱类型语言也要格外注意数据类型防止出错
语法：
var 变量名 = 初始化值;
document.write(变量名); //输出到页面上
typeof(变量名); //获取变量的数据类型
运算符：
- 一元运算符： ++, --, +, -
- 算术运算符： +, -, *, /, %......
- 赋值运算符： =, +=, -=......
- 比较运算符： >, <, >=, <=, ==, ===(全等于)
- 逻辑运算符： &&，||， ！
- 三元运算符： ？ ：
基本对象：
- Function
- Array
- Boolean
- Date
- Math
- Number
- string
- RegExp
- Global
function对象用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function</title>
<script>
/*
Function函数(方法)对象
1.创建
方法一：function 方法名称(形参列表){
方法体;
}
方法二：var 方法名 = function(形参列表){
方法体;
2.方法
3.属性
4.特点
1.方法定义时，形参的类型不用写，返回值类型也不用写（不用写var）
2.方法是一个对象，如果定义名称相同的方法会覆盖
3.在JS中，方法的调用只与方法的名称有关，和参数列表无关
4.在方法声明中有一个隐藏的内置对象（数组） arguments, 封装所有的实际参数
5.调用
方法名称（实参列表）
*/
/* //创建方法一
function fun (a, b) {
alert(a+b);
}
fun(4,9);
*/
//创建方法二
var fun2 = function(a,b){
alert(a*b);
}
fun2(5,6);
//求任意多个数的和
function add(){
var sum = 0;
for(var i = 0; i < arguments.length; i++){
sum += arguments[i];
}
return sum;
}
var sum = add(6,9,4,8,7);
alert(sum);
</script>
</head>
<body>
</body>
</html>
Array对象用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array对象</title>
<script>
/*
Array:数组对象
1.创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2.方法：
join(参数): 把数组中的元素按照指定的分隔符拼接成字符串
push(): 向集合的尾部添加一个或多个元素并返回新的长度
属性：length 数组的长度
特点：
JS中数组元素的类型是可变的
JS中数组的长度是可变的
*
*/
//创建
var arr1 = new Array(1,2,9,6,5);
var arr2 = new Array(7);
var arr3 = [9,6,3,2,1,1];
document.write(arr1+"<br/>");
document.write(arr2+"<br/>");
document.write(arr3+"<br/>");
//JS中数组元素的类型是可变的
var arr4 = [1,"asd",false ];
document.write(arr4+"<br/>");
//join方法
document.write(arr4.join("--")+"<br/>");
//push方法
arr4.push("interesting");
document.write(arr4.join("--")+"<br/>");
</script>
</head>
<body>
</body>
</html>
Date日期对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date对象</title>
<script>
/*
Date: 日期对象
1.创建
var date = new Date();
2.方法
toLocaleString(): 根据本地时间格式，把Date对象转换为字符串
getTime(): 返回1970年1月1日零点至今的毫秒数
*/
var date = new Date();
document.write(date + "<br\>");
//注意拼写！！！Locale
document.write(date.toLocaleString() + "<br\>");
document.write(date.getTime() + "<br\>");
</script>
</head>
<body>
</body>
</html>
运行效果：
Math数学对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Math对象</title>
<script>
/*
Math数学对象：
1.创建
特点：Math对象不用创建，直接使用。 Math.方法名():
2.方法
random(): 返回0~1之间的随机数 [0,1)左闭右开
round(x): 把数四舍五入为最接近的整数
ceil(x): 把数向上取整
floor(x): 把数向下取整
3.属性
PI
*/
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,99.9999]小数
3.舍弃小数部分：floor ----->[0,99]整数
4.加1 ---->[0,99]整数[1,100]
* */
var number = Math.floor((Math.random()*100))+1;
document.write(number);
</script>
</head>
<body>
</body>
</html>
RegExp:正则表达式对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RegExp</title>
</head>
<script>
/*
RegExp:正则表达式对象
正则表达式：定义字符串的组成规则
1.单个字符：[]
如： [a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符：
\d: 单个数字字符 [0-9]
\w: 单个单词字符 [a-zA-Z0-9_]
2.量词字符：
? :表示出现0次或1次
* :表示出现0次或多次
+ :出现1次或多次
{m,n}: 表示 m<= 数量 <= n
m如果缺省：{ ,n}:最多n次
n如果缺省：{m, }:最少m次
3.开始结束符号：
^: 开始
$: 结束
--------------------------------
正则对象：
1.创建：
1. var reg = new RegExp("正则表达式");
2. var reg = /^正则表达式$/; 【常用】
2.方法:
test(参数)：验证指定的字符串是否符合正则定义的规范
* */
//1.创建方法一
var reg = new RegExp("^\\w{6,11}$");
//2.创建方法二
var reg2 =/^\w{6,11}$/;
/* alert(reg);
alert(reg2); */
var username = "wanglaowuaregjvhsbfdsr";
//验证
var flag = reg2.test(username);
alert(flag); //true或false
</script>
<body>
</body>
</html>
Global对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global对象</title>
<script >
/*
Global
1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
3. URL编码
金龟子 = %E9%87%91%E9%BE%9F%E5%AD%90
*
*/
var str = "http://www.baidu.com?wd=金龟子";
var encode = encodeURI(str);
document.write(encode +"<br>");//%E9%87%91%E9%BE%9F%E5%AD%90
var s = decodeURI(encode);
document.write(s +"<br>");//金龟子
var str1 = "http://www.baidu.com?wd=金龟子";
var encode1 = encodeURIComponent(str1);
document.write(encode1 +"<br>");//%E9%87%91%E9%BE%9F%E5%AD%90
var s1 = decodeURIComponent(encode);
document.write(s1 +"<br>");//金龟子
var str = "234abc";
var number = parseInt(str);
alert(number + 1); //235
var a = NaN;
document.write(a == NaN);
document.write(isNaN(a));
var jscode = "alert(123)";
eval(jscode);
</script>
</head>
<body>
</body>
</html>
扫一扫
4271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
