Javascript基础-01

最新推荐文章于 2022-05-09 17:00:15 发布

金老师教编程

最新推荐文章于 2022-05-09 17:00:15 发布

阅读量716

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_45538033/article/details/123535050

版权

Javascript基础

https://www.w3school.com.cn/js/index.asp

第一章:javascript入门

1.JavaScript 版本

JavaScript 由 Brendan Eich 于 1995 年发明，并于 1997 年成为 ECMA 标准。

ECMAScript 是该语言的官方名称。

从 2015 年起，ECMAScript 按年命名（ECMAScript 2015）。

ECMAScript 版本

版本	官方名称	描述
1	ECMAScript 1 (1997)	第一版。
2	ECMAScript 2 (1998)	只改变编辑方式。
3	ECMAScript 3 (1999)	添加了正则表达式。添加了 try/catch。
4	ECMAScript 4	从未发布过。
5	ECMAScript 5 (2009)阅读更多：JS ES5	添加了“严格模式”。添加了 JSON 支持。添加了 String.trim()。添加了 Array.isArray()。添加了数组迭代方法。
5.1	ECMAScript 5.1 (2011)	编辑改变。
6	ECMAScript 2015阅读更多：JS ES6	添加了 let 和 const添加了默认参数值添加了 Array.find()添加了 Array.findIndex()
7	ECMAScript 2016	添加了指数运算符（**）。添加了 Array.prototype.includes。
8	ECMAScript 2017	添加了字符串填充。添加了新的 Object 属性。添加了异步功能。添加了共享内存。
9	ECMAScript 2018	添加了 rest / spread 属性。添加了异步迭代。添加了 Promise.finally()。增加 RegExp。

ECMAScript 通常缩写为 ES。

2. 为什么要学习js?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iIFbNsnL-1647433185529)(javascript从入门到精通.assets\学习js的必要性.png)]

3.hello world

基本语法要求：

区分大小写，语句结束用分号(不是必须的)

3.1 引入js脚本方式1

内联方式，嵌入在html标签里的，缺点:html负责的内容+js是脚本，并没有分离。

我们希望Html和脚本分离的方式，不推荐的

<button type="button" onclick="alert('hello world!')" >hello world</button>

3.2 页面的script脚本

注意：script脚本可以出现在页面的任意位置。一般是两个位置

如果在head标签里，页面执行的过程是这样的，先加载head，这时会加载script并执行脚本，但是body里的html标签还没有加载，页面看到是空白的。

如果位置2，在body或者html结束前，那么页面渲染完毕后，再执行的脚本。这是可以看到页面的内容了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        //这里是位置1.
		<script type="text/javascript">
			alert('hello world!')
		</script>
	</head>
	<body>
        
		<button type="button" onclick="alert('hello world!')" >hello world</button>
        //位置2
        <script type="text/javascript">
		  alert('hello world agagin');
    	</script>
	</body>

</html>

3.3 使用外部文件的方式

如果脚本写在script内部，网页里面，那么这个脚本只能是为当前页面使用，其他页面不能用。

为了让其他页面使用，好比，我们写的css样式文件一样。可以写成js脚本文件，然后需要的页面导入即可。

<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/hello.js" type="text/javascript" charset="utf-8"></script>
	</head>

4. 运行html文件方式

1. http模式 web模式
http://127.0.0.1:8848/js/lesson1/demo02.html
我们需要web容器，要启动；http 超文本传输协议
127.0.0.1 表示本机的ip地址 可用localhost代替
:8848 web服务端口号（0-65535） 计算机通信用的，默认的web服务端口 80，不要写
hbuilder工具，内置了一个轻量级的web容器；
2. 本地文件的方式，直接双击打开，这种模式我们不推荐用

5.js中数据类型

1.number 数字 10,,6.6
2.string 字符串 单引号,双引号
3.boolean 布尔，逻辑值  ture/false 
4.undefined 未定义的
5.null 空的
6.object 对象

6.变量定义

6.1 var关键字

