前端基础学习笔记3-JavaScript

JavaScript

一、快速入门

1、引入JavaScript

• 内部引入

<!--js引入方法1：内部引入-->
<script>
    alert("hello world");
</script>

• 外部引入

  • html

  <!--js引入方法2：外部引入-->
  <script src="js/test.js"></script>
  

  • js

  alert("hello world")
  

2、浏览器控制台使用

• 控制台调试console

  • 控制台打印信息

    //控制台打印信息
    console.log("控制台打印信息！")
    

  • 控制台输入语句执行调试

• 控制台断点调试source

  • 点击需要的调试的行数，行数会出现蓝色的底
  • 按F5刷新
  • 根据所提供的的按钮来进行操作调试
    

3、基本语法

A.注释

• 注释：//

• idea快捷键：ctrl+/

B.定义变量

• 不需要定义变量类型
• 严格区分大小写

// 定义变量：var 变量名=变量值
var num = 1;
var name = "test";

二、数据类型

1、数据类型快速浏览

• number：js不区分整数和小数

• 字符串：单引号或双引号都可以

• 布尔值：true、false

• 逻辑运算：&&、||、！

• 比较运算符：=、==、 ===

  • 尽量避免使用浮点数进行运算，存在精度问题

  Math((1/3-(1-2/3))<0.0000001)
  

• NaN：Not a Number，非数

• null：空

• undefined：未定义

• 数组：与java不同，js中数组里面的元素不需要同一个类型

  • 如果取数组元素下标越界，会undefined错误

  var array = [1,2,"string",null,undefined]
  new Array(1,2,3,"hello");
  //用索引取值：array[0]
  

• 对象

var person = {
   "name":"js", "age":22,"tags":[1,2,3]}
//用key取值：person.name

2、严格检查模式

• 预防js的随意性导致产生的一些问题

  <script>
      // 严格检查模式'use strict'，必须写在第一行
      'use strict'
      i = 1; //加上'use strict'，会提示报错，不加不报错
      //局部变量，用let
      let j = 1
  </script>
  

3、字符串

• 单引号或双引号都可以
• 转移字符 ：\

\'
\n
\t
\u4e2d  unicode字符：\u####
\x41  ASCII字符：\x##

• 多行字符串：使用``（tab键上面的点）

<script>
    'use strict'
    var msg = `hellp
        a
        ksksk
        b`
</script>

• 模板字符串：使用``（tab键上面的点）+${变量名}

<script>
    'use strict'
    let name = 'name';
    let msg = `hello ${
       name}`
</script>

• 字符串常见用法

<script>
    'use strict'
    let str = 'abcdefg';
    console.log(str.length)   //获取字符串长度
    console.log(str.toUpperCase())   //转化为大写字母
    console.log(str.toLowerCase())   //转化为小写字母
    console.log(str.indexOf('de'))   //获取该字符串在原字符串中的起始位置
    console.log(str.substring(1,2))   //截取字符串，[)：包含前面，不包含后面
</script>

4、数组

• 与java不同，js中数组里面的元素不需要同一个类型

• 如果取数组元素下标越界，会undefined错误

• 数组常见方法

<script>
    //一维数组
    var arr = [2,1,'string',null,undefined];   //数组元素可以任意类型
    console.log(arr[0])   //用索引取值
    console.log(arr.length)  //获取数组长度
    console.log(arr.indexOf('string'))   //通过元素获得下标索引
    console.log(arr.slice(2,4))   //截取数组，返回一个新数组
    arr.push('a','b')   //从尾部插入数组元素
    arr.pop()   //删除尾部的数组元素
    arr.unshift('p','d')   //从头部插入数组元素
    arr.shift()   //删除头部的数组元素
    arr.sort()   //数组排序
    arr.reverse()   //数组反转
    var arr2 = arr.concat(['ppp','lll'])   //合并数组，返回一个新的数组
    var str = arr.join('-')   //使用特定的连接字符串，连接数组

    //二位数组
    var arr3 = [[1,2],[3,4],[5,6]]
    console.log(arr3[1][1])   //用索引取值
</script>

5、对象

• 若干个键值对

var 对象名 = {
	属性名：对象值，
	属性名：对象值，
	属性名：对象值
}

• 对象常见方法

<script>
    var person = {
     "name":"js", "age":22,"score":90}
    console.log(person.name)   //取值：对象名.属性名
    person.name = 'new js'   //给现有对象赋值
    delete person.score   //删除属性
    person.add = 'add'   //添加属性
    console.log('age' in person)   //判断属性值是否在对象中
    console.log(person.hasOwnProperty('toString'))   //判断自身是否有这个方法
</script>

6、流程控制

js的流程控制和java差不多

A.if控制

// 条件控制
var scroe = 80;
if(scroe>=80 && scroe<=100){
   
    alert("优")
}else if (scroe>=70 && scroe<80){
   
    alert("良")
}else