《python全栈工程师 - web开发前端基础》:javascript基础
bbbbbb@[TOC](《python全栈工程师 - web开发前端基础》:javascript基础)
课程目标
- JavaScript简介
- JavaScript变量与变量类型
- JavaScript运算操作符
JavaScript语言基础
JavaScript简介
在JavaScript语言语言出现之前，用户分身乏术的输入都需要提交到服务器，服务器程序对用户的输入进行验证操作。
后来人们觉得如此操作，太浪费资源，如果能直接在页面上做验证是最好的了。
最初的js语言由一家名为Netscape的浏览器提供商开发完成，并获得成功，并把语言名字定为javascript，后来微软为了推出IE的浏览器，也开发了自己的js脚本，称为JScript（实现了javascript功能）
因此，js事实上存在两种实现标准：javascript与JScript。或者说编写js并没有统一语法规范。
在1997年，以javascript1.1为蓝本，由欧洲计算机制造商协会（ECMA）指定39号技术委员会，编写了标准：ECMA-262从此，各浏览器厂家都以此为标准为自己的javascript基础。
javascript的实现包含以下几个部分：
javascript的诞生就是与浏览器绑定在一起的，而浏览器厂家众多，都希望自家的产品占有道德制高点，这就使得javascript的标准从诞生开始就争议不断。
2007年的时候，开始讨论ECMAScript3.0升级的问题，Yahoo、Microsoft、Google、Mozilla（javascript原创者）争吵不休，以致ECMAScript4.0难产，为缓和气氛，该项目取名为Harmony（和谐）。
直到2009年，将ECMAScript3.1版本定位ECMAScript5.0。
2015年，ECMAScript迎来了一次重大改进，将Harmony中的一部分升级实现，这就是ECMAScript6.0。ES6兼容ES5语法，而ES6并不能在所有浏览器上运行。
script元素
JavaScript语言写于标签之间
属性
async-异步执行脚本，不影响其他部分
charset-代码的字符集
defer-脚本延迟到文档完全解析显示后执行
src-加载外部脚本
变量与数据类型
在JavaScript中，所有一切都区分大小写（比如变量名、函数名、属性名）
标识符要求：
1.第一个字符必须为字母或者_、$
2.其他字符可以是字母、_、$、数字
3.ECMAScript规范为驼峰式格式：myFirstName
4.关键字、保留字、true、false、null不能作为标识符
变量的定义：
JavaScript是一个弱类型语言，定义变量不需要指定数据类型
比如：a=3;b=‘10’;a=’‘abc’’
甚至连值都不要指定
var a
var称为操作符，如果变量定义的时候没有设置变量值，变量会被保存为一个特殊的值：undefined（如果你定义了一个变量又没有对它进行赋值，就必须使用var来定义它）
| 数据类型 | 说明 |
|---|---|
| undefined | 变量已定义，但是值未定义，只有一个值“undefined” |
| Boolean | 布尔值(true/false) |
| string | 字符串类型 |
| number | 数字类型，出了数字值之外，还有一个特殊值：NaN,表示得到一个非数字值 |
| object | 对象类型 |
| function | 函数类型 |
| null | 空对象指针，只有一个值null |
可以通过内置函数typeof来检查变量的数据类型
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*
第一个字符必须为字母或者_、$
其他字符可以是字母、_、$、数字
ECMAScritp规定为驼峰式格式：myFirstName
关键字、保留字、true、false、null不能作为标识符
*/
name='a'
myName='b'
my_name='10'
var your_name='abc'
//以下是错误的
//true=100
//false=1000
//for=2000
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*可以通过内置函数typeof来检查变量的数据类型*/
//undefined
//var a
//boolean
//a=true
//b=false
//string
//myString='abc'
//number
//num1=100
//num2=100.0
//num3=+0
//num4=-0
//num5=Infinity
//num6=NaN
//num7="a"/1
//num8=0xAF
//num9=012
console.log(1/-0)//-Infinity
console.log(1/0)//Infinity
console.log("a"/1)//NaN
console.log(1/Infinity)//0
console.log(1/-Infinity)//-0
//十六进制：0x开头
a=0xAF
b=0xA
//八进制：0开头
c=017
d=018//18 因为8超过了进制，这个数变成了十进制里面的18了
//注意浮点数的运算会有问题，浮点数不能直接进行比较大小
0.1+0.2 //0.30000000000000004
//没有复数的原生支持
//对象类型
//obj=new Object()
//函数类型
//function myFun(){ }
//null
//a=null
//typeof(a)检测a变量类型
script>
body>
html>
其他类型转换为布尔类型Boolean
| 数据类型 | 布尔值：true | false |
|---|---|---|
| String | 任何非空字符串 | “” |
| Number | 任何非零数字 | 0或者NaN |
| Object | 任何对象 | null |
| undefined | undefined |
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
// Boolean(" ")
string1 = ""
string2 = " "
num1 = 1
num2 = -1
num3 = 0
num4 = Infinity
num5 = NaN
a = null
b = new Object()
var c
script>
body>
html>
变量类型转换为数字，Number/parseInt/parseFloat，其中Number()可以转换任何类型到数字类型，parseInt()和parseFloat()转换字符串类型为数字类型。
| 数据类型 | 转换结果 |
|---|---|
| Boolean | true转换为1,false转换为0 |
| Undefined | NaN |
| String | 只包含数字（包含浮点数）的字符串，转换为十进制数。包含16进制"0x"的格式的字符串，转换为对应十进制数。空字符串为0，其他的转换为NaN |
| null值 | 0 |
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
// Boolean
// true
// false
// Undefined
// var a
// String
a = "a"
b = ".1"
c = "10"
d = "10.1"
e = "a10"
f = "10px"
g = "10.5px5"
h = "0x15"
i = null
// Object
var o = new Object()
script>
body>
html>
注意：parseFloat()转换十六进制的时候，会判断数字后面是否有小数点，没有则取到0结束
其他数据类型转换为字符串数据类型：
String()、toString()、
String()可以转换任何类型到字符串类型
toString()为大部分值自带的方法，转换数字类型时，可以提供一个进制参数。
| 数据类型 | 转换结果 |
|---|---|
| Boolean | true转换为"true",false转换为"false" |
| Undefined | “undefined” |
| null值 | “null” |
变量类型转换-转为字符串示例代码
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
// Boolean
// true
// false
// Undefined
// var a
// Null
g = null
// Number
a = 10
b = 0x11
c = 011
d = 10.1
e = Infinity
f = NaN
// Object
o = new Object()
script>
body>
html>
操作符
自增、自减操作符：++，–
一元运算符：+，-
加减运算符：+，-
乘性运算符：*，/，%，**
自增、自减代码示例
两者区别
前置：先求值再做自运算
后置：先自运算、再求值
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
// 后置a++， a--
a = 0
a++
b = a++
// 前置++a， --a
a = 0
++a
b = ++a
script>
body>
html>
正负号代码示例
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
// +， -
a = +0
b = -0
//字符串
c = -"10"
d = -"100.1"
e = -"0xAF"
script>
body>
html>
加减运算代码示例
运算规则
1.数值之间按照正常计算
2.如果结果超出范围，返回infinity或者-infinity
3.如果有一个操作数是NaN,则结果还是NaN
4.加法操作符如果两个操作数都是字符串，则将两个操作数进行拼接
5.加法操作符如果一个操作数为字符串，一个不是，则另一个先转换成为字符串，再进行拼接
6.减法操作如果有一个操作数不是数字，那么先转换成数值再进行操作
乘法运算
运算规则：
数值之间按照正常计算
如果结果超出范围，返回infinity或者-infinity
如果结果超出范围，返回infinity或者-infinity
如果有一个操作数是NaN，则结果还是NaN