一、 使用关键字var
1. 变量可以任意赋值
var 变量名 
2. 如果不使用var 来定义变量，直接使用, 变量的作用域是顶级变量
 a=10  这时a是属于window的
3.变量可以重复定义 
===================
<script type="text/javascript">
			var a=10;
			//typeof用来查看数据类型的
			console.log("a=",a,typeof(a));
			a=9.9;
			console.log("a=",a,typeof(a));
			a="abc";
			console.log("a=",a,typeof(a));
			a=false;
			console.log("a=",a,typeof(a));
			a={};//
			console.log("a=",a,typeof(a));
			//变量没有定义，是不能用的，Uncaught ReferenceError: b is not defined
			//undefined
			console.log("b=",typeof(b));
			//
			//怎么理解顶级。顶层对象 window 对象，表示当前的window
			console.log(window);
			b=300;//没有使用var关键字，那么变量是属于顶层对象的，window的
			console.log(b,window.b);			
</script>

注意以下代码

<script type="text/javascript">
			console.log(x);
			var x="aaa";
		    console.log(x);
		</script>

运行的效果是: undefined ，为什么呢？

这和js的执行有关，虽然 js是解释性语言，边解释边执行，var x=“aaa”,先执行定义变量a, 类型定义，会先加载，但并不赋值。然后再从上开始执行 console.log(x),所以，显示未定义（没有赋值）；

6.2 let关键字(es6新增的)

let定义的变量是块级,只在块内访问，不存在变量提升,不可以重复定义

{
  //这就是代码块
}
		<script type="text/javascript">
			{
				var x=10;
				console.log("块内：x=",x);
				let y=20;//作用域只在这个块内，出了后就无效了
				console.log("块内：y=",y);
			}
			console.log("块外：x=",x);
			//console.log("块外：y=",y);
			console.log(a) ;
			var a=100;//变量的提升
			console.log(b) ;
			let b=200;//不存在变量的提升
		</script>

6.3const定义常量

ES6新增的const定义常量，块级，不存在变量的提升

常量一旦定义后，不能被改变，不允许重复定义;常量定义后必须赋初值；

一般常量名大写。

const MAX=999;		
console.log("max=",MAX);

7.运算符和表达式

类型	运算符
算术运算符	+ - ***** / % ++ –
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& \|\| !

7.1 算术运算符

var x=8,y=6;
//%取余数  / 两个整数相除，可能带小数点
console.log(8+6,8-6,8*6,8/6,8%6);
x=158;//分解这个三位数
var a=parseInt( x/100); //求百位，parseInt转成整数，取整
var b=parseInt(x%100/10);//十位
var c=x%10;//个位
console.log(a,b,c);
//++ 自增 -- 自减
//a++,相当于a=a+1
//++在变量的前面，那么该变量先自增，再参与表达式的计算
//++ 再变量的后面，那么改变量先参与表达式的计算，再自增
x=50;
//y=++x-10;//y=41  x=51
y=x++-10;//y=40  x=51
console.log('y=',y,'x=',x);

7.2 比较运算符

>,>=,<,<=,==,!=
===恒等于
!==恒不定于

let x=10,y=20;
//关系表达式，这是一个逻辑值true/false
console.log(x==y,x!=y,x>y,x<y);
//==和===的区别
//==比较，会自动将类型转成同一种类型，再比较
//===恒等，不会自动类型转换，如果类型不一致，就不相等了
let a="10";
console.log("==",x==a,"===",x===a);

7.3 逻辑运算符

逻辑运算符用来连接多个关系表达式

