

首页  思维导图  详情



JavaScript

2021-12-26 19:41:23   30  举报





AI智能生成

JavaScript是一种轻量级的解释型或即时编译型的编程语言，它是Web的三大核心技术之一，与HTML和CSS一起构建了互联网。JavaScript可以在浏览器中执行，用于创建动态和交互式的网页内容。它也可以作为服务器端的编程语言，如Node.js。JavaScript的主要特点是其弱类型特性，以及它的事件驱动和非阻塞I/O模型。此外，JavaScript还支持面向对象编程、函数式编程和原型继承等编程范式。JavaScript的语法简洁明了，易于学习和使用，是Web开发的重要工具。

模版推荐

作者其他创作

大纲/内容

介绍

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();

变量声明方式

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

var 变量名;

var 变量名 = 值;

var 变量名1,变量名2=值；

标识符命名规则

标识符只能由四种符号组成  英文字母，数字 , 下划线，美元符号($)

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

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

数据类型：

基本数据类型

数字类型（number）

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

字符串类型(string)

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

布尔类型(boolean)

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

高级引用数据类型

object类型

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

function类型

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

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

特殊【值】

undefined

JavaScript中所有变量在没有赋值时，其默认值都是undefined                   由于JavaScript根据变量的赋值来判断变量类型，此时由于变量     没有赋值因此JavaScript无法判断当前变量数据类型，此时返回     也是undefiled,因此初学者将undefined也理解为是一种数据类型     这种理解是错误

null

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

NaN

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

Infinity

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

控制语句

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

函数声明方式

命令格式

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

注意

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

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

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

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

函数调用方式

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

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

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

JavaScript应用篇

JavaScript作用

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

DOM对象

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

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

DOM对象生命周期

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

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

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

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

document对象

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

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

document对象生命周期

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

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

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

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

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

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

根据html标签的name属性值定位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标签类型定位DOM对象

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

DOM对象对HTML标签属性操作

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

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

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

取值操作:         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标签

JavaScript监听事件

监听事件

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

监听事件分类

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

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

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

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

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

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

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

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

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

onload监听事件（浏览器）

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()">

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

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

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

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

JavaScript高级篇

arguments

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

2、arguments属性是一个数组

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

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

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

function类型对象

介绍

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

声明方式

1、标签声明方式

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

对象创建时机

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

2、匿名声明方式

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

变量

局部变量

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

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

全局变量

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

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

object类型对象特征

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

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

3、属性维护

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

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

自定义构造函数

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

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

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

this指向

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

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

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

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

JSON

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

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

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

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

3、标准命令格式：var obj={"属性名1"：值,"属性名2"：值}; 开发人员习惯于将由JSON生成object类型对象称为【JSON对象】

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

5、JSON实现服务端与JavaScript间数据通信 Servlet服务端：   //Student stu=new Student(10,"zhangsan");    //高级对象，前端不能直接解析stu，可通过下方反射机制转换   String str="{\"sid\":10,\"sname\":\"mike\"}";   //将学员对象存入request请求作用域对象   request.setAttribute("key",str);   //请求转发，向tomcat申请调用index_1.jsp，并将request和response通过tomcat交给index_1.jsp   request.getRequestDispatcher("/index_1.jsp").forward(request,response); 前端：   <script>     var stuObj=${requestScope.key};  //从request作用域对象得到服务端提供的学生对象     alert("学生编号"+stuObj.sid+"学生姓名"+stuObj.sname)   </script>

6、通过反射机制将Java高级对象内容转换为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","sname":"zs"}                 if (i < fieldArray.length - 1) {                     str.append(",");                 }             }         } catch (IllegalAccessException e) {             e.printStackTrace();         } finally {             str.append("}");         }         return str.toString();     } } }

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

其它

项目介绍

项目总体介绍

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

举栗子：      我之前参与停车场管理系统开发。这个项目主要负责车辆自动出入、自动缴费和预定车位功能。      这个系统使用Mybatis ,Spring，SpringMVC,Ajax，Jquery，Layui，javascript(从服务端向浏览器过渡)      这个系统使用Http服务器是tomcat,使用数据库服务器mysql

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

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

项目特色介绍

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

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

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

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