js基础老师笔记

一.计算机基础知识

1.编程语言

​ 机器语言： 0 1

​ 汇编语言： % # #*& *&

​ 高级语言: Java python c c++ c# go php javascript，node andriod objective-c swift

注意点： html css 不是编程语言 标记语言

2.计算机组成

​ 硬件：显示器，… 硬盘 内存

​ 硬盘：可以永久存储数据

​ 内存： 数据计算空间（容器）

软件： 操作系统（windows macOS Linux andriod ios）-> 应用软件（qq,云音乐…）

存储单位： 1G = 1024M 1m= 1024K 1k= 1024B

二.javascript入门

1.概念

​ javascript是一门运行在’客户端‘，面向对象的 ，事件驱动的，单线程的 编程语言。

2.js的作用

• 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）

• 网页特效（webAPI）

• 服务端开发(Node.js)

• 桌面程序(Electron)

• App(flutter)

• 控制硬件-物联网(Ruff)

• 游戏开发(cocos2d-js)

  网站开发：vue.js 微信小程序 react.js

3.js代码是怎么执行

浏览器内核分为两部分：渲染引擎 解析引擎

渲染引擎：解析html css

解析引擎: 解析javascript

4.js的组成

分为三部分：ECMAScript 与 DOM,BOM

1.ECMAScript(欧州机算机标准协会): 制定js的语法规范

2.DOM与BOM: 可以做浏览器上网页特效（webAPI）

了解一下原生javasript有哪些: js基础语法，webAPI, js高级，ajax

5.js代码的书写位置

1.行内式(一般不会写行内式的js，了解即可)

<div onclick="alert(123)">点我</div>     //当点击时触发点击事件

2.内嵌式

<script>
    这里写js代码
</script>

3.外联式

<script src='xxx.js'>不要在这里写js代码</script>

6.js中的注释

1.内行注释 ctrl + /

2.多行注释

7.js的常见的输入方式

alert(‘xxx’) 警式框

console.log(‘xxxx’) 控制台语句

prompt(‘请输入你的信息’) 输入框

confirm(‘你确定要删除码’) 确定选择框

三.js基础

编程的三要素：数据 流程控制 函数

“xiaosa” 18

1.数据

1.1变量

作用

是一个存放数据的空间 , 这个空间只能存放一个数据

变量的使用

// 变量分为两个部分:   变量名   变量值
// 1.声明变量名 var === variable
   var age;
// 2.赋值
   age = 18;

// 重点:一般连起来写
   var age = 18

变量的语法注意点

//1.变量是可以更新的
var myname = "jack"
myname = "rose"
console.log(myname)   //rose

//2.一次可以声明多个变量
var myname='tom',age=4,gender="公";
console.log(myname,age,gender) 

//3.变量只声明不赋值 结果为undefined
var gender
console.log(gender)   //undefined

//4.变量不声明直接打印会报错,除了name和一些特殊的名字
console.log(tel)   //报错 age is not defined

变量名的定义规范

规则
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能 以数字开头。 18age 是错误的
不能 是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age

重点案例练习：两个变量交换数据

// 两个变量相互交换数据
  var a = 10;
  var b = 100;
  var temp;

  temp = a;
  a = b
  b = temp;

  console.log(a,b); //  100   10

1.2 数据类型–重点

在javascript中数据分为两大类，8小类

1.基本数据类型（值类型）： 数值型Number 字符串型String 布尔型Boolean 未定义型undefined 空型Null

2.复杂数据类型（引用类型）： 对象型Object 数组Array(但是数组也是对象) 函数型 function(){}（但是函数也是对象)

变量的数据类型是由变量的值决定的，它是可变的

数值型Number

var a = 100
var b = 99.8;
var c = -10;

进制问题：二进制 八进制 十进制 十六进制

八进制 ：数字以0开头

十六进制：数字以0x开头

最大值：Number.MAX_VALUE

最小值：Number.MIN_VALUE

无穷大：Infinity

无穷小：-Infinity

(重点)非数字：NaN (not a number) 不是一个数字 (当一个数据向数值类型转换时，转换不过去，就是NaN)

isNaN函数

//isNaN()   判断  是否 不是一个数字
console.log(isNaN(100))   //false
consolo.log(isNaN('jack'))   //true

字符串型String

概述：用单引号或双引号包裹起来的数据就是字符串类型,es6还可以用反引号``来包裹

var str = "我是一个字符串"
var str = '123'
var str = `abc`   //反引号可以写变量${变量名}

字符串嵌套

var str = '我是一个"字符串"'
var str = "我是一个\"字符串\""

转义字符：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格 ，b 是 blank 的意思

字符串的长度length (重点)

var str = "我是武汉传智播客的老师"
console.log(str.length)  //11

字符串的拼接 ”+“

口决：数值相加，字符相连

var str = "我是"+"老师"   //”我是老师"
var str = "pink" + 10    //"pink10"
//左右两边只要有一个字符串就是拼接

字符串拼接加强

建议大家用 反引号+${变量} 这种写法

var age = 18
var str = "我今年"+age+"岁"    //"我今年18岁"    不要用这种写法
var str = `我今年${
     age}岁`     //"我今年18岁"    用这种写法

布尔型Boolean

只有两个值 true false

var flag = true
var flag = false

未定义型undefined

var un = undefined    // 这个变量有值 但是不知道数据类型

空型Null

var nl = null         //这个变量的值是空的

数据类型检测 typeof 或 typeof()