&& 与   两边为真才为真，并且...并且...
|| 或   只要有真就为真，或者...或者...
! 非    就是取反 真->假，假->真
================================

	/*
			&& 与   两边为真才为真，并且...并且...
			|| 或   只要有真就为真，或者...或者...
			! 非    就是取反 真->假，假->真
			优先级： ! > && >  ||
			*/
		   //1.  x属于 (10,50] 
		   let x=10;
		   console.log(x>10&&x<=50);
		   //2. 判断ch是一个字母 小写和大写
		   let ch='9';
		   /*这里要说，为啥字符是可以比较的呢？
		   字符在计算机中的存储模式,编码
		   ascii码 ，单字节编码，即一个字符占一个字节
		   字符    十进制(ascii码)
		   null       0
		   退格       8
		   换行      10
		   回车      13
		   控制字符   <32  
		   空格       32
		   0          48
		   A          65
		   B          66
		   a          97
		   #######################
		   uincode编码 一个中文占2个字节
		   utf-8 国际码  1-3个字节
		   */
		   let exp=ch>='a'&&ch<='z'||ch>='A'&&ch<='Z';
		   console.log(exp);
		   //判断一个年份是否是闰年，条件：年份能被4整除，并且不能被100整除，或者能被400整除
		   let year=2022;
		   //这个括号可加可不加，加了逻辑更清楚点。
		   exp=(year % 4 ==0 && year % 400 !=0 )|| year % 400 == 0;
		   console.log(year,'是否是闰年',exp);
		   /
		   //a,b,c表示三角形的三个边长，问，不构成三角形的表达式 
		   a=3
		   b=4
		   c=15
		   exp=a+b<=c||a+c<=b||b+c<=a;
		   console.log("不构成三角形么?",exp);

7.4 短路与和短路或

//注意，短路与和短路或
x=10
y=20
//y= 20 为什么？
//&&要求，两边为真，才为真;当左边的表达式为假，那么右边表达式的的结果不影响整个
//表达式的结果，因此，系统不会去扫描执行了。
exp=x<10 && ++y>20;
//y=？ 20 短路或，概念同上
exp=x<20 ||++y>20;
console.log("y=",y);

第二章：分支结构

1. 条件表达式

问号表达式 ？
语法： exp1?exp2:exp3 当exp1为真，那么整个表达式的值为exp2否则是exp3

let a = 10,	b = 20;
//a,b中的大数
let max = a > b ? a : b;
console.log('max=', max);
//
let nums = 25; //总人数
let size = 4; //每间房间住的人数
let room = nums % size == 0 ? nums / size : parseInt(nums / size) + 1;
console.log('room->',room);
//可以嵌套的
//假设month表示月份，输出对应的季度
let month=13;
let sea=month>12||month<1?"无效月份":month>=10?"第四季度":month>=7?"第三季度":month>=4?"第二季度":"第一季度";			
console.log(sea);

2. if语句

if(条件){
	真执行的代码
}else{
	假执行的代码
}

<script type="text/javascript">
			//输入一个数字，输出绝对数
			let num=parseInt(prompt("请输入数字:"));
			if(num<0){
				num=-num;
			}
			alert('绝对数为:'+num);
			
</script>

输入年份，判断是否是闰年

<script type="text/javascript">
			var year = parseInt(prompt("请输入年份:"));
			if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
				alert(year + "是闰年");
			} else {
				alert(year + "不是闰年");
			}
		</script>

3. if else if else

if else 是2选一模式，这个是n选一模式

和条件表达式实现的功能类似

<script type="text/javascript">
    //输入成绩，输出对应的等级 >=90 A,>=80B >=70 C >=60 D <60不及格  0-100之间的
    var score=parseInt(prompt("请输入成绩:"))
    if(score<0||score>100){
        alert('成绩无效');
    }else if(score>=90){
        alert('A')
    }else if(score>=80){
        alert('B')
    }else if(score>=70){
        alert('C')
    }else if(score>=60){
        alert('D')
    }else {
        alert('E')
    }
</script>

4. switch语句

多路分支，和 if else if有点类似，

注意：

执行流程，当flag和case进行匹配，从匹配到的开始执行，一直遇到break结束.
case 后面的常量要唯一，如果重复，那么逻辑就不正确了

