一.认识JavaScript

1.JavaScript简介

JS是一种高级的,解释型的编程语言,是一门基于原型,头等函数的语言,
是一门多范式的语言,它支持面向对象程序设计,指令式编程以及函数式编程

2.JavaScript的起源

1994年,网景公司(Netscape)发布了Navigaor浏览器0.9版
这是历史上第一个比较成熟的网络浏览器,在当时轰动一时
但是这个版本的浏览器只能用于浏览,不具备与访问者互动的能力,
所以网景公司急需要一种网页脚本语言,可以使得浏览器能与网页互动起来
网景公司招聘了布兰登艾奇,希望将Scheme语言作为网页脚本语言的可能性

3.JavaScript的历史

布兰登艾奇用了十天时间设计出了JavaScript
最初这门语言的名字是Mocha
在Navigator2.0beta版本更名为LiveScirpt
在Navigatorbate3版本正式更名为JavaScript,当时是为了给这门语言
搭上Java这个热词
但是这个语言更像是多种语言的大杂烩:
	借鉴了C语言的基础语法
	借鉴了Java语言的数据类型和内存管理
	借鉴了Scheme语言将函数提升到头等公民的地位
	借鉴了Self语言使用基于原型的继承机制

1996年11月,网景公司正式向ECMA提交语言标准
1997年6月,ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262
ECMA-262是一份标准,定义了ECMAScript
JavaScript成为了ECMAScript最著名的实现之一
除此之外,ActionScript和JScript也都是ECMAScript规范的实现语言
所以说ECMAScript是一种规范,而JavaScript是这种规范的一种实现

4.JavaScript的组成

ECMAScript是JavaScript的标准,描述了该语言的语法和基本的对象
JavaScript是ECMAScript的语言层面的实现
因为除了语言规范之外,JavaScript还需要对页面和浏览器进行各种操作
除了基本实现外,还包括DOM和BOM操作

5.JavaScript由谁来运行?

不同的浏览器由不同的内核组成,
事实上,浏览器内核指的就是浏览器的排版引擎,排版引擎也称为浏览器引擎,
页面渲染引擎或样板引擎
JavaScript代码就是由JavaScript引擎来执行的

6.认识JavaScript引擎

为什么需要JavaScript引擎?
高级的编程语言都是需要被转换成最终的机器指令来执行的
事实上所编写的JS代码无论是交给浏览器或是Node执行,最后都是需要被CPU
所执行的,但CPU只认识自己的指令集,实际上是机器语言,才能被CPU所执行
所以需要JS引擎帮助将编写的JS代码翻译成CPU指令来执行

7.常见的JavaScript引擎

SpiderMonkey: 第一款JavaScript引擎,由布兰登艾奇开发
Chakra: 微软开发
JavaScriptCore: Webkit中的JavaScript引擎,Apple公司开发
V8: Google开发

8.浏览器内核与JS引擎的关系

以Webkit内核为例,Webkit事实上是由两部分组成的:
	WebCore: 负责解析HTML,布局,渲染等相关工作
	JavaScriptCore: 解析,执行JavaScript代码

二. JavaScript的基本语法

1.noscript元素

如果浏览器不支持JavaScript,用于提供替代内容
<noscript>
	您当前的浏览器不支持JavaScript脚本,请更换浏览器
</noscript>

2.JavaScript的交互方式

alert: 接收一个参数,弹窗
document.write: 接收多个字符串,在浏览器页面中查看
console.log(): 接收多个参数,在浏览器控制台查看
propmt: 接收一个参数,输入框

    // 1.
    alert()

    // 2.
    document.write()

    // 3.
    console.log();

    // 4.
    var result = prompt()
    console.log(result);

3.typeof操作符

因为ECMAScript的类型系统是松散的,
所以需要一种手段来确定任意变量的数据类型
对一个值使用typeof操作符会返回下列字符串之一:
	"undefined"表示值未定义
	"boolean"表示值为布尔值
	"string"表示值为字符串
	"number"表示值为数值
	"object"表示值为对象或null
	"function"表示值为函数
	"symbol"表示值为符号
typeof()的用法:
    typeof(x),它与typeof x相同

4.数据类型

Number类型

//1.number类型的基本使用
var age = 18
var height = 1.88

//2. 特殊的数值 Infinity
var num1 = Infinity
var num2 = 1 / 0
console.log(num1, num2) //Infinity Infinity

