day10

JavaScript 基础语法

1 JavaScript

1.1 特点

  • 解释型 浏览器

  • 弱类型 声明变量不用指定数据类型 同python

  • 基于对象

  • 跨平台性

  • 事件驱动

1.2 JavaScript版本

  • ECMAScript3.0

  • ECMAScript5.0

  • ECMAScript6.0 (ECMA2015、ECMAScript2016、ECMAScript2017)

1.3 应用领域

  • WEB前端 (网页)

  • 后端 (node.js)

  • 混合APP(IOS 安卓)

  • 游戏

 

 

2 浏览器中JavaScript的基本语法

2.1 在HTML中使用JS

引入外部的 js 文件。类似于 CSS的link
<script src="js文件的地址"></script>
<script src="js文件的地址"></script>
<script src="js文件的地址"></script>

在htm中直接写,包裹在script标签中,类似css的style
<script>
   code...  js代码
</script>

2.2 指令结束符

#第一种   ;
#第二种 换行

2.3 注释

// 单行注释

/*
多行注释
*/

2.4 变量

var 变量名 = 值;
* var 关键字
* 变量名 由数字、字母、下划线、$ 组成 不能数字开头。 变量名不能使关键字
* 变量名严格区分大小写
* 变量声明 没给值,默认值是undefined

2.5 输出内容

console.log()  输出到控制台
document.write() 输出到页面
alert()   弹出

 

3 JS程序用到的知识点

弹框

alert()   警告框   没有返回值
confirm() 确认框   返回布尔值
prompt()   输入框   返回用户输入的内容,点确定。   点取消,null

获取页面中的元素 作为js对象

document.getElementById()  #返回对象,通常会称作元素对象

元素对象与 HTML元素 存在映射关系
元素对象用来描述某个HTML元素
HTML元素的属性,会映射成 元素对象的 属性

双标签元素里面的内容

eleObj.innerHTML 获取/设置

 

 

3 JavaScript 数据类型

3.1 数据类型

  • 原始类型 Number(数字)、 String(字符串)、Boolean(布尔值)、Null(空)、Undefined(未定义)

  • 对象类型 Object、Array、Date、Math、Error Set(ES6).....

 

3.2 Number

  • js不区分 整型和 浮点型

  • 定义方式

    //十进制
    var num = 100
    //十六进制
    var num = 0x10f
    //科学计数法
    var num = 123e100
  • 特殊值 NaN

    NaN跟任何值进行任何运算,结果仍然NaN
    跟谁都不相等,包括自己

    一般NaN被动产生(数据类型转为Number,不能转为正常的数字,就是NaN)
    函数 isNaN() 判断是不是NaN或者能不能转换为NaN

 

3.3 String 字符串

# 单引号
# 双引号
# 反引号 模板字符串 ` `
单引号 双引号 没有区别
反引号:
多行
可以支持中 ${变量} 添加变量

 

3.4 布尔值

true
false

 

3.5 Null和undefined

被动产生

 

3.6 数据类型转换

强制转换

Number()
字符串:纯数字转为正常的数字,其他NaN
布尔值: true->1 false->0

String()


Boolean()
字符串->布尔: 只有空字符串转为false,其他true
数字->布尔: 0和NaN是false,其他true
null和undefined都会转为false

 

自动转换

根据运算符 做出适当的类型转换

 

4 运算符

4.1 算术运算符

+  加号 正号
- 减法 负号
*  
/
%
++ 累加
-- 累减

 

4.2 比较运算符

>
>=
<
<=
== 相等     两个操作数 只要值相等(类型不同会自动转换) 就相等  
=== 全等     类型和值都要相同才全等
!= 不得
!== 不全等
in 判断 数组的索引 和 对象的属性 是否存在
instanceof 一个对象是否属于某个构造函数(类)

 

4.3 逻辑运算符

&&   逻辑与and
||   逻辑或or
!   逻辑非not

 

4.4 位运算符

&
|
~
^
<<
>>

 

4.5 赋值运算符

=
+=
-=
*=
/=
%=

 

4.6 其他运算符

+   字符串连接符
?: 比较运算符   表达式?值1:值2
typeof 判断类型
delete 删除对象的属性和数组的成员
void 空运算符
,   逗号运算符

 

 

 

总结

  • ECMAScript和JavaScript ES6(ES2015)

  • 在HTML中使用 js。 <script></script>

  • js的基本语法: 注释,指令结束符(;换行) 变量、 输出内容

  • js程序: 获取页面的元素,元素对的属性。 事件 函数

  • 数据类型: 原始类型 (Number string boolean null undefined) 对象类型(array、object)

  • 运算符: 算术运算符(++ 、--) 比较运算符(== 、===、!=、!==) 、 位运算符、逻辑运算符、赋值运算符、其他(字符串连接符、比较运算符、typeof )

 

作用

  • 整理笔记

  • 完善简易计算器, 加减乘除、归0 Math.pow()

  •  

posted @ 2018-08-08 16:11  xujinjin  阅读(100)  评论(0编辑  收藏  举报