文章目录
javascript是什么
JavaScript 是世界上最流行的脚本语言，简称js。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
知识储备
学习js需要html和css的基础，以及java相关的语法，具体可以访问相关博客
html
css
java
分块学习
js总共分为三个部分，分别是EMCAscript（js基础语法），BOM（浏览器对象模型），DOM(控制html文档内容），本js文章系列将分为三篇来归纳相关知识，博文也会持续更新，欢迎关注。
而本节内容将分为两个部分：js的基本语法，js的基本对象。将在本篇文章中为大家呈现。
第一部分 基础语法
一，js与html的结合方式
1.1 js代码的书写块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结合方式</title>
<script>
</script>
</head>
<body>
</body>
</html>
见如上代码，在html文档中写出<script>标签，并在标签内部写出相关js代码即可。
js代码可以写在html文件中的任何地方，编译器在运行时由上到下的先后顺序来编译，所以我们的js代码块也要依据所需要的运行顺序来写在相应位置
在一个html文件中可以有多个js代码块，需要几个写几个<script>即可
1.2 两种与html文档结合的方法
1.2.1 内部结合
即在内部写出相应的js内容即可，如上述代码中的script标签内部内容。
1.2.2 外部结合
<script src="./a.js"></script>
也可以单独写出一个js的文档，然后在html中通过上述方式与其结合，而src代表地址，地址即为js文档所在的地址。
二，注释
在js中注释与java类似
//
/*
*
/
三，变量与数据类型
3.1 数据类型
js中数据类型一共分为五种：
number：数字，整数，小数，NaN(不是一个数字的数据类型）
string：字符串在js中并没有字符的这个概念，且字符串后面既可以是单引号也可以是双引号
boolean： 布尔型，判断对错
null：对象为空的占位符
undefined：未定义，如果一个变量没有给初始化值则会被默认为undefined类型
3.2 变量的定义
变量的定义十分简单，不需要在变量名之前标注它的类型。格式如下
var 变量名=初始化量；
var a;//定义变量a
let b;//let和var一样也可以用来定义变量
//一般情况下我们用var,在js的严格模式中用let定义变量可能会报错
3.3 typeof()函数
在js中可以运用typeof()函数来判断某一个数据的数据类型
这里需要配合alert()
alert()是警告框，可以使用它在页面上弹出警告框
我们可以利用alert()和typeof来使得警告框上出现某数据的类型
比如
<script>
var a=true;
alert(typeof(a));
</script>
页面上则会弹出
大家有兴趣可以去实验各类数据的数据类型
3.4 NaN，null
如上，左边是变量，右边是变量的数据类型。可以看到：NaN的数据类型是number，而null的数据类型是object
注意null是object类型，实际上是有问题的，是js的最初错误 ，留意即可
四，三元运算符与一元运算符
4.1 三元运算符
用来简化比较的代码，需要用if写几行的比较两数代码，使用三元运算符来代替，一行就够，而且逻辑清晰明了，具体如下
<script>
var a=3;
var b=4;
var c=a>b?1:0;//a大于b吗，如果a大于b则c=1，否则c=0
alert(c);
</script>
4.2 一元运算符
一元运算符指只有一个符号的运算符
这里要注意，在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
string转number,按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字）
布尔转number true为1，false转为0，带加号即可
五，算数运算符与逻辑运算符
5.1 算数运算符
即数学中的算数运算符
<script>
var a=3;
var b=4;
document.write(a+b+"<br>");
document.write(a-b+"<br>");
document.write(a*b+"<br>");
document.write(a/b+"<br>");//number可以用于小数
document.write(a%b+"<br>");
</script>
需要注意的是，数据类型number也可以用来表示小数，见上图的0.75
5.2 比较运算符
5.3.1 一般比较（=，==）
在js中比较，两变量类型相同则直接比较，类型不同则类型转换后再进行比较。其返回值为true，反之为false
5.3.2 全等（===）
一般三个等号在比较时不会进行类型转换，而是先比价两变量类型再比较变量内容，如果类型都不一样，则返回值为false
见代码：
<script>
//比较方式：类型相同，直接比较，类型不同，先进行类型转换，再比较，全等于，在比较之前先判断
//类型，类型不相同就直接返回false
document.write((3>4)+"<br>");
document.write(("abc"<"acd")+"<br>");
document.write(("123"==123)+"<br>");//用全等于，先判断类型，如果类型不一样返回false
document.write(("123"===123)+"<br>");//可以用于判断类型
</script>
这里要注意，document.write的打印方式，将在后面进行介绍
六，逻辑运算符
说起逻辑运算符读者朋友肯定不陌生，有三种：或，且，非
6.1 且
&&
学习过基本命题知识应该清楚，且（合取）只有比较的p，q等文字全部为真，命题才为真。
在js中，有一个短路效果：当左边可以确定表达式的值右边就不会再继续下去
6.2 或
||
或（析取）,p,q,等只要有任何一个为真，整个命题为真
与且一样有着短路效果
6.3 非
boolean
我们经常可以把其它类型转化为布尔型使我们的代码更简洁
6.3.1 其它类型转boolean
number转boolean:0或NaN为假，非0为真
string转boolean，除了" 空字符串之外其他都是true"
null&undefined都是false
对象：所有对象都为true
七，流程控制语句
如if,if-else,while,do-while,switch,for
7.1 switch
这里要注意，switch和java中的switch有一点不一样
在java中switch语句可以接受的数据类型：byte int shor char 枚举 string 在js中switch可以接收任何类型的数据
下面是基本格式代码
<script>
var week;
switch(week){
case:1:
break;
case:2:
break;
default://default可有可无，用处是非法报错
break;//break必须要有
}//都需要break;
</script>
第二部分 基本对象
对象一，function对象
funtion()在c中作为函数，在java中作为方法，但在js中则为对象
1.1 三种创建方法
1.var fun=new function(形参，方法体);
2.function 方法名（形参）{方法体}
3.var fun3=function(a,b);
1.2 length属性
可以通过方法名.length来求出其长度，进一步说明了function是对象
1.3 特点
1.方法定义时形参类型不写，
2.重写时会覆盖，不会报错
3.在js中方法的调用值和参数有关而与形参无关
4.在方法声明中有一个隐藏的对象，arguments(数组)，封装所有的实际参数
1.4 调用
function fun2(a,b){
alert(a);
}
fun2(1,2);
fun2(1);//js中不会报错
fun2();//没定义的都是undefined*/
1.5 隐藏对象arguments
//可以求任意个数的和，任意数的和
function add(){
var sum=0;
for(int i=0;i<argument.length;i++){
sum=sum+argument[i];
}
}
var sum=add(1,2);
alert(sum);
而argument中存放的使我们提供的实参
这里再次强调，js中方法的调用与形参无关
对象二，Array对象
2.1 数组的创建
1.创建： 1.var arr=new Array(元素列表);
2.var arr=new Array(默认长度);
3.var arr=[元素列表]
2.特点：1.数组元素的类型是可变的
2.在js中数组长度会发生改变,类型也可以发生改变
3.属性：length数组的长度
4.方法：join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push(参数)：在数组尾部添加多个元素（可以遍历添加元素）
var arr1=new Array[1,2,3];
var arr2=new Array(5);
var arr3=[1,2,3,4,5];
var arr4=new Array();//创造出一个空的数组
2.2 向数组中添加元素
var arr=[1,"abc",true];
document.write(arr+"<br>");
document.write(arr[0]+"<br>");
document.write(arr[1]+"<br>");
document.write(arr[2]+"<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>");
arr[10]="hehe";
document.write(arr[10]+"<br>");
不用管中间的位置，直接写出想要加的位置及其元素即可
2.2 join()
join的作用是将数组中的元素按照指定的分隔符拼接为字符串，括号内的内容即为分隔符，具体见下
document.write(arr.join()+"<br>");//默认按照逗号做分格
我们加了前三个元素后默认在第十号位置(第十一号位置）加的hehe，所以大家可以数一下在三个已知元素后还有7个", ,"逗号中的是元素的位置
如果在join方法中加入参数
改变的是每个元素中间的分隔符
document.write(arr.join("--")+"<br>");
2.3 push()
在数组尾部添加元素
arr.push(11);
document.write(arr.join("--")+"<br>");
对象三，Date对象Date 日期对象
1.创建
var date=new Date();
2.方法
toLocaleString();返回当前date对象对应的事件本地字符串格式
getTime();//获取毫秒值，发怒会当前日期对象描述的时间到1970年1月1日的毫秒值差
var date=new Date();
document.write(date+"<br>");//美国的格式
document.write(date.toLocaleString()+"<br>");//中国的格式
document.write(date.getTime()+"<br>");
对象四，Math对象
4.1 Math对象及方法
Math:数学
1.创建：1.特点：Math对象不用创建，直接使用，直接Math.方法名()即可
2.方法:
1.random();返回0-1之间的随机数，含0不含1
2.ceil();对数字进行上舍入，向上取整
3.floor();对数字进行下舍入，向下取整
4.round();//四舍五入
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>");
4.2 运用
例：取1-100的随机整数，范围（0,1]，但可以乘以100得到的是(0,99.99]
思路：使用random，再使用floor，变成0-99范围，加个1就到了0-100
var number=Math.floor((Math.random()*100))+1;
document.write(number);
注意:这里使用random，含0不含100，也就是0-99
对象五，RegExp正则表达式对象
//正则表达式对象
//正则表达式：定义字符串的组成规则。
/* 定义：1.单个字符:[]:如:[a][ab](a或者b)[a-z]
* 2.特殊符号代表特殊含义的单个字符：\d:单个数字字符[0-9],\w单个单词字符[]
*
量词符号：*表示出现0次或多次 ?表示出现0次或1次 +出现1次或多次
\w* {m,n}表示数量>=m,<=n
m如果缺省，{,n}最多n次
n如果缺省:{m,}最少m次
正则表达式对象：
1.创建:
1.var reg=new RegExp("正则表达式");
2.var reg=/正则表达式/;
\
//开始结束符号^开始$结束
// \\两根反斜线也可以
var reg=RegExp("\w{6,12}");
var reg2=/^\w{6,12}$/;//不要写双引号
alert(reg);
alert(reg2);
//test(参数)验证指定的字符串是否符合正则定义的规范
ECMA部分练习
写出一个9*9乘法表，效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九九乘法表</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("<br>");
document.write("</tr>");
}
document.write("</table>")
</script>
</head>
<body>
</body>
</html>
后记
ECMAscript是js比较基础的语法部分，本博客收纳的仅仅只是相对基础的知识，也就是必须要掌握的部分，希望大家能够打好基础。
后续的DOM与BOM博客将会更新，感谢大家关注！！！
也祝大家学习更上一层楼
扫一扫
1021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