//3. NaN: not is Number
var result = 3 * "abc"
console.log(result) //NaN 
console.log(isNaN(result)) //true

//4. 进制表示数字
var num3 = 100 //十进制
var num4 = 0x100 //十六进制
var num5 = 0o100 //八进制
var num6 = 0b100 //二进制

//5. 数字可以表示的范围
var max = Number.MAX_VALUE
var min = Number.MIN_VALUE
console.log(max, min)

String类型

// 1.String类型的基本使用
var name = "coderzxx"
var address = "北京市"
var intro = "哈哈哈"

// 2.其他引号的使用
// 单引号
var message1 = 'Hello'
// 双引号
var message2 = "World"
// 反引号
var message3 = `Hello ${name}, ${2 + 3}`

// 3.转义字符: 字符串中本身包含符号
var message4 = 'my name is "coderzxx"'
console.log(message4) //my name is "coderzxx"

var message5 = 'my name \\ \'\' is "coderzxx"'
console.log(message5) //my name \ ' ' is "coderzxx"

// 4.字符串本身有的方法和属性
var message = "Hello World"
console.log(message.length) //11

// 5.字符串的操作
var nickname = "coderzxx"
var infoStr = `my name is ${nickname}`
var info = "my name is"
var infoStr2 = info + nickname
console.log(infoStr) // my name is coderzxx
console.log(infoStr2) //my name is coderzxx

Boolean类型

Boolean类型仅包含两个值: true/false
boolean类型的基本使用:
var isLogin = true
isLogin = false

undefined类型

undefined类型只有一个值,就是特殊值undefined
如果声明一个变量,但是没有对其进行初始化时,此变量的默认值就是undefined
var message
var info = undefined //显式赋值为undefined不推荐
console.log(info === undefined) //true
console.log(message) //undefined

Object类型

Object类型是一个特殊的类型,通常将它称为引用类型或复杂类型,其他的数据类型
通常称为原始类型,因为原始类型的值只包含一个单独的内容(字符串/数字/其他)
Object往往可以表示一组数组,是其他数据的一个集合

// 1.Object类型的基本使用
var person {
  name: "zxx",
  age: 18,
  height: 1.88
}

console.log(person) //{name: zxx, age: 18, height: 1.88}

// 2.访问对象中的某个属性
console.log(person.name) //zxx

Null类型

// 1.其他类型的初始化:
var age = 0
var num = 0
var message = ""
var isAdmin = false

// null存在的意义就是对对象进行初始化的,并且在转换成boolean时,
// 会转为false
var book = null
console.log(typeof book) //Object

5.数据类型的转换

其他类型转为String类型

var num1 = 123
var age = 18
var isAdmin = true

// 1.转换方式一: 隐式转换(常用)
var numStr = num1 + ""
var ageStr = age + ""
var isAdminStr = isAdmin + ""
console.log(typeof numStr) //string
console.log(typeof ageStr) //string
console.log(typeof isAdminStr) //string

// 2.转换方式二: 显式转换
var num1Str = String(num1)
console.log(tyoeof num1Str) //string

其他类型转为Number类型

// 1.方式一: 隐式转换(不常用)
var num1 = "8"
var num2 = "4"
var result = num1 + num2 
console.log(result) //84

//除了 + 都可以隐式转换
var result2 = num1 * num2 
console.log(result2) //32 

// 2.方式二: 显式转换
var result3 = Number(num1)
console.log(typeof result3) //number

// 3.其他数据类型转换为数字类型的规则:
console.log(Number(undefined)) //NaN
console.log(Number(null)) //0
console.log(Number("")) //0
console.log(Number(true)) //1
console.log(Number(false)) //0
console.log(Number("abc123")) //NaN
console.log(Number("123abc")) //NaN
console.log(Number("       123       ")) //123

其他类型转为Boolean类型

// 1.方式一: 隐式转换
var isAdmin = true
var num1 = 123 //true

// 2.方式二: 显式转换
console.log(Boolean(num1), Boolean(undefined)) //true, false

boolean转换有如下规则: 
直观上为空的值,转成Boolean类型都是false
直观上为空的值: 0 "" undefined null NaN

注意事项:
console.log(Boolean("")) //false
console.log(Boolean("0")) //true

