学习笔记-js

再来100个需求
188 阅读3分钟

基本知识

  • JavaScript = ECMAScript + DOM(document object manager) + BOM
  • 编译型语言： C语言--> 编译成二进制代码 ->运行
  • 解释型语言：js--> 一句句执行
  • 静态类型语言： 在执行之前，变量类型已经确定
  • 动态类型语言： 在执行时，可以改变变量类型

js写法

    <!-- 1.直接在html元素中执行js代码9(不推荐) -->
    <a href="" onclick="alert('我是一个弹窗')">alert</a>

    <!-- 2.书写到Script标签中 -->
    <script>
        alert('我是直接弹出的标签')
    </script>

    <!-- 3. 外部引入js代码 (用的最多)-->
    <script src="./JS/test.js"></script>
  • 注意点
  1. 不能写成单标签
  2. 省略type。早期代码会有type字段指定是javascript语言<script type="text/javascript"></script>，而现在可以省略了，因为javascript 成了默认语言了
  3. js是区分大小写的

和浏览器交互方式

<!-- 1.弹窗 -->
alert('我是直接弹出的标签')

<!-- 2.打印 -->
console.log('这是个打印')

<!-- 3.document 写入 (dom 操作)-->
document.write("<h2>这是个h2标签</h2>")

<! -- 4.接收一个输入任务 -->
var name = prompt("请输入姓名")
console.log('姓名是：',name)

语法

变量

var name
name = "dingding"
// 同时定义多个变量
var name,name1,name2
var name = "dingding", name1 = "lala", name2 = "hehe"
  • 查看数据类型 typeof + 变量
console.log(typeof "name")//string
console.log(typeof 123)// number

//另一种写法
console.log(typeof("name"))// number

基本数据类型

数字 Number

// 基本
var num = 20
var num1 = 20.99

// 2进制
var num3 = 0b10 // == 2

// 8进制
var num3 = 0o10 // == 8

// 十六进制
var num3 = 0x100 // == 256
  • 最大最小
num = Number.MIN_VALUE
num = Number.MAX_VALUE
  • 非数字 NaN

比如在 "acb" to num时，转化失败，就会返回一个NaN

  • isNaN 是否 不是一个数字。（不是数字返回 true，是返回 false）

字符串 String

  • 字符串可以使用单引号也可以使用双引号
        var name = "dingding"
        var name1 = 'dingding'
  • 转义字符 \
var name1 = '\"dingding\" is big'

  • 转义字符 \t == table 键

  • 转义字符 \n 换行

  • length 属性 字符串长度

布尔 Boolean

true or false

空 Null & 未定义 Undefined

对象不再使用时，可以置为 null

        var info = {name : "why",age : 18}
        var info = null
  • 没有赋值就是 Undefined 类型
var name3
  • undefined是由 null 衍生的，
console.log(undefined == null) // true
  • 转化成数字时， undefined为NaN，而null为0

运算符

  • ++x 和 x++ 的区别
        var x = 100
        var y = x++ + 10 = 100 + 10 = 110

        var x = 100
        var y = ++x + 10 = 101 + 10 = 111
        
        var x = 10
        var y = x++ + x++ = 10 + 21 = 21

== 会做隐式转换 再比较
=== 不会隐式转换

  • && 短路与

多个条件都为true，有一个条件为false，后面就不再计算。类似短路

person.eating && person.eating() 
== 
if (person.eating) {
    person.eating()
}
  • || 短路或 一旦遇到一个条件为 true，后面的条件语句就不再判断
var message = person.name || person.age || person.height

条件语句

  • 判断函数是否存在
//判断函数是否存在
if (person.eating) {
    person.eating()
}

defer和async

  • <script> :默认，当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。 即下载和执行都会相当于会阻塞文档的解析
  • <script defer>：当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。即下载不会阻塞，其执行也是在文档解析后完成，故也不会造成阻塞
  • <script asycn>：当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。即下载脚本不会阻塞,执行会阻塞

所以defer和async 文件加载都是异步的。但是执行顺序不同。

defer和async都是只适用于外联脚本。

  • defer 还能控制js的执行顺序 jquery.js>script2.js>script3.js。
<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

var let const

  • var：全局对象定义属性。
  • let：局部对象定义属性。
  • const：局部定值对象定义属性。
  1. var和let在初始化的时候都可以不进行参数初始化。
  2. var与let/const的作用域不同。
  3. const有两个地方需要注意：
    • 1.由于它是一个定值对象定义的关键字，所以它所定义对象的值是不能重新分配的。
    • 2.由于它的特性是定值，所以在初始化的时候就必须初始化对应的参数。
    • 3.而且他的作用域也是同let一个级别
avatar
文章
阅读
粉丝