js的基础知识

雷迪斯and the乡亲们  欢迎你们来到 奇幻的编程世界 

上一篇呢！我的css就完事了，联合我们之前所学的html，就可以制作网页了，大家可以尝试一下。

今天我们来学一下js，也挺有意思的，开始吧！

---

js（JavaScript）

事件驱动式编程语言，（所有的事件都会有功能来响应)   在浏览器中所有的操作称之为事件

为什么要使用js（跟用户进行交互）

表单验证（可以数据是否合法）

网页特效

游戏(贪吃蛇、打地鼠、别踩白块、2048、抽奖大转盘）

js可以写在网页中的任何位置     script 

<script></script>

那么如何写一个js代码

on事件  click点击  blur失去焦点

function功能   inner text标记模板

（针对以上这一个标签，我们来练几个例子）

让我们来看一下效果，点击之前

点击之后

开始使用js

1.行内js写在html标签里

点击之前的效果

点击只后的效果，是不是挺有意思的啊！

2.内嵌js 在一对script标签内操作

3.外部链接js（引入其他的js文件）使用script标签

script加上src属性  则script标签中间不可以写内容

以上就是js的三种使用方式

---

js的输出方式

四种输出方式，这四种输出内容的地方不一样

警告框、页面、标签理、控制台

1.alert（''）警告框

输入的内容如果是字母或者中文，则需要加上引号

2.document.write（'')

在文档中写入内容

3.标签.innerText

（将标签当作普通文本输出）  往内部写入文本 (注意大小写)

 

 标签.innerHTML

(解析标签，认识标签)  往内部写入文本 (注意大小写)

4.console.log()

在控制台输出内容，经常在调试代码中使用

以上就是js的四种输出方式

---

js的语法

1.每行语句的结尾需要加;

2.注释 单行 //内容   多行 /* 注释的内容*/

3.变量

一、什么是变量 （容器-箱子）存储某些值的容器，为了区分各种箱子，给箱子加名字box1,box1就是变量名

var 变量名 = 变量值

二、变量名的要求：

1.不能以数字开头

 2.不建议使用中文

3.只能使用字母、数字、下划线 $ 来命名，但是数字不能开头

4.严格区分大小写，A和a是完全两个不同的变量

5.不能使用js提供的关键词来作变量名

---

js的数据类型

typeof（）获取类型

一、数值类型  number

123；12.3；-123

二、字符串类型string

 加上了引号的 就是字符串类型

 引号 自己不能嵌套自己，可以相互嵌套

'haolou'

'1212'

'你"今天又美"啦！'

三、布尔类型 bool （真true、假false）

console.log(10>8); //true

console.log(10<8); //false

四、 undefined类型  未定义

 (如果出现了这个类型，意味着变量是没有值的)

  如果定义变量时 没有赋值 ，那么变量默认的值是undefined

  数据类型 undefined;

五、null  空类型 object对象类型  

（空值，可以用于释放变量内容，删除）

    // 如果明确想表示一个变量没有值 ，就可以设为 null。

温馨提示：

undefiend经常是未定义，有默认值 undefined。   null 空值

---

隐性转换   显性转换

---

js转换为数值

什么是数据类型转换

将一些数据本来的类型 转换成其他的类型(number数值类型、string字符串类型、boolean布尔类型)

一、转换数值类型（Number函数(转换的变量)）

1.字符串 只能转换纯数字的字符串，否则会得到一个值NAN 、not、 a 、number不是一个数值

空字符串或纯空格字符串 得到0

console.log(typeof(Number()));

2. 布尔类型 (true =1  false=0)

3.null   转换成数值类型 0

undefined   转换成数值类型 NAN

 总结：

使用Number()

字符串 转 数值  

是纯数字  则直接转换相应的数字  '100' => 100

不是纯数字则转换为 NAN         '100a'=> NAN

空字符串或纯空格  转换 0        ''或'    '=>0

布尔   转 数值

true  转换成  1

false  转换成 0

null  转 数值 0

undefined 转数值  NAN

parseInt解析成整数

    // 专门用于将字符串转成数字

parseFloat解析成小数

    // 专门用于将字符串转成数字

---

js类型转换的应用

三种弹窗

    // alert('警告框')

    // // 用户选择之后 这个函数会得到一个值  确定 true   取消 false

 var num1 = prompt('请输入第一个数字')

    // var num2 = prompt('请输入第二个数字')

    // +  两侧必须是数值类型 才会相加  ，如果有一侧是字符串 会拼接

---

js转换为字符串

二、转换为字符串类型。

一、数值变量.toFixed(保留的小数位)

  1- 数值转为字符串类型

  2- 保留指定小数位，四舍五入

  3- 只能用于数值类型

   toString  强制将其他类型转换为字符串类型（加引号）

二、变量.toString();

 三、String(变量值)

---

js转换为bool类型

转换为布尔类型（true、false）

字符串转换布尔      非空即真（空字符串 ''为假，其他的都为真）

数值转布尔          除了0 和NAN之外，都为真

null undefined     假

    // Boolean()

---

js的运算符

可以进行运算的符号 被称为运算符

       //赋值运算符   =

算数运算符   + - * / %  ++  --

1.加法运算（

        1-1执行加法运算  非字符串

        1-2拼接字符串   有任何一个是字符串类型，则是拼接

2.减法运算

 乘法/除法运算

//取余%运算符 模  

++ 运算符（让变量的值+1）

   // 前++   ++x  先自增1，在参与其他运算

   // 后++   x++  先进行其他运算，再自增加1

---

js赋值运算符

    = 赋值操作

    +=   a += 10 展开   a = a + 10

    -=

    *=

    /=

    %=

---

js的比较运算符

>  

>=

<

<=

==  判断左右两边的值是否相等，相等则true

!=  判断左右两边是否不相等，不相等则true

===

!==

---

js的逻辑运算符

 &&  与   并且

    ||  或   或者

    !   非   true

&& 并且  表达式 && 表达式   必须同时true 才会成立

||  有一个为真 则为真

 ! 取反  （true  false）