三.JavaScript运算符

1.认识运算元

运算元: 运算符应用的对象
例如: 5 * 2, 有两个运算元, 左运算元5, 右运算元2

2.算数运算符

// + - * /
var num1 = 5
var num2 = 8
var result = num1 + num2

// 取余操作
var num = 20
var result2 = num % 2

// 2**3 2的三次方
console.log(2 ** 4)
    console.log(Math.pow(2, 4))

3.赋值运算符

var num = 123 

// 链式赋值
var num1 = num2 = num3 = 321
console.log(num1, num2, num3) 321 321 321

4.自增自减运算符

var currentIndex = 5
// 自增
currentIndex++
console.log(currentIndex) //6

// 自减
currentIndex--
console.log(currentIndex) //4

++和--的位置:
++--可以置于变量前或变量后
如果想要对变量进行操作,并且需要立即使用自增后的值,那么需要使用前置形式
前置形式返回一个新的值,但后置形式返回的是原来的值

5.比较运算符

var num1 = 20
var num2 = 30

var result = num > num2
console.log(result) //false

// 2.==判断
console.log(num1 == num2) //false
console.log(num1 != num2) //true

6.==与===的区别

var foo1 = 0
var foo2 = ""

// ==: 在数据类型不相同的情况下,会将运算元先隐式转换成Number的值,再进行比较
// null比较特殊,null在进行比较的时候,可能是被当成一个对象和原始类型进行比较的
console.log(Number(foo1)) //0
console.log(Number(foo2)) //0
console.log(foo1 == foo2) //true

// ===: 在数据类型不相同的情况下,会直接返回false
console.log(foo1 === foo2) //false

7.三元运算符

// 计算条件结果: 结果为true返回value1, 结果为false返回value2
var result = condition ? value1 : value2

//练习一:
var num1 = 100
var num2 = 200
var result = num1 > num2 ? true : false
console.log(result) //false

//练习二:
var message = 22
var result = message > 18 ? "成年" : "未成年"
console.log(result) //成年

8.逻辑运算符

var chineseScore = 88
var mathScore = 99

//1. 逻辑与&&
// 所有条件都为true的时候,最终的结果才为true
// 练习: 如果语文90分以上,就去游乐场
if(chineseScore > 90 && mathScore) {
   console.log("去游乐场")
}

//2. 逻辑或||
//只有一个条件为true时,最终结果则为true
练习: 如果有一门成绩大于90,可以打一小时游戏
if(chineseScore > 90 || mathScore > 90) {
    console.log("打一小时游戏")
}

//3. 逻辑非 !
var isLogin = true
if(!isLogin) {
   console.log("跳转到登录页面")
   console.log("进行登录")
}
console.log("正常的访问页面")

9.逻辑或的本质

/*
    1.先将运算元转成Boolean类型
    2.对转成的boolean类型进行判断
        如果为true,直接将结果(原始值)返回
        如果为false,则继续进行第二个运算元的判断,以此类推
    3.如果找到最后也没有找到,那么会返回最后一个运算元
*/

var name = "zxx"
// name || 运算元2 || 运算元3

// 本质推导一: 之前的多条件是如何进行判断的
var chineseScore = 88
var mathScore = 99
// chineseScore > 85为true,那么后续的条件都不会再进行判断
if(chineseScore > 85 || mathScore > 90) {}

//本质推导二: 获取第一个有值的结果
var info = "abc"
var obj = {name: "zxx"}
var message = info || obj || "我是默认值"
console.log(message) // abc

10.逻辑与的本质

  // 运算元1 && 运算元2 && 运算元3
    /*
      也可以脱离条件判断来使用
      逻辑与的本质
       1.拿到第一个运算元, 将运算元转成Boolean类型
       2.对运算元的Boolean类型进行判断
         * 如果false, 返回运算元(原始值)
         * 如果true, 查找下一个继续来运算
         * 以此类推
       3.如果查找了所有的都为true, 那么返回最后一个运算元(原始值)
    */

    // 本质推导一: 逻辑与, 称之为短路与
    var chineseScore = 80
    var mathScore = 99
    if (chineseScore > 90 && mathScore > 90) {}

    // 本质推导二: 对一些对象中的方法进行有值判断
    var obj = {
      name: "why",
      friend: {
        name: "kobe",
        eating: function() {
          console.log("eat something")
        }
      }
    }

    // 调用eating函数
    // obj.friend.eating()
    obj && obj.friend && obj.friend.eating && obj.friend.eating()

