前端基础(三):JS(基本语法)

目录

1.  第一个JS脚本

2.  JS编写位置

2.1 第一种:类似CSS的内联方式

2.2 第二种:在script标签中编写JS代码

2.3 第三种:通过script标签引入外部js文件,跟CSS类似

3. JS语法

3.1 注释,输出,规范

3.2 字面量和变量

3.3 标识符

3.4 数据类型

3.4.1 定义

3.4.2 分类

3.5 类型转换(强制类型转换)

3.5.1 定义

3.5.2 将其他数据类型转换为String

3.5.3 将其他数据类型转换为Number

3.5.4 将其他数据类型转换为Boolean

3.6 运算符

3.6.1 定义

3.6.2 算术运算符

3.6.3 一元运算符

3.6.4 自增自减

3.6.5 逻辑运算符

3.6.6 赋值运算符

3.6.7 关系运算符

3.6.8 相等运算符

3.6.9 条件运算符(三目运算符)

3.7 流控制语句

3.7.1 if 语句

3.7.2 if else 语句

3.7.3 if elseif else 语句

3.7.4 switch 条件分支语句

3.8 其他进制的数字

3.9 循环语句

3.9.1 while 循环语句

3.9.2 do while循环语句

3.9.3 for 循环语句

3.9.4 嵌套for循环语句

3.9.5 break 和 cotinue


【写在前面】

前文链接:

前端基础(一):HTML

前端基础(二):CSS

1.  第一个JS脚本

2.  JS编写位置

2.1 第一种:类似CSS的内联方式

比如:可以在标签的onclick属性中编写JS代码 (点击,激发)。 

<button οnclick=“alert(‘clicked’)”>click</button>

<a href=“java:alert(‘clicked’);”>a标签</a>

缺点:这种写法将结构和行为相互耦合了,不方便维护,不推荐。

2.2 第二种:在script标签中编写JS代码

只能对当前网页起作用,不能跨页面进行复用

2.3 第三种:通过script标签引入外部js文件,跟CSS类似

代码内容放到另外的 .js 文档中(不带<script>标签)

引用:<script type=“text/javascript” src=“./js/script.js”></script>

3. JS语法

3.1 注释,输出,规范

(1)注释

单行注释 //, 多行注释/* */

(2)输出

alert提示框

页面输出

控制台输出 console.log()

(3)规范

JS语句以分号结尾。如果不写分号,浏览器自动添加。开发中最好写。

JS严格区分大小写。

JS中忽略多个空格和换行,所以我们可以利用空格和换行进行格式化。

3.2 字面量和变量

字面量:一些不可改变的值,一般可以直接使用,比如1,2

变量:可用来保存字面量,且变量值可以任意改变。

声明变量:var a;

变量赋值:a = 1;

变量声明和赋值同时进行:var a = 123;

3.3 标识符

定义:js中我们自主命名的,都可成为标识符,比如变量,函数名,属性名等

命名规则:

(1)标识符可包含字母,数字,下划线_,$

(2)不能以数字开头

(3)不能使用ES中的关键字,保留字

(4)一般使用驼峰命名法,即首个单词以小写字母开头,之后的单词以大写开头

(5)JS底层保存标识符时实际上是采用的Unicode编码,理论上讲,所有的utf-8中含有的内容都可以作为标识符 (可以,但不建议这么用)

3.4 数据类型

3.4.1 定义

数据类型即字面量的类型,js中共6种(5种基本数据类型,1种引用数据类型)。

声明时都用 var, 不用声明种类,赋值是用哪种类型赋值,就成为哪种变量。JS是动态语言的一个特点。

String 字符串

Number 数值

Boolean 布尔值

Null 空值

Undefined 未定义

Obeject 对象

3.4.2 分类

(1)String 字符串

字符串需要用引号引起来,单引号和双引号都可以。

同种引号不能嵌套,即双引号里不能放双引号。

字符串的转义,用\作为转义字符,比如:

\" 表示"

\' 表示‘

\n 表示换行

\t 制表符

\\ 表示\

(2)Number 数值

JS中所有的数值都是Number类型,包括整数和浮点数。

Number的最大值:var a = Number.MAX_VALUE;

Number的最小值: var b = Number.MIN_VALUE (不是负数,是一个大于零的一个最小值)

正无穷:var c = Number.MAX_VALUE * Number.MAX_VALUE 得出一个Infinity, 类型还是Number

