JS基础——入门必备

Posted 2020-09-07 Cherish李

·首先，来简单的说一下，JS是啥，JS是javascript的简写，是

基于浏览器的

基于对象的

事件驱动

脚本语言

·那么JS有什么用呢？ta可以实现：

表单验证

添加动画效果

动态更改页面内容

Ajax网络请求

·那么怎么在网页中使用它呢？

可以有三种方式：

1.html中内嵌

<button onclick="javascript:alert(‘young man..骗你的‘)">屠龙宝刀点击就送！</button>

2.在Html页面中直接使用JS

<script type=“text/javascript”>

JavaScript语句；

</script>

【注意事项】页面中JS代码与引用JS代码可以嵌入到Html中任意位置，但是位置不同会影响到JS代码的执行顺序。例如script标签在body前边会在页面加载之前执行JS；

②引用外部JS文件，使用

<script src=" .js" language=“javascript”>

</script>

引用外部JS文件的script标签必须成对出现，且内部不能有任何代码

·下面在来介绍一下JS中的变量：

JS的变量声明不同于C、C++、JAVA之流，要用int long char之类的

①JS中所有变量类型声明，均使用var关键字。变量的具体类型取决于对变量赋值得类型

②同一变量可在多次不同赋值时，改变变量的数据类型

var width = 10; width为整形变量

var width =“11”；width被改为字符串类型

③变量可以使用var 也可以省略

④同一变量名可以多次用var声明，但没任何含义，不会报错。第二次之后的声明，只会被理解为赋值

虽然只用var定义变量，但JS中的变量也是有数据类型的：

undefined 未定义，用var定义的变量未赋值。var a;

Null 代表特殊的变量类型。唯一值为null，表示为空的引用。空的对象，空的数组

number 数值类型。可以使小数，也可以是整数。

string 字符串，用双引号“” 或单引号‘ ‘包裹的内容，称为字符串

boolean 真假，可选值 true /false

object 复杂数据类型

说到这里，当然要强调一下变量的命名规范：

变量名由字母数字下划线和$符，开头不能为数字，区分大小写

变量名命名要符合驼峰法则：

变量开头要小写，之后每个单词首字母大写；

 

·在JS中有几个常用的数值函数非常重要：

① isNAN 用于判断一个变量或者常量是否为NAN（非数值）
　　这个非常非常绕

使用isNAN判断时会尝试使用number（）函数进行转换，如果能转换为数字，则为不是非数值，结果为false；

例如：

“11122”纯数字字符串，false “ ”空字符串，number转化为0，false “ 2la44”true

true / false 布尔类型，false

②Number（）将其他类型转化为数值类型

[字符串类型转数值]

》》字符串为纯数值字符串，会转为对应的数字“111”->111

》》字符串为空时，会转为0

》》字符串包含其他非数字字符时，不能转换“111a”->NaN

[布尔类型转数值]

》》true-> 1

》》false-> 0

[Null转数值]

null->0

[undefined转数值]

undefined-> NaN

[Object]

*先调用Value of方法确定函数是否有返回值，再根据上述情况判断

③parseInt（）将字符串转为数值

》》为空字符串 结果NAN

》》纯数值字符串能转，若有小数，小数点后抹掉，不进行四舍五入

》》包含其他字符字符串，会截取第一个非数值前的数值部分，如果开头字母，则结果为NaN

“123a33”-》123 “a123”-》NaN

只能转字符串类型，boolean/null/undefined 均为NAN

④ parseFloat（）将字符串转为数值，使用方式同parseInt

但转化小数字符串时保留小数点；转化整数字符串时 ，保留整数。

“123.5”->123.5 “125”->125

⑤typeof 用来检测变量数据类型

未定义--返回Undefined

字符串---返回String

true / false ---返回boolean

数值---返回Number

对象/null --返回object

函数--返回function

·JS中的运算符

js中的运算符跟C、java里的基本一样，没有特别注释的用法没什么区别

算术运算

+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

赋值运算

= 赋值

+=：a+=5相当于a=a-5;但前者的执行效率快

-=

*= /= %=

关系运算

== 等于、=== 严格等于、 ！= 不等于、>、<、>=、<=

===：严格等于，类型不同返回false。类型相同，再进行下一步判断

==：类型相同，判断。类型不同，类型不同，尝试将等式两边均用Number（）函数转为数字，在判断。例外：null==Undefined 成立 null===Undefined 不成立

条件运算符(多目运算)

a>b?true:false

有两个关键符号： ？

当？前边的运算结果为true时，执行：前边的代码

当？前边的运算为false时，执行：后边的代码；

可以多层嵌套

逻辑运算符

&&、||、！

重点是运算符的优先级，弄不清楚时，一定要加括号！

（）

！ ++ --

* / %

+ -

> < <= >=

== !=

&&

||

赋值运算符= += -= %=

搞清楚这些才能往下深入学习JS，而不会被弄的团团转。