11.逻辑非的补充

    var message = "Hello World"
    console.log(Boolean(message)) //true
    console.log(!!message) // true


    var obj = null
    console.log(Boolean(obj)) // false
    console.log(!!obj) // false

四.分支语句与循环语句

1.switch分支

通过表达式的结果(或者变量)是否等于case语句的常量来执行相应的分支体
与if的不同点: switch语句只能做值的相等判断(默认使用的是===),而if语句可以做值的范围判断
switch的语法: switch语句至少有一个case代码块和一个可选的default代码块

var btnIndex = 0
switch(btnIndex) {
   case 0: 
       console.log("点击了上一首")
       break
   case 1:
       console.log("点击了播放/暂停")
       // 默认情况下是有case穿透
       break
   case 2:
       console.log("点击了下一首停")
       break
  default:
       console.log("当前按钮的索引有问题~")
       break
}

2.whilte循环

//死循环
while(true) {
    console.log("hello")
}
    
var i = 0
while(i <= 10) {
    console.log(i)
}

3.do..while循环

do {
  循环体
  迭代条件
}while(条件表达式)

var i = 1
do{
  console.log(i)
}while(i <= 10)

4.循环嵌套

for(var i = 0; i < 10; i++) {
    for(var j = 0; j < 3; j++) {
        console.log("内层循环执行",j)
    }
    console.log("外层循环结束",i)
}

5.break和containue

    var names = ["kobe", "nba", "cba", "abc", "aaa", "bbb"]

    for(var i = 0; i < names.length; i++) {
      if (names[i] ==="abc"){
        break //直接结束整个循环
      }
      console.log(names[i])
    }

    console.log("------")

    for (var j = 0; j < names.length; j++){
      if (names[j] === "aaa"){
        continue //跳过当前循环,继续执行下一次循环
      }
      console.log(names[j])
    } 

6.生成随机数

    // 生成一个0~99的随机数
    for(var i = 0; i < 5; i++) {
      var randomNum = Math.floor( Math.random() * 100)
      console.log(randomNum)
    }

五.JavaScript函数

1.认识函数

函数其实就是对某段代码的封装,这段代码帮助我们完成某一个功能
默认情况下JavaScript引擎或者浏览器会提供一些已经实现好的函数,也可以自己编写属于自己的函数

2.函数的使用步骤

使用函数包含两个步骤:
    1.声明函数 -> 封装独立的功能
    2.调用函数 -> 享受封装的成果

3.声明函数与调用函数

声明函数使用function关键字,这种写法称为函数的定义
function 函数名() {}
函数定义完之后里面的代码是不会自动执行的,函数必须经过调用才能被执行
调用函数通过函数名()即可,比如test()

4.函数的参数

形参: 定义函数时后面的小括号是用来接收参数用的,在函数内部作为变量使用
实参: 调用函数时后面的小括号是用来把数据传递到函数内部用的

    // name/age/height称之为函数的参数,形参/形式参数
    function printInfo(name, age, height) {
      console.log(`my name is ${name}`)
      console.log(`age is ${age}`)
      console.log(`height is ${height}`)
    }

    // zxx/22/2.13称之为函数的实参/实际参数
    printInfo("zxx", 22, 1.88)

    function sum(num1, num2) {
      console.log(num1 + num2)
    }

    sum(20,30)
    sum(30, 30)

5.函数的返回值

// 1.返回值的注意事项:
// 注意一: 所有的函数,如果没有明确的写返回值,那么函数会默认返回undefined
function foo() {
  console.log("foo function")
}

var result = foo()
console.log("foo的返回值",result) //undefined

// 注意二: 如果写了return,但后面什么内容都没有时,也表示是返回undefined
function bar() {
  console.log("bar function")
  return
}

var result = bar()
console.log("bar的返回值",result) //undefined

// 注意三: 如果在函数内执行到return关键字时,函数会立即结束
function baz() {
   console.log("第一行")
   console.log("第二行")
   return
   console.log("第三行")
}

baz() //第一行&第二行

// 函数的具体返回值
function sum(num1, num2) {
   var result = num1 + num2
   return result
}

var result = sum(10, 20)
console.log(result) //30