负无穷: var d = - Number.MAX_VALUE * Number.MAX_VALUE 得出 -Infinity

typeof检查Infinity,返回number

NaN是一个特殊的Number,  表示 Not A Number。 var d = “abd” * “ghj”;

typeof检查NaN,返回number

JS中整数的运算可以保证精度,但如果js进行浮点数运算,结果可能不精确。

(3)Boolean 布尔值

只有 true, false 两个值,用来逻辑判断

用typeof 检查boolean时,返回boolean

(4)Null 空值(空对象)

Null只有一个值,就是null

typeof 检查Null,得到 object,表示一个空对象

(5)Undefined 未定义

只有一个值,就是undefined

var b, 相当于 var b = undefined. 即声明一个变量时,没有给它赋值,那它的值就是undefined

typeof 检查undefined,得到 undefined

(6)Object 对象 (详解见链接文章)

前端基础(四):JS(对象)

3.5 类型转换(强制类型转换)

3.5.1 定义

将一个数据类型强制转换为其他的数据类型。主要是转换为 String, Number, Boolean

3.5.2 将其他数据类型转换为String

(1)方式1: 调用被转换数据类型的 toString()方法

var a = 123;

var b = a.toString() ;

注意: 调用.toString之后,a本身的数据类型不会变,只是调用后它的一个返回值变了. 即返回一个新的String类型的数据。

Number, Boolean有toString()方法。

null, undefined没有这个方法(此时用下面的String()函数转)

(2)方式2:调用String()函数

var b = String(a);

对Number和Boolean来说,实际上就是调用了toString()方法。

对于null和undefined,就不会调用toString方法。这里会将null直接转换为"null",将undefined转换为“undefined”

3.5.3 将其他数据类型转换为Number

(1)方式1:Number()函数

var a = Number(a);

字符串-->数字:

如果是纯数字的字符串,则直接转为数字

如果不是纯数字的字符串,则转换为NaN

如果字符串是一个空串或者是一个全是空格的字符串,则转换为0

布尔-->数字

如果是boolean,则转换为1或者0

null --> 数字

如果是null, 则转换为0

undefined --> 数字

如果是undefined, 则转换为NaN

(2)方式2: parseInt(), parseFloat()

var a = “123px”

var b = parseInt(a);

a = “123.456px”

var c =parseFloat(a)

parseInt() 把一个字符串转换为一个整数。可以将一个字符串中的有效的整数内容取出来。

parseFloat() 把一个字符串转换为一个浮点数。类似parseInt, 它可以获得有效的小数。

如果对非String使用parseInt()或parseFloat(),会先将其转换为String后再操作。

3.5.4 将其他数据类型转换为Boolean

方式:Boolean()函数

var a = Boolean(a);

数字-->布尔

如果是数字转,则除了0和NaN, 转后是false, 其余转了之后得到true

字符串-->布尔

如果是字符串转,除了空串是false, 其余都是true

null --> 布尔

如果是null, 则得到false

undefined --> 布尔

如果是undefined, 则得到false

对象 --> 布尔

如果是对象,则得到true

3.6 运算符

3.6.1 定义

运算符也叫做操作符。通过运算符可以对一个或者多个值进行运算,并获取运算结果。

比如, typeof就是运算符

3.6.2 算术运算符

加 减 乘 除 取余

(1)对非Number类型的值进行运算-*/时,会将这些值转换为Number,然后再运算。

(2)任何值和NaN做运算,都得NaN。

(3)两个字符串用+, 实现拼接

(4)任何值和字符串用+, 都会先转为字符串,然后和字符串拼接

利用该特点,可以将一个任意的数据类型,转换为String: 将任意数据类型+"" (空字符串),即可转为String.  (隐式的类型转换,由浏览器自动完成,也是调用的String函数)

一些特殊情况:

(1)一个数值跟true相加,会将true转为1然后相加

(2)null + 数值 = 数值

(3)undefined +数值 = NaN

(4)NaN + 数值 = NaN

(5)数值+字符串 (不管前后)= 字符串(把数字转换成字符串区拼接)。

即字符串的+拼接,要比加法+等级高 !!!字符串和数值多次拼接,跟顺序有关!!!!

3.6.3 一元运算符

只需要一个操作数

