前端JavaScript（JS）基础介绍-CSDN博客

1.简介

网页三剑客之一（HTML、CSS、JS）。JavaScript（简称“JS”）是一种高级的，解释型的编程语言。它是Web开发中不可或缺的一部分，主要用于增强网页的交互性，实现动态效果。

跨平台、面向对象都跟java有着一样的特性，但是JS还是脚本语言，也就是它不需要编译，直接通过浏览器内核去解释就能够直接运行。而Java则需要编译，将源代码编译成字节码（.class）文件，再由虚拟机运行。

2.JS引入方式

JS需要和HTML结合使用。以下是引入JS的规则

3.JS基础语法

为了书写规范，结尾的分号建议都写上

输出语句：三种输出方法

console.log("Hello, World!"); //写入浏览器控制台
window.alert("Hello, World!");//浏览器弹出警告框，window.可以省略
document.write("Hello, World!");//写入HTML，在浏览器中展示

变量命名：与java基本一致，不同的是var可以存放不同类型的值，var是全局变量，作用域大，而且可以重复定义，以下代码是不会报错的，后面的a会覆盖之前定义的a。

var a =20;      //a=20
a="张三"        //a=张三
var a="李四"    //a=李四

最新版ES6新增了两个关键字（let、const）：let 关键字定义变量，用法类似于var，但声明的变量只在let关键字所在的代码块内有效，它是局部变量，且不允许重复声明。Econst关键字用来声明一个只读的常量。一旦声明，常量的值就不能改变。

JS的数据类型分为原始类型（基本数据类型）和引用类型（对象），原始类型为以下五种

JS是弱类型的语言，可以使用typeof去获得数据是哪种类型

(typeof 3.14); //number
(typeof "a"); //string

运算符用法和java一致，除了===，它称为全等运算符，与==的区别在于：==会在比较时，先看类型是否一致，不一致就转换成一致的类型再对比，而===一旦类型不一致就直接返回false

var a=10
a=="10" //true 
a==="10"//false
a==10   //true

类型转换规则：转数字用parseInt，由前向后逐渐转换，遇到不是数字的字符时就停止转换，不转换后面的数，若第一个就非数字，就转换为NaN(Not a Number)

parseInt("12") //转换为12
parseInt("12A13")//转换为1
parseInt("A12")//转换为NaN

流程控制语句（if else switch for while..）与java一致

4.JS函数

JS的函数用function定义，形参不需要类型(弱类型语言)，返回值也不需要定义类型，直接return即可，这一点与java不同。

function functionName(参数1、参数2..){
//要执行的代码
}

也可以通过变量来定义函数，比较有特点的是：即使函数只接受两个参数，但你传更多参数也是没有问题的。后面的参数函数并没有接收。代码举例如下

var functionName = function(参数1、参数2..){
//要执行的代码
}

var add =function(a,b){
    return a+b;
}
var result = add(10,20,30,40) //结果依然是30

5.JS对象

JS中有许多对象，可以分为三类：基础对象（Array、String、JSON）、BOM对象(浏览器对象模型)和DOM对象(文档对象类型)。

Array对象定义数组：JS中的数组相当于java中的集合，长度和类型都可变（arr[10]="A"是不会报错的）

Array的一些方法：ES6提供了函数的简化编写形式（箭头函数）

箭头函数：(形参列表) => （函数体）

String对象的一些方法

自定义对象的定义和调用：给属性名加上双引号就是JSON格式的数据

JSON格式的数据：JSON现多用于数据载体，在网络中进行数据传输（语法简单、层次鲜明）

但实际上JSON是个字符串，并不能用.name去获得“TOM”，要转化成js对象才能够使用使用里面的属性。

BOM对象：重点关注window和location

DOM对象：JS就是通过DOM和事件监听机制来控制网页行为的。先获取元素，再对元素进行操作即可

获取元素：HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的，window可以省略，以下是document中获取元素对象的函数

操作元素：查询参考手册HTML DOM Article 对象 (w3school.com.cn)，调用属性和方法

6.JS事件

事件:HTML事件是发生在HTML元素上的“事情”。比如:按钮被点击、鼠标移动到元素上、按下键盘按键等等
事件监听:JavaScript可以在事件被侦测到时执行代码。通过onclick进行绑定

<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定1" >
</body>

<script>
  function on(){ //方式1
    alert("按钮1")
  }

  document.getElementById("btn2").onclick=function (){//方式2
    alert("按钮2")
  }
</script>

其他事件：