JavaScript

1.JavaScript是一种专门在浏览器编译并执行的编程语言  2.JavaScript处理用户与浏览器之间请求问题  3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

认为对象行为应该受到其修饰类型严格约束。Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言class Student{      public String sname;      public void sayHello(){        System.out.print(\"hello world\");      }}          Student  stu = new Student();          stu.sname=\"mike\"; stu对象能够调用属性只有sname          stu.sayHello();   stu对象能够调用方法只有sayHello()          stu.sid =10;  // 在Java认为是语法错误，修饰stu对象的Student类型没有提供这个属性

强类型编程语言风格

认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定                         对象可以调用属性和方法    JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言    var  stu = new Object();    //stu对象相当于【阿Q】    stu.car = \"劳斯莱斯\";    //合法    stu.play = function (){ return  \"天天打游戏\"}    stu.play();

弱类型编程语言风格

var 变量名;

var 变量名 = 值;

注：在JavaScript变量/对象，在声明不允许指定【修饰类型】      只能通过var来进行修饰

变量声明方式

标识符首字母不能以\"数字\"开头

标识符不能采用JavaScript关键字 比如 var

标识符命名规则

JavaScript中将整数与小数合称为number类型

数字类型（number）

JavaScript中字符与字符串合称为string类型JavaScript字符或则字符串既可以使用''又可以使用\"\"

字符串类型(string)

JavaScript中boolean类型的值只有true或则false

布尔类型(boolean)

基本数据类型

JavaScript中所有通过【构造函数】生成的对象都是object类型

object类型

相当于Java中（java.lang.reflect.Method）JavaScript所有函数都是function类型

function类型

高级引用数据类型

JavaScript是弱类型编程语言，根据变量赋值内容来判断变量数据类型JavaScript中变量的数据类型可以根据赋值内容来进行动态改变

数据类型：

undefined

JavaScript中当一个对象赋值为null时，表示对象引用了一个【空内存】这个空内存既不能存储数据也不能读取数据。此时这个对象数据类型，在JavaScript依然认为是object类型

null

JavaScript中当一个变量赋值为NaN，表示变量接收了一个【非法数字】（123 合法数字  abc123 非法数字）此时这个变量数据类型，在JavaScript依然认为number类型

NaN

JavaScript中当一个变量赋值为infinity，表示变量接收了一个【无穷大数字】此时这个变量数据类型，在JavaScript依然认为number类型

Infinity

特殊【值】

JavaScript中控制语句与Java中控制语句语法格式完全一致

控制语句

function   函数名(形参名1，形参名2){            JavaScript命令行        JavaScript命令行        return  将函数运行结果进行返回}

命令格式

JavaScript中，所有函数在声明时，都需要使用function进行修饰

JavaScript中，所有函数在声明时，禁止指定函数返回数据类型

JavaScript中，所有函数在声明时，形参既不能使用var来修饰也不能使用数据类型修饰

JavaScript中，所有函数在声明时，如果有返回值，此时应该通过return进行返回

注意

函数声明方式

浏览器并不会自动调用JavaScript函数

可以通过命令行方式来调用Java函数

通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理

函数调用方式

介绍

帮助浏览器对用户提出请求进行处理

JavaScript作用

DOM：Document Object  Model， 【文档模型对象】

JavaScript不能直接操作HTML标签，只能通过HTML标签关联的DOM对象对HTML标签下达指令

DOM对象

浏览器在接收到html文件之后，将HTML文件标签加载到浏览器缓存中，每当加载一个html标签时候，自动为这个标签生成一个实例对象，这个实例对象就是DOM对象

在浏览器关闭之前或则浏览器请求其他资源文件之前，本次生成的DOM对象一直存活在浏览器缓存中

在浏览器关闭时候，浏览器缓存中dom对象将要被销毁

在浏览器请求到新资源文件后，浏览器缓存中原有的dom对象将会被覆盖

DOM对象生命周期

document对象被称为【文档对象】

document对象用于在浏览器内存中根据定位条件定位DOM对象

document对象

在浏览器将网页中所有标签加载完毕后，在内存中将使用【树形结构】存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树（DOM树）        ****在浏览器将接收网页中标签加载完毕后，自动在浏览器内存生成一个document对象

一个浏览器运行期间，只会生成一个document对象

在浏览器关闭时，负责将document对象进行销毁

document对象生命周期

命令格式       var domObj =  document.getElementById(\"id属性值\")；举个栗子       var domObj =  document.getElementById(\"one\")；通知document对象定位id属性等于one的标签关联的DOM对象

根据html标签的id属性值定位DOM对象

命令格式   var domArray =  document.getElementsByName(\"name属性值\");举个栗子  <input type=\"checkbox\" name=\"deptNo\" value=\"10\">部门10               <input type=\"checkbox\" name=\"deptNo\" value=\"20\">部门20               <input type=\"checkbox\" name=\"deptNo\" value=\"30\">部门30               var domArray =  document.getElementsByName(\"deptNo\");         通知document对象将所有name属性等于deptNo的标签关联的DOM对象         进行定位并封装到一个数组进行返回。 domArray就是一个数组存放         本次返回的所有DOM对象

根据html标签的name属性值定位DOM对象

命令格式   var domArray =   document.getElementsByTagName(\"标签类型名\");举个栗子   var  domArray = document.getElementsByTagName(\"p\");                <p>段落标签</p>          通知document对象将所有段落标签关联的dom对象进行定位          并封装到一个数组返回

根据html标签类型定位DOM对象

通过document对象定位DOM对象方式

取值操作:         var domObj =  document.getElementById(\"one\");         var num = domObj.value;赋值操作:         var domObj = document.getElementById(\"one\");         domObj.value = \"abc\";

DOM对象对标签value属性进行取值与赋值操作

取值操作:        var domObj =  document.getElementById(\"one\");        //读取当前标签【背景颜色属性】值        var color = domObj.style.背景颜色属性赋值操作:        var domObj =  document.getElementById(\"one\");        //通过DOM对象对标签中【背景颜色属性】进行赋值        domObj.style.背景颜色属性 = 值；

DOM对象对标签中【样式属性】进行取值与赋值操作

状态属性：  状态属性的值都是boolean类型      disabled = true ; 表示当前标签不可以使用      disabled = false; 表示当前标签可以使用      checked: 只存在与radio标签与checkbox标签      checked = true ;  表示当前标签被选中了      checked = false;  表示当前标签未被选中取值操作:       var domObj = document.getElementById(\"one\");       var num = domObj.checked;赋值操作:        var domObj = document.getElementById(\"one\");        domObj.checked = true;

DOM对象对标签中【状态属性】进行取值与赋值操作

文字显示内容:  只存在于双目标签之间;<tr>100</tr>取值操作:        var domObj = document.getElementById(\"one\");        var num1 = domObj.innerText;赋值操作:        var domObj = document.getElementById(\"one\");        domObj.innerText = 值；innerText与innerHTML 区别:         1、innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值         2、innerText只能接收字符串         3、innerHTML既可以接收字符串又可以接收html标签

DOM对象对标签中【文字显示内容】进行赋值与取值操作

DOM对象对HTML标签属性操作

监听用户在何时以何种方式对当前标签进行操作。当监听到相关行为时，通知浏览器调用对应JavaScript函数对当前用户请求进行处理

监听事件

onclick :  监听用户何时使用鼠标【单击】当前标签

onmouseover: 监听用户何时将鼠标【悬停】当前标签上方

onmouseout : 监听用户何时将鼠标从当前标签上方【移开】

onfocus    : 监听用户何时通过鼠标让当前标签获得【光标】

onblur     : 监听用户何时通过鼠标让当前标签丢失【光标】

监听用户何时使用鼠标操作当前标签

onkeydown：监听用户何时在当前标签上【按下键盘】

onkeyup：监听用户何时在当前标签上【弹起键盘】

监听用户何时使用键盘操作当前标签

1、作用：监听浏览器何时将网页中HTML标签加载完毕

2、意义：浏览器每加载一个HTML标签时，自动在内存中生成一个dom对象。在浏览器将网页所有标签加载完毕时，意味当前网页中所有标签都生成对应dom对象。onload此时就可以出发调用函数，对浏览器标签进行处理，此时不会出现未找到dom现象

3、使用：<script>        function fun() {            let domObj = document.getElementById(\"one\");            let str = domObj.value;   //TypeError:domObj is null            window.alert(str)        }</script><body onload=\"fun()\">

onload监听事件（浏览器）

监听事件分类

JavaScript监听事件

1、前提：实际开发过程中，同一个监听事件往往多个HTML标签进行绑定

2、命令形式：domObj.监听事件名=处理函数名  注：此处处理函数名后面是不能出现\"()\"的

3、举个栗子：var domObj=document.getElementById(\"one\");domObj.onclick=fun1;  //注意函数名后面没有\"()\"相当于<input type=\"button\" id=\"one\" onclick=\"fun1()\">  //此处函数名后面必须有()

基于dom对象实现监听事件与HTML标签之间绑定

JavaScript应用篇

1、javascript中，每个函数都包含一个arguments属性

2、arguments属性是一个数组

3、在函数调用时，将实参出入到函数的arguments中，再由arguments将数据传递给形参

4、arguments属性存在，可将javascript中函数在调用时传递实参与形参进行格式，增加函数调用灵活性

5、arguments属性只能在函数体内使用

arguments

1、function是javascript中一种高级数据类型2、一个function类型对象用于管理一个具体函数3、javascript中function类型相当于java中method类型

function 函数对象名（参数1，参数2）{    命令；}

浏览器在加载script是，共加载两次第一次加载，将script标签所有以标准形式声明函数对象进行创建第二次加载，将script标签所有命令行按照自上而下顺序来执行

对象创建时机

1、标签声明方式

var 函数对象名 = function (参数1，参数2){命令1，命令2，...}

2、匿名声明方式

声明方式

function类型对象

1、定义：在函数执行体内，通过var修饰声明的变量function fun1(){  var name=\"mike\";    //局部变量}

2、特征：只能在当前函数执行体内使用，不能在函数执行体外使用

局部变量

1、定义：可在当前html中所有函数中使用

2、全局变量被声明时，自动分配给window对象作为其属性var name=\"mike\"等同于var window.name=\"mike\"

全局变量

变量

1、定义：在JavaScript认为所有通过【构造函数】生成的对象其数据类型都是object类型

2、特征：object类型对象在创建完毕后，可以根据实际情况，任意添加属性和方法，也可以移除属性和方法

第一种维护方案：添加属性：object对象.新属性名=值;添加函数：object对象.新函数对象名=function(){};

第二种维护方案：添加属性：object对象[\"新属性名\"]=值;添加函数：object对象[\"新函数对象名\"]=function(){};

3、属性维护

object类型对象特征

1、命令：function 函数对象名(){}

2、调用：var object类型对象=new 函数对象名();

3、普通函数和构造函数区分：1）函数没有调用之前，无法区分函数身份，只能根据函数调用形式区分2）判断普通函数：var num = 函数对象名3）判断构造函数：var num = new 函数对象名()；4）返回值：普通函数运行后需要通过return将执行结果返回     构造函数运行后，直接返回一个object类型对象，此时函数return相当于无效

自定义构造函数

java中指向：public Student(){    this.name=\"mike\";    //由构造方法生成的实例对象}public void sayHello(){    //this，调用sayHello方法的实例对象}

在构造函数中，this指向当前函数生成object类型对象

在普通函数中，this指向调用当前函数的实例对象

javascript中this指向与Java中this指向完全一致

this指向

方式一：有构造函数生成的对象都是object类型对象

方式二：由JSON数据描述格式生成对象都是object类型对象

1、前提：JavaScript中得到object类型对象方式

2、JSON数据描述格式：JavaScript中获得object类新对象简化版

3、标准命令格式：var obj={\"属性名1\

4、JSON数组：专门存放JSON对象的数组

工具类：public class ReflectUtil {    //作用：将任意类型对象内容转换为JSON格式字符串返回    //参数：一个高级引用类型对象Student对象，Dept对象。。。    public static String jsonObject(Object obj) {        Class<?> classFile = null;        Field fieldArray[] = null;        StringBuffer str = new StringBuffer(\"{\");        //1、获得当前对象隶属的【class文件】        classFile = obj.getClass();    //Student.class        //2、获得【class文件】所有属性        fieldArray = classFile.getDeclaredFields();        //3、获得当前对象所有属性的值        try {            for (int i = 0; i < fieldArray.length; i++) {                Field field = fieldArray[i];                field.setAccessible(true);  //私有访问权限属性能在class文件外部使用                String fieldName = field.getName();  //获得属性名称                Object value = field.get(obj);                //4、将获得属性及其值拼接为JSON格式字符串                str.append(\"\\\"\");                str.append(fieldName);                str.append(\"\\\":\");                str.append(\"\\\"\");                str.append(value);                str.append(\"\\\"\");   //{\"sid\":\"10\

json工具包，不需要自己封装：

6、通过反射机制将Java高级对象内容转换为JSON格式

JSON

JavaScript高级篇

1. 介绍项目客户：2. 介绍项目主要功能3. 介绍项目使用技术4. 介绍项目使用服务器

项目总体介绍

这个系统大体由【车辆信息管理】，【缴费信息管理】，【车位信息管理】三个模块组成

项目功能介绍：捡主要功能

1.使用监听器模拟了数据库连接池功能，节省Connection创建与销毁时间，提高执行速度增加QPS(服务器在单位时间接收访问量)2.使用过滤器防止用户恶意登录行为，增加项目安全性

项目特色介绍

我毕业前，最后参与功能【车主信息注册】首先根据互联网通信特征，画出来流程图根据流程图分析开发功能，然后进行开发与测试

介绍自己在项目参与某一个功能：（提升逼格/毕业前最后做的一个功能）

注：项目介绍的好与坏，导致面试官在后续知识点提问过程中难度项目介绍越流畅，后续知识点提问过程就越简单

项目介绍

其它

因为浏览器自上而下解析网页标签，所以把JavaScript代码放最下方(也可以使用onload来实现在浏览器生成所有dom对象后，再进行函数调用)

推荐

JavaScript