javascript
网页三剑客
- 一阶段 html5 + css3（静态页面） 网页合成工程师 3-5k
- 二阶段 javascript 前端工程师 7-14k
javascript能做啥
- 网页交互
- 网页的行为交互 用户点击 双击 拖拽效果
- 网页动画
- 数据交互，网页上面的数据都是活的 不是写死的
javascript历史背景
-
最早的浏览器 navigator（导航者）由网景(netscape)公司生产的
-
最早的网页只能看 不能进行交互行为
-
网景请了javascript之父 布兰登.艾奇 花了10天创建了livescript，希望推广这门语言，将这门语言改名为javascript
-
IE也想要有navigator功能 自己创建了一个类似于livescript的语言 叫做Jscript
-
这样开发者开发一个网站需要写两套代码
-
网景将javascript移交给ECMA(欧洲计算机制造商协会)由ECMA统一一个标准，推出了一个ECMAScript标准
-
我们学习的ECMAScript是5.0版本 --> es5
-
javascript和ECMAscript有什么区别？
-
javascript组成部分
- ECMAscript标准语法（前四周）
- DOM
- BOM
-
js的三种写法
- 行内
- 在标签上面直接写onclick="javascript: js代码"
- 行内的js一般不推荐
- 内部（推荐）
- 在html页面里面写上script，在script里面写js代码
- 外部（推荐）
- 在文件夹新建一个js文件，利用script标签src属性引入js文件
- 一般推荐script标签的位置是在body的最后，因为js会报错
- 一个script标签是无法支持内部和外部同时使用，一旦使用了会出现内部的js不会执行
- 行内
-
注释
- 单行注释
- // 注释内容
- 单行注释快捷键 ctrl+/
- 多行注释
- /* 注释内容 */
- 多行注释快捷键 ctrl+shift+/
- 作用
- 注释是写给开发人员看的
- 方便代码的维护
- 单行注释
-
变量 variable
- 变量就是在计算机中以命名的方式存储一个数据，在我们使用这个数据的时候可以根据这个名称找到这个数据，拿过来使用
- 存的过程（定义变量）
- var 变量名 = 数据
- 取的过程
- 变量名
- 思考题
- 定义变量名的时候没有给他数据 用变量的时候得到的是undefined
- var 变量名
- 变量名
- 直接使用一个未曾定义过的变量 会报错 报这个变量not defined
- 变量名
- 定义变量名的时候没有给他数据 用变量的时候得到的是undefined
-
变量命名规则和规范
- 规则： ECMAscript定义 必须要遵循的，如果不遵循就会报错
- 变量名是由 英文、数字、下划线、$组成，不能以数字开头
- 名称的中间不能有空格
- 严格区分大小写
- 不能是关键字和保留字
- 关键字： js正在使用的单词 var if else for
- 保留字： js未来版本可能会用到的单词 class long
- 规范：行内的前辈们定义 不遵循不会报错
- 命名要语义化（见名知义）
- 小驼峰命名法
- 多个单词组成一个变量名，从第二个单词开始首字母大写
- 规则： ECMAscript定义 必须要遵循的，如果不遵循就会报错
数据类型
- 基础的数据类型
- 字符串 string
- 数值 number
- 十进制 0 1 2 3 4 5 6 7 8 9
- 二进制 0 1
- 八进制 0 1 2 3 4 5 6 7
- 十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f
- 布尔 boolean
- undefined
- null
- 区分类型
- 通过控制台打印 看颜色区分 console.log(数据)
- 布尔值、数值在控制台是蓝色
- 字符串在控制台是黑色
- undefined和null在控制台打印是浅灰色
- 检测数据类型的方法
- typeof(数据)
- typeof 数据 推荐使用
- 得到一个该数据的类型单词
- 数值的会返回 'number'
- 字符串的会返回 'string'
- 布尔的会返回 'boolean'
- undefined会返回'undefined'
- null会返回'object'
- 通过控制台打印 看颜色区分 console.log(数据)
- 数据类型转换
-
把一个数据类型转换成另一个数据类型
-
把其他类型转换成数值
- 三种方法
- Number(数据)
- parseInt(数据)
- parseFloat(数据)
- 布尔类型、undefined、null转数值采用Number方法进行转换
- true --> 1
- false --> 0
- undefined --> NaN
- null --> 0
- 字符串
- 纯数字的字符串采用Number方法进行转换
- 非纯数字如果需要有小数点用parseFloat如果不需要有小数点用parseInt
- 三种方法
-
把其他类型转换成字符串
- 两种方法
- String(数据)
- 数据.toString()
- 两种方法
-
把其他类型转换成布尔值
- 一种方法
- Boolean(数据)
- 0 NaN 空字符 undefined null会转换成false 其他都是true
- 一种方法
-
把其他类型转换成undefined
- var num = 10
- num = undefined
-
把其他类型转换成null
-
实例
（以下代码均为课程实例）
（1）js的三种写法
<script src="./01.js"></script>
（2）js的注释
<script>
// 单行注释，只能写一行，换行写就报错了
/* 多行注释，
多行注释
可以换行写
*/
// 注释的内容
/* */
</script>
（3）js的变量
<script>
// 完成了变量存储 将jack以username名称存储到计算机里面
var username = 'jack'
// 使用数据 取数据 只需要根据名称找到这个数据
alert(username)
// 名称在使用的时候不能够加单引号或者双引号
// alert('username')
</script>
（4）变量命名规范
<script>
// 语义化
var height = 180
var weight = 100
// a代表身高
var a = 180
// b代表体重
var b = 100
var c = 90
var internationalized
// 小驼峰命名法
var myFristName
</script>
（5）数据类型
<script>
// js的五大基础数据类型
// 字符串 凡是被单引号或者双引号包裹的都是字符串
var a = 'hello world'
var b = "hello world"
// 数值 数值一旦加了单引号或者双引号就变为字符串
var c = 1
var d = -1
var e = 1.1
// 布尔值 代表是真还是假
var f = true
var f1 = True // 严格区分大小写 如果是字母不加单引号或者双引号js会当成一个变量
var g = false
var g1 = False
// undefined
var x // undefined是js变量默认的值
var x1 = undefined
// null
var y = null
var y1 = Null
</script>
（6）进制
<script>
// js里面默认的数字就是十进制
var num = 10
// 定义其他进制需要加前缀
// 二进制 0b
var num1 = 0b10
alert(num1)
// 八进制 0o
var num2 = 0o10
alert(num2)
// 十六进制 0x
var num3 = 0x10
alert(num3)
// 把某一个十进制转换 二进制 八进制 十六进制 233
// 把某一个二进制 八进制 十六进制转换成 10进制
</script>
（7）区分数据类型
<script>
var num = 1
// 在控制台输出
console.log(num)
console.log(typeof(num))
console.log(typeof num)
var num2 = '1'
console.log(num2)
console.log(typeof(num2))
console.log(typeof num2)
var bool = true
var bool2 = false
console.log(bool)
console.log(typeof(bool))
console.log(bool2)
var x
console.log(x)
console.log(typeof(x))
var y = null
console.log(y)
console.log(typeof(y))
</script>
（8）用户输入数据
<script>
var content = prompt('请输入一个数字')
console.log(content)
</script>
（9）其他类型转数值
<script>
/*
Number方法会将数据当成一个整体转换成数值
parseInt会从第一位开始识别，判断每一位是不是数字，如果是数字就继续往后找
如果不是数字就停止 返回前面识别的数字（不能识别小数点）如果第一位就不是数字就直接返回NaN
parseFloat会从第一位开始识别，判断每一位是不是数字，如果是数字就继续往后找
如果不是数字就停止 返回前面识别的数字（能识别第一个小数点）如果第一位就不是数字就直接返回NaN
*/
// 字符串类型
// 纯数字字符串
var str = '10'
var str2 = '10.1'
// 采用Number方法转换
console.log(Number(str))
console.log(Number(str2))
console.log(parseInt(str))
console.log(parseFloat(str))
console.log(parseInt(str2)) // 小数点就丢失了
console.log(parseFloat(str2))
// 非纯数字字符串
var str3 = '10px'
var str4 = '1.1@0px'
var str5 = 'hello'
// 采用Number转换
console.log(Number(str3))
console.log(Number(str4))
console.log(Number(str5))
// 采用parseInt
console.log(parseInt(str3))
console.log(parseInt(str4))
console.log(parseInt(str5))
// 采用parseFloat
console.log(parseFloat(str3))
console.log(parseFloat(str4))
console.log(parseFloat(str5))
// 布尔类型 true false
var bool = true
var bool2 = false
// 采用Number来转换
var num = Number(bool)
console.log(num) // 1
var num2 = Number(bool2)
console.log(num2) // 0
// 采用parseInt转换
var num3 = parseInt(bool)
console.log(num3) // NaN
// 采用parseFloat转换
var num4 = parseFloat(bool)
console.log(num4) // NaN
// undefined
var x
// 采用Number转换
console.log(Number(x)) // NaN
console.log(parseInt(x)) // NaN
console.log(parseFloat(x)) // NaN
// null
var y = null
// 采用Number转换
console.log(Number(y)) // 0
console.log(parseInt(y)) // NaN
console.log(parseFloat(y)) // NaN
</script>
（10）其他类型转布尔值
<script>
// 数值 只有0和NaN会转换成false 其他都是true
var num = 0
console.log(Boolean(num))
var num1 = 0.0000001
console.log(Boolean(num1))
var num2 = NaN
console.log(Boolean(num2))
// 字符串 只有空字符串会转换成false 其他的都是true
var str = '' // 空字符
console.log(Boolean(str))
var str1 = ' ' // 非空字符串
console.log(Boolean(str1))
// undefined
var x
console.log(Boolean(x)) // false
// null
var y = null
console.log(Boolean(y)) // false
</script>