console.log(typeof 10);   //number
console.log(typeof(10));  //number

console.log(typeof 'abc'); //string
console.log(typeof(abc));  //string

console.log(typeof true);  //boolean
console.log(typeof(false));//boolean

console.log(typeof undefined)  //undefined

console.log(typeof null)  //object

字面量：

概念：从表面就可以看出这个数据是什么类型

8,  "string"   true   []    {
   }     function(){
   }

1.3数据类型之间的相互转换

a.基它类型转换为字符串型

1.toString()

var num=10
console.log(num.toString())    //'10'

var flag = true
console.log(flag.toString())   //'true'

2.String()

var num=10
console.log(String(num))    //'10'

var flag = true
console.log(String(flag))   //'true'

3.加上空字符串 + ‘’

var num=10
console.log(num+'')    //'10'

var flag = true
console.log(flag+'')   //'true'

b.其它类型转换为数值型

parseInt (parse integer)

var str = "520肖战"
console.log(parseInt(str))   //520

var str = "宋祖儿5201314"
console.log(parseInt(str))  //NaN

parseFloat(parse float)

var str = "520.1314肖战"
console.log(parseFloat(str))   //520.1314

var str = "宋祖儿520.1314"
console.log(parseFloat(str))  //NaN

Number

var str = '100'
console.log(Number(str))   //100

隐式转换 - * /

console.log('123' - 0)   //123
console.log('123' * 1)   //123
console.log('123' / 1)   //123

c.其它类型转换为布尔型

Boolean()这个函数转换为布尔型，但是我们一般不用写，因为有隐式转换

哪此值代表false呢？  
'',0,NaN,undefined,null   这些值在隐匿转换中都表示假false

1.4运算符

a.算术运算符

加+ 减- 乘* 除/ 取余% 自增 ++ 自减 –

//自增运算符  自身值加1    
// 注意点：变量++    var num=10    num++
var num=10
num++   //  11
或
++num   //  11
//总结：前置自增与后置自增 单独是一行，没有区别，都是自身变量+1

//1.前置自增:先自增,再返回，
++num

//2.后置自增 : 先返回，再自增
num++

b.比较运算符

大于： >

小于：<

大于等于： >=

小于等于： <=

等于：== （值相等，数据类型有可能不一致）

console.log(10=='10')   //true

不等于： !=

全等于：=== (值相等，数据类型也要一致)

console.log(10==='10')   //false

不全等于： !== （只要是值不相等或类型不相等，结果为真true）

console.log(10 !== 11);    //true
console.log(10 !== '10');  //true
console.log(10 != '10');   //false

c.逻辑运算符

非：! 取反

console.log(!true)  //false
console.log(!false)  //true

与：&& 两边都为真，结果为真

或：|| 只要有一个为真，结果为真

重点：短路运算 逻辑中断

逻辑与中断    只要是碰到假，就会中断
consoloe.log(123 && 0 && 456)   //0
逻辑或中断    只是是碰到真，就会中断
consoloe.log(123 || 0 || 456)   //123


案例：
var num = 10;
console.log(123&&''&&num++)  //''
console.log(num)  //10

d.赋值运算符

赋值：= += -= *= /= %=

  var a = 10;
  a += "10"    //a = a+"10"
  a++
  console.log(a);  // '1010'

  

e.三元运算符（三目运算符）

语法：

结果 = 条件表达式 ? 表达式1 : 表达式2

当条件表达式为真时，结果是表达式1的值。当条件表达式为假时，结果是表达式2的值

//案例： 求两个数的最大值
var a = 3
var b = 10
var res = a > b ? a : b

//经典面试题：用一行代码实现求三个数的最大值

 var a = 100
 var b = 30
 var c = 10

 var res = a > b ? (a > c ? a : c) : (b > c ? b : c)

二.流程控制

数据+流程控制 = 算法

分类：顺序 分支 循环

1.顺序 不用学

2.分支：

2.1单分支

//语法
if(条件表达式  => boolean){
   
    ...业务逻辑代码
}

// 当单分支的业务逻辑代码只有一行时，{}可以省略

//案例
var year = 3
if(year >= 1){
   
    console.log("有年终奖")
}
console.log("加油,好好干")

2.2双分支

//语法
if(条件表达式  => boolean){
   
    如果为真：...执行业务逻辑代码1
}else {
   
    如果为假：...执行业务逻辑代码2
}

//案例：判断是否是闰年
//算法: 年份能被4整除但不能被100整除 或  年份能被400整除
var year  = prompt('请输入年份')
if(year%4==0 && year %100 !=0 || year % 400 ==0){
   
    console.log("闰年")
}else {
   
    console.log('平年')
}

2.3多分支

//语法
if(条件表达式  => boolean){
   
    如果为真：...执行业务逻辑代码1
}else if(条件表达式) {
   
    如果为假：...执行业务逻辑代码2
}else if(条件表达式){
   
    ...
}...else {
   
    ...
}

2.4switch case

语法：

​ switch(条件表达式){

​ case value1:

​ 表达式1;

​ break

​ case value2:

​ 表达式2;

​ break

​ …

​ default:

​ 表达式

​ break

}

注意事项：1.case后面的break不能丢,除了default外 2.条件表达式的值与case后的value必须 全等

//用switch case方式打印学生的成绩   大于90 优秀   大于80 良好  大于70 一般    大于60及格    小于60  不及格

 var score = prompt('请输入学生成绩');