JavaScript简介

mac2024-04-07 30

第一章 JavaScript 是什么

JavaScript是一门编程语言,虽然含有Java这个字眼,但是它和java没有半毛钱关系,就跟雷锋和雷峰塔关系一样;

如果说html是一个网页的骨架,那么css即为网页绚丽的外衣;我们的网站想要动起来,有一些动画效果,就需要js这个灵魂;

js能够帮我们完成一些页面的效果,比如轮播,回到顶部,弹出广告等等;

第二章 js如何引入

2.1 正确的引入方式

写在script标签内部,注意script是闭合标签在script标签上有一些属性,比如type="text/javascript",或者language='javascript',在html5中,此类属性可写可不写,但是写一定要写对 script标签可以放置于html的任何位置(style标签内除外),但是一般会被解析到body尾部和head内部; script内部书写的是我们的js代码,其他代码会不予解释或者报错;

2.2 多段script的执行顺序?

按引入顺序,逐段执行(思考为什么n多页面把js写在最后边)

2.3 注释

单行代码使用双斜杠 // 进行注释多行代码可以使用 /*和*/包裹进行注释

第三章变量声明

3.1 命名规范

在js中，我们需要方便的寻找或者使用某个数据，需要给该数据取一个名字(相当于人类的名字，你可以叫籍无名，我也可以叫籍无名，去除这个名字，就是人，也就是数据，而籍无名就是变量)。这个"名字"在编程语言中的概念就是变量；

var a = 123; //看到等号从右往左读取把某个值赋予.. alert(a);

同时因为是"变"量，所以我们可以吧变量中的内容替换掉

var a = 123; a = 456; alert(a); 标志符标志符是指变量,函数,属性的名字或者函数的参数变量的声明要用var第一个字符可以是字母,下划线,美元符号.其他字符可以是字母,下划线,美元符号或者数字.不能和JS原本的关键词和保留字冲突有很多... 标志符中的字母也可以包括含拓展的ASCII或者Unicode字母字符 var a = 34; var b = 45; alert(a+b); var $ = 'jquery'; alert($); c = 56; alert(c);

注意: 如果变量声明不加var 会污染全局变量

第四章变量类型

既然我们理解了变量的概念,那么变量也是分为种类的（就好比有些名字男生用，有些名字女生用）,一个数字和一句话在我们计算机上是分别理解的

js中存在六大数据类型

number 数值类型string 字符串类型boolean 布尔值类型(true/false,注意大小写)function 函数object 对象(包括null 数组)undefined 未定义

我们使用typeof关键字来判断数据类型

var x = 10; //number //数值型不分小数和整数,注意整数的计算精度要远高于小数计算; //我分了两次丢了3毛钱,别人捡了还给我反而多还了; 0.1+0.2 不等于 0.3 var y = '10'//string //一句话一篇文章我们可以看做字符串 //alert(y+y); //alert(x+1+'x'+1); //普通字符串使用单引号和双引号都可以 var x = false; //boolean值 //对和错也可以看做数据类型 //为true/false 注意要严格区分大小写 var x; //undefined //表示声明但是并没有被赋值的未定义，也是一种特殊的数据类型，需要注意的是未定义表示的是有过声明，但是没有具体的值，而并不代表没有声明 alert(x); alert(typeof x);

剩下的几种数据类型我们在后面接触的过程中继续学习;

第五章运算符

加减乘除运算符为 +,-,*,/ 不做赘述;

5.1 取模运算 %

var a = 3; var b = 2; alert(a%b); //1

5.2 字符串拼接+

从左往右加时,碰到第一个非数值类型之后,就理解为字符串拼接;

alert('hello' + 3 + 'world'); alert(2 + 3 + 'hello' + 5 + 'world');

5.3 逻辑运算符

|| 表示"或者"的意思,左右两侧有一者为真则为真&& 表示"且"的意思,左右两侧有一者为假则为假

在逻辑运算符进行运算的时候,会进行隐式类型转换,需要注意的是,以下六种值的结果表示为假(false)

0 , '' , false , null , undefined, NaN

NaN表示"不是数" 是number类型中比较特立独行的一个值,发起飙来连自己都不认,即NaN不等于NaN

是数的场景只有一个a = 1;但是不是数的结果可能有很多,所以NaN不等于自身;（NaN 先不讲，会增加学生理解上的困扰）

var a = 3; var b = 2; var c = a||b; console.log(c);//3 // || 逻辑运算的值为第一个确定该运算结果的值; var a = 3; var b = undefined; var c = a && b; console.log(c);//undefined // 和 || 运算一致, && 运算的返回值依旧为第一个确定该运算结果的值;

我们可以依靠逻辑运算符完成流程控制

var a = 1; var b = null; var c = 3; var d = a || b || c; console.log(d) //同理 a , b , c 不仅仅可以是某个'值',也可以是某个运算或其结果

5.4 比较运算符

常见的比较符有

