小白三天js基础部分学习——ECMAscript笔记

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)+"&nbsp;&nbsp;&nbsp;");
    		document.write("</td>")
    	}
    	//document.write("<br>");
    	document.write("</tr>");
    }
    document.write("</table>") 
</script>
</head>
<body>

</body>
</html>

后记

ECMAscript是js比较基础的语法部分,本博客收纳的仅仅只是相对基础的知识,也就是必须要掌握的部分,希望大家能够打好基础。
后续的DOM与BOM博客将会更新,感谢大家关注!!!
也祝大家学习更上一层楼


版权声明:本文为zxdznyy原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。