本人已参与[新人创作礼]活动,一起开启掘金创作之路。
highlight: a11y-dark
JavaScript基础
1.概念:一门客户端脚本语言
*运行在客户端浏览器中的,每一个浏览器都有JavaScript的解析引擎
*脚本语言:不需要编译,直接就可以被浏览器解析执行了
2.功能:
*可以来增强用户和html页面的交互过程,让页面有一些动态的效果,增强用户的体验
JavaScript=ECMAScript + BOM=DOM
ECMAScript:客户端脚步语言的标准:
1.基本语法:
*1.与html结合方式:
*1.内部JS
*定义<script>,标签体内容就是js代码
*2.外部JS
*定义<script>,通过src属性引入外部的js文件
*注意:
1.<script> 可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2.<script>可以定义多个
*2.注释:
1.单行注释://注释内容
2.多行注释: /* 注释内容 */
*3.数据类型:
1.原始数据类型(基本数据类型):
*1.number:整数/小数/NaN(not a number一个不是数字的数字类型)
*2.string:字符串
*3.boolean: true和false
*4.null:一个对象为空的占位符
*5.underfind:未定义。如果一个变量没有给初始化值,则会被默认赋值为underfind
2.引用数据类型(对象):
*4.变量
*变量:一小块存储数据的内存空间
*Java语言是强类型语言,而JavaScript是弱类型语言。
*强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
*弱类型:在开辟变量 存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
*语法: var 变量名= 初始化值;
*5.运算符
*1.一元运算符:只有一个运算数的运算符
*2.算数运算符: + - * / % ...
*3.赋值运算符
*4.比较运算符: < > <= >= == ===(全等于)
*5.逻辑运算符: && || !
*6.三元运算符: ? :
*例: var a=3;
var b=4;
var c=a >b ? 1:0; (如果a>b ,c=1,否则c=0)
alert(c);
注意: 语句以;结尾,如果一行只有一条语句,可以省略。
变量的定义使用var关键字,也可以不使用。使用var定义的变量是局部变量,不使用是全局变量。
*6.流程控制语句
* if... else...
* switch
* while
* do...while...
* for
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<body>
</body>
</html>
2.基本对象:
Function:函数对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Function对象</title>
<script>
/* 1.创建对象
*1.创建 var fun=new Function(形式参数列表,方法体) //不推荐
*2.function 方法名称(形式参数列表){
方法体
}
*3. var 方法名=function(形式参数列表){
方法体
}
2.方法
3.属性
4.特点
* 1.方法定义时,形参的类型不用写
* 2.方法是一个对象,如果定义名称相同的方法,会覆盖。
* 3.在js中,方法的调用只与方法的名称有关,和参数列表无关。
* 4.在方法声明中有一个隐藏的内置对象(数组),arguments封装所有的实际参数。
5.调用
*/
//1.创建方式1
var fun1=new Function("a","b","alert(a);")
//调用
fun1(3,4);
alert(fun1.length);
//2.创建方式2
function fun2( a, b){
alert(a+b);
}
fun2(3,4);
//3.创建方式3
var fun3=function (a,b){
alert(a+b);
}
fun3(3,6);
</script>
</head>
<body>
</body>
</html>
Array 数组对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Array对象</title>
<script>
/*
Array:数组对象
1.创建
*1. var arr=new Array(元素列表);
*1. var arr=new Array(数组的默认长度);
*1. var arr= [元素列表];
2.方法
join() 将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
3.属性
*length:数组长度
4.特点
*1.JS中,数组元素的类型可变的。
*2.JS中,数组长度可变的。
*/
var arr1=new Array(1,2,3);
var arr2=new Array(5);
var arr3=[1,2,3];
document.write(arr1+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");
document.write(arr3.join("---")+"<br>");
arr1.push(11);
document.write(arr1+"<br>");
</script>
</head>
<body>
</body>
</html>
Date对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Date对象</title>
</head>
<script>
/*
Date:日期对象
1.创建:
*var date=new Date();
2.方法;
toLocalString(): 返回当前date对象对应的时间本地字符串格式
getTime() 获取毫秒值,返回当前日期对象描述的时间到1970年1月1日零点的毫秒值。
*/
var date =new Date();
document.write(date+"<br>")
document.write(date.toLocaleString()+"<br>")
document.write(date.getTime())
</script>
<body>
</body>
</html>
Math对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Math数学对象</title>
</head>
<script>
/*
Math:数学:
*1.创建
特点:Math对象不用创建,直接使用。 Math.方法名();
*2.方法
random() 返回0-1之间的随机数
ceil(x) 对数进行上舍入
floor(x) 对数进行下舍入
round(x) 对数进行四舍五入
*2.属性
PI
*/
document.write(Math.PI+"<br>")
document.write(Math.random()+"<br>")
document.write(Math.round(3.3)+"<br>")
document.write(Math.ceil(3.2)+"<br>")
//取1-100之间的随机整数
document.write(Math.floor(Math.random()*100)+1);
</script>
<body>
</body>
</html>
RegExp:正则表达式对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>RegExp正则表达式</title>
</head>
<script>
/*
RegExp: 正则表达式对象
1.正则表达式:定义字符串的组成规则
*1.单个字符[] [a]表示a [ab]表示a或者b [a-z]表示a到z中的某个字母
[a-zA-Z]表示小写a到z中,或者大写A-Z中的某个字母
*2.特殊符号代表特殊含义的单个字符: \d 表示单个数字字符 \w 单个单词字符[a-zA-Z0-9_]
*3.量词符合: ? 出现0次或者1次
* 出现0次或者多次
+ 出现1次或者多次、
{m,n} 表示 m<= 数量 <=n
*4.开始结束符号: ^ 开始符号 $ 结束符号
2.正则对象:
*1.创建
1.var reg=new RegExp("正则表达式");
1.var reg=/正则表达式/;
*2.方法
1.test(参数) 验证指定的字符串是否符合正则定义的规范
*/
var reg1 = new RegExp("^\\w{6,12}$");
var reg2 = /^\w{6,12}$/;
alert(reg1);
alert(reg2);
var username="zhangsan";
var flag=reg2.test(username);
alert(flag);
</script>
<body>
</body>
</html>
Global对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Global对象</title>
</head>
<script>
/*
Global对象
1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2.方法:
*1.encodeURI() url编码
*2.decodeURI() url解码
*3.encodeURIComponent() url编码的字符更多
*4.decodeURIComponent() url解码的字符更多
*5.parseInt() 将字符串转为数字
*逐一判断每一个是不是数字,直到不是数字为止,将前边数字部分转换成number
*/
var str1="石头人";
var encode1=encodeURI(str1);
document.write(encode1+"<br>");
var s=decodeURI(encode1);
document.write(s+"<br>");
var str3="123";
var str4="123abc";
var number1=parseInt(str3);
var number2=parseInt(str4);
document.write(number1+1);
document.write(number2+1);
</script>
<body>
</body>
</html>