正号+: 对于数字类型,不会产生效果。对其他数据类型使用+, 就是将其转换为number

负号-:数字类型,取反

对于非数字类型,相当于调用了Number()函数,然后再运算

3.6.4 自增自减

自增

前自增:++a 先自增,后取值

后自增:  a++ 先取值,后自增

自减

前自减:--a

后自减:  a- -

3.6.5 逻辑运算符

与 &&, 或||,非!

非!:

对于非boolean类型,会先将变量或字面量转换为boolean,然后再运算(取反...)。

可以利用该特点,可将一个其他数据类型,转换为布尔值:取两次反,即可将其转换为布尔值,规则与Boolean()函数相同。

短路与 &&,短路或 ||

符号两边都有表达式,会先判断前面的表达式,如果前面的表达式已经可以决定结果了,那就不会进行后面的表达式(或者其他的操作)了

3.6.6 赋值运算符

=,+=,-=,*=, /=,%=

3.6.7 关系运算符

用于比较两个值之间的大小关系。关系成立返回true, 反之返回false。

>:大于

>=:大于等于

<:小于

<=:小于等于

== :用来判断两个值是否相等,如果类型不同,会自动进行类型转换再比较

!= :会自动进行类型转换再比较

=== :用来判断两个值是否全等,不会自动进行类型转换

!== :不会自动进行类型转换再比较

有时会用一些非数字类型来进行比较,非数值会先转为数值

字符串的关系运算:JS是一位一位的(ASCII码)去比较

3.6.8 相等运算符

定义:用来比较两个值是否相等,相等返回true

注意:可以通过 isNaN()函数来判断一个值是否是NaN

分类:

==(等于)

会先判断两边两个类型是否一样,不一样的话,会先转换。一般情况下,转换成数字比较多。

一些特殊的情况:

比如:

null ==  0 返回true  ( 因为null转换成数字是0)

null == undefined 返回true. 因为undefined衍生自null

NaN == NaN , 返回false, 因为NaN不和任何值相等,包括它本身

!= (不等于)

使用!=来做不相等运算,不相等也会先对变量进行自动的类型转换,如果转换后相等,它也会返回false  (没毛病,这里是不等,只有不等才返回true)

===(全等)

null === undefined, 返回false

它不会做自动的类型转换,类型不相同的话,直接返回false. 整体比==更严格。

!==(不全等)

不会做自动的类型转换,如果两个值的类型不同,则直接返回true

3.6.9 条件运算符(三目运算符)

语法: 条件表达式?语句1:语句2

如果表达式为true, 则执行语句1, 否则执行语句2。

如果条件表达式的求值结果是一个非布尔值,会将其转换为布尔值然后再运算。

3.7 流控制语句

3.7.1 if 语句

3.7.2 if else 语句

3.7.3 if elseif else 语句

3.7.4 switch 条件分支语句

语法:

switch(判断条件/条件表达式){
    case 判断条件的取值1:
        语句;
        break;
    case 判断条件的取值2:
        语句;
        break;
    default:
        语句;
        break
}

注意:break跳出当前switch,要是没有break,可能在满足某个case之后,随后的多个case语句都会执行(没必要)。

3.8 其他进制的数字

16进制:以0x开头,如 a = 0x1f

8进制:以0开头,如 a = 070

2进制:以 0b开头,如 a = 0b10

进制转换:可以在parseInt()中传递第二个参数,来指定数字的进制。

var a = "070";

a = parseInt(a,10); //得到70

3.9 循环语句

3.9.1 while 循环语句

语法:

while(条件表达式){

        语句…

}

while语句在执行时,先对条件表达式进行判断,如果为true,则执行循环体

补充:

document.write(n + “<br>”);   //该句子打印的内容显示在网页上,console.log是显示在控制台上

document.write(“<br>”);  //页面上打印换行

3.9.2 do while循环语句

语法:

do{

        语句;

}while(判断条件);

3.9.3 for 循环语句

语法:

for(1初始化表达式;2条件表达式;4更新表达式){

        3语句;

}

3.9.4 嵌套for循环语句

!!!双层for 循环

3.9.5 break 和 cotinue

break:

一般情况下,break作用于最近的循环中。也可以设置一个label来标识一个循环,并且通过 break: label 来跳出某个循环。

continue:

结束当前迭代 (不执行当前迭代的剩余语句),进入下一个循环。也可以设置label。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值