JS(一)

一.JS(一)

1.引入方式

1.1内部脚本

将js代码定义在html中，必须写在<script></script>标签中

1.2外部脚本

将js代码定义在外部js文件中，然后引入到html中

标签不能自闭入

2.JS的组成

• ES:JS核心内容
• DOM:文档对象模型
• BOM:浏览器对象模型

3.书写语法

很多语法跟java 类似，以下不再做详细描述，仅描述与java不同的语法

• 区分大小写
• 每行结尾的分号可有可无（如果没有，那么就是逻辑一行就是物理一行）
• 如果一行写多个语句，要使用逗号隔开

<script>
  		windows.alert("hello")//弹框的形式
        document.write("在干嘛")//输出到前端页面
     	console.error("错误信息")
      	console.warn("警告")
    	console.log(b)//输出信息到浏览器控制台
</script>

3.1使用console.log写入浏览器控制台

• console.log("输出日志内容")
• console.info("输出一条信息")
• console.warn("输出一条警告")
• console.error("输出一条错误")

4.变量

4.1 var

JS中的变量用var来声明，由于js是一门弱类型的语言，变量可以存放不同类型的值。

格式：var 变量名 = 数据值

var a=20
a="hello"

命名规则跟java类似

var的作用域是全局

{
    var a=20
}
console.log(a)//代码块中声明的变量，在代码块外面还可以使用

var变量可以重复定义

var a=12
var b=20
console.log(b)//20  会覆盖第一次定义的12

针对以上两个问题，ECMAScript 6 新增了 let 关键字来定义变量。

4.2 let

let作用域是局部并且不能重复声明

5.数据类型

JS提供了两种数据类型：原始类型和引用类型

使用typeof()可以获取数据类型

5.1原始数据类型

number

数字(整数，小数，NaN)

var a=10
cosole.log(typeof a)//number

string

字符，字符串，单双引号都可以，在ex6中，使用(`)输出多行字符串

var c='aaa'
var a="ccc"
alert(typeof a)//string

在js中，单双引号表示字符串类型的数据

boolean类型

var a=true
var b=false
alert(typeof a)//true

null

对象为空

var obj=null
alert(typeof obj)//结果是object 
//您也许会问，为什么typeof 运算符对于null值会返回"object"。这实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

undefined

声明变量未初始化，类型是undefined

var s;
alert(typeof s)//undefined

6.类型转换

6.1转换成string类型

拼串

let a=20
let a1=20+""
alert(a1)//此时输出的20是字符串类型的

tostring()

let a=20
let a1=a.tostring
alert(a1)//此时输出的20是字符串类型的

null和undefined没有该方法，如果调用会报错

string()

let a=2
let a1=string(a)
alert(a)//输出的是字符串2

null会转换成"null",undefined会转换成"undefined"

6.2其他类型转换成number

将string转换成number

• 使用+正号运算符

  var a=+"20"
  alert(a+1)//21
  

• 使用parseInt()函数进行转换

var a="20"
alert(parseInt(a)+1)//21

string转换成number时，按照字符串的字面值转为数字，如果字面值不是数字，则转为NaN

var s="hello"
alert(parseInt(s))//NaN

boolean转换成number

true转换成1，false转换成0

var a=+false
alert(a)//0

null转换成数字

null转化成0

undefined转换成数字

转换成NaN

parseInt()转换成整数

parseFloat()转换成小数

6.3 其他类型转成boolean

• number类型转换成boolean类型：0和NaN转化成false,其他转换成true
• string类型转换成boolean类型：空字符串转换成false,其他转换成true
• null转换成boolean:false
• undefined转换成boolean:false

7.运算符

大部分和java一样，不同的是js中的==和===

逗号运算符：使用逗号在一条语句上执行多次操作（物理一行和逻辑一行）

var num=1,num2=1
//执行顺序从左到右

==和===的区别

• ==

  判断类型是否一样，如果不一样，进行转换，再去比较值。

• ​ ===

  判断类型是否一样，不一样直接返回false,如果是true再去比较值

var a=20
var b="20"
console.log(a==b)//true
console.log(a===b)//false

8.流程控制语句

和java基本语法一致，但要注意js中的变量类型和java 中的变量类型的声明不一样

9. 对象

9.1 创建对象

方式1：

var person=new Object()
person.name="张三"
person.age=19
console.log(person)

方式2：

let person={
    name:"李四"
    age:12
}

9.2 访问属性

对象.属性名

对象[‘属性名’]

alert(person.name)
alert(person['name'])

{}也是对象

{field1:value1,field2:value}
//value可以是任意值

null也属于对象

在js中，没有类这一个概念，，其对象的属性是自定义的

10. 函数

10.1定义格式

• 方式 1：

  function 方法名(参数1，参数2...){
      要执行的代码
  }
  

• 方式2：

  let 方法名=function(形参列表){
      要执行的代码
  }
  

• 方式3：

  var 方法名=(形参列表)=>{要执行的代码}
  

形参列表不需要参数类型

返回值也不需要定义了类型，可以直接在方法内部使用return

10.2 方法的调用

方法名(实参列表)

在js中，形参列表和实参列表的个数可以不一致

11 JS常用对象

• 基本对象
• BOM对象
• DOM对象

11.1 基本对象

11.1.1 Array对象

用于定义数组

定义格式：

• 方式1：

var 变量名=new Array(元素列表);
var arrar=new Array(1,2,3)

• 方式2：

  var 变量名=[元素列表]
  var arr=[1,2,3]
  

java数组初始化使用{},js使用[]

元素的访问

arr[索引] =值

js中的数组的长度是不固定的

var array=[1,2,3]
array[10]=10//相当于给数组的小标为10的地方放了一个元素10，但是3—9依然是没有值的
alert(array[10])//10

属性

length:动态获取数组长度，可以用来遍历数组

方法

unshift()开头添加元素

push():给数组末尾添加元素

 arr.unshift(7)//开头添加元素7
  arr.pop(34)//末尾删除元素34

11.1.2string对象

String对象的创建方式有两种

• 方式1

  var 变量名 =new String(s)
  

• ​ 方式2：

  var 变量名="111"
  

属性

length动态获取字符串长度

方法

和java基本一致

11.1.3日期对象

日期对象的创建

var date=new Date()
//Date对象回自动把当前的日期和时间保存为初始值

方法

getFullYear（） 从date对象以四位数字返回年份
getMonth（） 从date对象返回月份（0～11）
getDate（） 从date对象返回一个月中的某一天（1～31）
getDay（） 从date对象返回一周中的某一天（0～6）
getHours（） 返回date对象的小时（0-23）
getMinutes（） 返回date对象的分钟（0-59）
getSeconds（） 返回date对象的秒数（0～59）
getMilliseconds（） 返回date对象的毫秒（0～999）
getTime（） 返回1970年1月1日至今的毫秒数
toLocaleString（）根据本地时间格式，把date对象转换成字符串

• 字符串转换成数字类型

​ parseInt（） 将一个字符串转为整数

`parseFloat（）` 将一个字符串转为小数

​ isNaN（） 转换前判断被转换的字符串是否是一个数字，非数字返回true

• 编码和解码

  encodeURI（） 可把字符串作为URI进行编码

  decodeURI（） 可把encodeURI() 函数编码过的URI进行解码