>, <, >=, <=,==,!=,===,!==

大于,小于,大于等于,小于等于,等于,不等于,全等于,不全等于;

注意在js中=是赋值操作的运算符,而==是在做比较的时候采用的比较符号

在比较的时候,结果只有两种情况,真(true)或者假(false),为布尔值;

var num1 = 4; var num2 = 10; console.log(num1 = num2); console.log(num1 == num2); console.log(num1 <= num2); //满足小于条件,判断正确

对于全等于和等于的判断,在一般情况下的表现是相同的;

弱类型:在运算的时候,变量会进行隐式的类型转换,我们可以称为弱类型语言;

悄悄的进行数据类型的转换;

var num1 = 4; //number var num2 = '4'; //string console.log(num1 == num2); console.log(num1 === num2);

比较运算的时候有时会进行隐式的类型转换,在此例中,==悄悄的把num2类型转换成为数值型做比较,如果我们需要对num1和num2严格相比,采用===,===会首先判断比较的数据的数据类型是否相同,性能要好一些;

第六章控制结构(1)

6.1 if语句

if语句是我们常见的控制结构;

如果某些条件是正确的(成立的),我们就去执行某段代码

书写方式很简单;

var x = 10; var y = "10"; var z = x===y; if(x === y){ alert(1); } if(z){ alert(1); }

一条语句中可以有多个if判断.直到决定结果的值出现.不继续下查找;

实际是if是在判断true/false,不管我们写一些什么,括号里的结果最终都会是布尔值,它也会做一些类型转换;

任何数据在被判断的时候,都会有自己对应的布尔值转换

var num = 10; var str = "你好"; var t = true; var obj = document; if(num){ alert('hello'); } //...

能被转换成false的依然是以下几种

false数值 0空字符串 ""nullundefinedNaN

再写几个案例，if后面的条件不是变量，而是表达式，指明会首先计算表达式，然后再计算if

6.2 if...else/if...else if

6.2.1 if...else

if表示条件成立时执行,条件不成立时执行else中的语句

比较两个数的大小

var num1 = 100; var num2 = 200; if (num1>num2) { console.log("num1:大") }else{ console.log("num2:大") }

6.2.2 if...else if

如果条件分支比较多,则采用if...else if进行判断

判断一个整数，属于哪个范围：大于0；小于0；等于0

我们可以采用另外一种弹窗 prompt 保存我们输入的数据;

var iNum = prompt("请输入一个整数"); if (iNum>0) { alert(+iNum+"大于0"); }else if (iNum<0) { alert(+iNum+"小于0"); }else{ alert(+iNum+"等于0"); }

6.3 三目写法

var a = 111; if(a > 123){ a = '你好'; }else{ a = "emmmm"; }

对于条件是一条语句,真一条语句,假一条语句的判断,可以改写成三目的写法

条件?真语句:假语句 a>123?a = '你好':a = 'emmmm';

最好的写法为:

a = a>123?"你好":"emmmm";

一般逻辑很长的语句也不会用三目进行书写,结果没有if清晰,它也并不能加快执行顺序;

6.3.1 案例

判断一个整数是奇数还是偶数

var a=1001; alert( a+"的值:"+(a%2?"是奇数":"是偶数"));

6.4 switch

我们代码在讲究功能的同时要考虑可读性

var a = 1; if(a === 1){ alert(a); }else if(a === 2){ alert(a); }else if(a === 3){ alert(a); }else{ alert('我也不知道'); }

当我们if else提出的条件过多,并且都为全等于的判断时.可以使用switch基于不同的条件执行不同的动作,我们可以使用switch语句来选择要执行的多个代码块之一;

switch(a){ case 1: console.log('等于1'); break; case 2: console.log("等于2"); break; case 3: console.log("等于3"); break; default : console.log('等于4'); break; }

如果我们不写break的话,会一直进行比较,不会跳出循环,我们只需要找到匹配的即可停止了; 如果都木有找到,使用默认的default;

就比如

var a = 3; switch(a){ case 1: console.log('等于1'); case 2: console.log("等于2"); case 3: console.log("等于3"); default : console.log('等于4'); break; }

会一直console.log所有的结果直到结束;

6.4.1 案例

判断输出结果

var x =2; switch(x){ case 1: console.log(1); case 2: console.log(2); default:break; case 3: console.log(3); }

根据输入的成绩，判定成绩的等级A\B\C\D

switch(core){ case 10: case 9: return 'A'; case 8: return 'B'; case 7: return 'C'; case 6: return 'D'; }

作业:

使用if进行成绩判定

大于85 优秀大于等于75小于等于85 良好大于等于60小于75 及格小于60 不及格

使用三元运算符判断给定一个4位年份是平年还是闰年(自己网上搜索平年和闰年的计算方法)。

使用switch或者if判断给定的某年某月有几天 (两个变量： year表示年，month表示月,弹出天数)

答案:

最新回复(0)