<script type="text/javascript">		
    let flag=prompt("请输入学生成绩等级A-E:");
    switch(flag){
        case 'A':
            console.log(">=90");
            break;
        case 'B':
            console.log(">=80");
            break;
        case 'C':
            console.log(">=70");
            break;
        case 'D':
            console.log(">=60");
            break;
        case 'E':
            console.log(">=00");
            break;
        default:
            console.log('成绩无效');
    }
</script>

第三章：循环结构

1.while循环

while(表达式){
//循环体
}
当条件为真，做循环体，直到条件为false

	<script type="text/javascript">
        //1+2+3+4+..100=?
        let sum=0;
        var i=1;
        while(i<=100){
            sum+=i; //+=,-=,*=,/=  sum+=i相当于 sum=sum+i;
            i++;
        }
        console.log("1+2+3+..100=",sum);
        //
        //有的时候循环次数是未知的
        //看程序，写出执行结果
        //sum=0+5+4+3+2+1  x=12345 x>0  5 x=1234
        sum=0;
        let x=12345
        while(x>0){
            sum+=x%10;
            x=parseInt(x/10);
        }
        console.log("sum=",sum);

</script>

2.do…while循环

do{
循环体
}while(表达式);
先执行循环体，再判断表达式，如果为真，继续执行。直到假结束。
特点：至少做一次

	<script type="text/javascript">
        /*
			和电脑玩猜数字游戏:
			电脑出随机数0-100之间 [1,100)
			玩家猜数字，电脑给出大了，小了的提示，最后猜对退出。
			电脑给出提示：猜对了，共猜了6次
			*/
        let count=0;//计数器
        let num;//玩家猜的数字
        //Math.random() [0,1)任意小数
        let x=parseInt(Math.random()*(100-1)+1);
        do{
            num=parseInt(prompt("请猜数字:"));
            if(num>x){
                alert("大了");
            }else if(num<x){
                alert("小了");
            }
            count++;//计数器累加
        }while(num!=x);
        alert('恭喜，猜对了，共猜了'+count+'次');
</script>

3.for循环

for(exp1;exp2;expe3){
	循环体
}
含义：先执行exp1,再判断exp2,如果为真，那么执行循环体，再执行表达式3，再判断exp2，为真继续执行，直到假结束。
注意：exp1,exp2,exp3这3个表达式不是必须的，可以省略，但是如果省略，分号不能省略
for(;i<10;){

}
for是用在，当循环次数已知的情况下。其实，这是对while的一种简化

<script type="text/javascript">
    //输出所有的水仙花数			
    //水仙花数是一个三位数，个十百位的立方和等于这个数本身
    //如 153 =1*1*1+5*5*5+3*3*3
    //穷举法
    let a,b,c;
    for(let i=100;i<=999;i++){
        a=parseInt(i/100);
        b=parseInt(i/10)%10;
        c=i%10;
        if(a*a*a+b*b*b+c*c*c==i){
            console.log(i);
        }
    }			
</script>

4. 理解 continue和break

continue:是结束当前循环，进入下一轮循环
break:跳出当前循环
一般情况下，建议大家不要用。

<script type="text/javascript">
    //题目：输入n个数字，输入0作为结束
    //求输入的平均数
    var sum=0;//和
    var count=0;//计数
    var num;
    //进入死循环,由循环体内容判断退出
    while(true){
        num=parseInt(prompt("请输入数字:"))
        sum+=num;//和累加
        count++;
        if(num==0){
            break;//跳出循环
        }
    }
    alert('平均数为:'+sum/count);
</script>

5.嵌套循环

嵌套循环，循环里面套循环
注意一点，当进入内循环后，要内循环全部做完，再做外循环的

<script type="text/javascript">
    //打印九九乘法表
    /*
			 1*1=1
			 2*1=2 2*2=4
			 3*1=3 3*2=6 3*3=9
			 ....
			*/
    for(let i=1;i<=9;i++){
        //外循环表示行数
        for(let j=1;j<=i;j++){
            //在文档里打印,拼接一个字符串
            document.write(j+"*"+i+"="+j*i+"&nbsp;&nbsp;&nbsp;");
        }
        document.write("<br/>");
    }
</script>