JavaScript基础复习

Posted g0rez

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础复习相关的知识,希望对你有一定的参考价值。

一.javascript

一.介绍:

1.JavaScript是一种专门在浏览器编译并执行的编程语言

2.JavaScript处理用户与浏览器之间请求问题

3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

二.弱类型编程语言风格 VS 强类型编程语言风格

1.强类型编程语言风格:认为对象行为应该受到其修饰类型严格约束.
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类型没有提供这个属性

2.弱类型编程语言风格: 认为对象行为不应该受到其修饰类型约束.可以根据实际需要来决定
对象可以调用属性和方法
JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

var stu = new Object();//stu对象相当于【阿Q】
stu.car = "劳斯莱斯";//合法
stu.play = function (){ return "天天打游戏"}
stu.play();

三.JavaScript中变量声明方式:

1.命令格式:
  var 变量名;
  var 变量名 = 值;
  var 变量名1,变量名2=值;

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

四.JavaScript中标识符命名规则:

  1.标识符只能由四种符号组成 英文字母,数字 , 下划线,美元符号($)
  2.标识符首字母不能以"数字"开头
  3.标识符不能采用JavaScript关键字 比如 var

五.JavaScript数据类型:

1.分类: 基本数据类型 & 高级引用数据类型

2.基本数据类型: 数字类型(number),
字符串类型(string),
布尔类型(boolean)

3.数字类型(number):JavaScript中将整数与小数合称为number类型

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

5.布尔类型(boolean): JavaScript中boolean类型的值只有true或则false

6.高级引用数据类型:
object类型
function类型

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

8.function类型: 相当于Java中(java.lang.reflect.Method)
JavaScript所有函数都是function类型

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

六.JavaScript中特殊【值】

1.undefined: JavaScript中所有变量在没有赋值时,其默认值都是undefined由于JavaScript根据变量的赋值来判断变量类型,

​ 此时由于变量没有赋值因此JavaScript无法判断当前变量数据类型,

​ 此时返回也是undefiled,因此初学者将undefined也理解为是一种数据类型这种理解是错误

2.null: JavaScript中当一个对象赋值为null时,表示对象引用了一个【空内存】
这个空内存既不能存储数据也不能读取数据.

​ 此时这个对象数据类型,在JavaScript依然认为是object类型

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

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

七.JavaScript中控制语句

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

八.JavaScript中函数声明方式

1.命令格式:

function 函数名(形参名1,形参名2){

 JavaScript命令行
 JavaScript命令行

  return 将函数运行结果进行返回

}

2.注意:

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

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

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

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

九.JavaScript函数调用方式:

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

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

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

------------------------------------------------------------------------------------------------------------------

二.JavaScript应用篇

一.JavaScript作用:

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

二.DOM对象:

1.DOM = Document Object Model, 【文档模型对象】

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

//获取name值
  
 function fun1() {
         var myList =document.getElementsByName("deptno");
         for (var i=0;i<myList.length;i++) {
              var obj=myList[i];
             window.alert(obj.value);
         }
     }
//获取标签内容
  function fun1() {
         var MyList = document.getElementsByTagName("p");
           for (var i=0;i<MyList.length;i++){
               var obj=MyList[i];
               window.alert("p标签的内容为"+obj.innerText);
           }
     }
//修改文字显示
     function fun1() {
         var wenzi= document.getElementById("two").value;
         //document.getElementById("one").innerText=wenzi;
             document.getElementById("one").innerHTML=wenzi;
     }
//修改状态属性  全选和全不选  
 function fun1() {
         var fage=document.getElementById("one").checked;
         var mylist=document.getElementsByName("ck");
         for (var i=0;i<mylist.length;i++){
             mylist[i].checked=fage;
         }
     }
//标签样式  
 function fun1(color) {
         var obj=document.getElementById("one");
         obj.style.backgroundColor=color;
     }

焦点

function fun1() {
          var dom1=document.getElementById("one").value;
          if (dom1==''){
              document.getElementById("one").focus();  //回到焦点
              document.getElementById("font_1").innerHTML="密码不能为空";
          } else{
              document.getElementById("font_1").innerHTML="*";
  
          }
     }

[监听鼠标和键盘及表格综合案例]

三.DOM对象生命周期:

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

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

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

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

四.document对象:

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

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

五.document对象生命周期:

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

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

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

六.通过document对象定位DOM对象方式:

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

​ 命令格式 var domObj = document.getElementById("id属性值");

​ 举个栗子 var domObj = document.getElementById("one");

​ 通知document对象定位id属性等于one的标签关联的DOM对象

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

​ 命令格式 var domArray = document.getElementsByName("name属性值");

​ 举个栗子 部门10
部门20
部门30

​ var domArray = document.getElementsByName("deptNo");

​ 通知document对象将所有name属性等于deptNo的标签关联的DOM对象
​ 进行定位并封装到一个数组进行返回. domArray就是一个数组存放
​ 本次返回的所有DOM对象

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

​ 命令格式 var domArray = document.getElementsByTagName("标签类型名");

​ 举个栗子 var domArray = document.getElementsByTagName("p");

段落标签

​ 通知document对象将所有段落标签关联的dom对象进行定位 ​ 并封装到一个数组返回

七.DOM对象对HTML标签属性操作

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

取值操作:

var domObj = document.getElementById("one");
var num = domObj.value;

赋值操作:

var domObj = document.getElementById("one");
domObj.value = "abc";

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

取值操作:

var domObj = document.getElementById("one");
//读取当前标签【背景颜色属性】值
var color = domObj.style.背景颜色属性

赋值操作:

var domObj = document.getElementById("one");
//通过DOM对象对标签中【背景颜色属性】进行赋值
domObj.style.背景颜色属性 = 值;

3.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;
  1. DOM对象对标签中【文字显示内容】进行赋值与取值

文字显示内容: 只存在于双目标签之间;100

取值操作:

var domObj = document.getElementById("one");
var num1 = domObj.innerText;

赋值操作:

var domObj = document.getElementById("one");
domObj.innerText = 值;

innerText与innerHTML 区别:

innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值

innerText只能接收字符串

innerHTML既可以接收字符串又可以接收html标签

八.JavaScript监听事件

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

2.监听事件分类:

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

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

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

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

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

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

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

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

三.JavaScript高级篇

一.函数对象申明的两种方式

//标准函数对象声明方式
        function fun1(){
            window.alert("fun1 is run....")
        }
        //匿名方式声明函数对象
        var fun2 = function (p1,p2,p3){ window.alert("fun2 is run...")}

JavaScript方式执行时,共加载两次,

第一次加载标准函数对象的申明

第二次自上而下加载

面试题:

fun1(); //此处输出数据结果 ???            2
      function fun1(){
          window.alert(1);
      }
  
      fun1();//此处输出数据结果 ???             2
      function fun1(){
          window.alert(2);
      }
 
     var fun1 =  function(){window.alert(3)};
     fun1();//此处输出数据结果 ???             3

二.全局变量

function fun3(){
             var sex = "man"; // sex属于局部变量
              home ="辽宁";    // home属于全局变量,[当这行命令执行时]相当于window.home=辽宁
         }
 
         window.alert("window.home = "+window.home); //undefined
         fun3();
         window.alert("window.home = "+window.home); //"辽宁"

三.Object类型对象特征

var obj2 = new Object();
          //obj2["deptNo"]=20;
          //window.alert("obj2.deptNo "+obj2.deptNo);
  
          var departName ="dname";
          obj2[departName]="Operation"; // obj2.dname = "Operation";
          window.alert("obj2.dname = "+obj2.dname);
  
          //移除dname属性
 
         delete  obj2.dname;
         window.alert("obj2.dname = "+obj2.dname);//undefined

普通函数和构造函数的区别:

function fun1(){
             return "abc";
         }
         //将fun1作为【普通函数】进行调用
         // var num1 = fun1();
         // window.alert("num1 = "+num1+"  数据类型 "+typeof num1);
         //将fun1作为【构造函数】进行调用
         var num2 = new fun1(); //函数作为构造函数调用时,内部return直接失效
         window.alert("num2 = "+num2+"  数据类型 "+typeof num2);

四.this指向问题

this指向与java一致

在构造函数中,this指向当前构造函数生成的Object对象

在普通方法中,this指向当前函数的实例对象

//全局变量
          var sname="allen"
          //全局变量  window.Student = function(){};
          function Student(){
              this.sid =100;
              this.sname="mike";
          }
  
          // Student(); //普通函数身份,window.Student(). this--->window this.sname="mike"
         // window.alert("window.sname = "+window.sname);//????
 
         var obj = new Student();
         window.alert("window.sname = "+window.sname);//allen

面试题:

模拟一个HasMap类型,存值与取值五.JSON工具包的使用
1.JSONObject.fromObject();通过json.jar中工具类将Dept对象中内容转换为JSON格式字符串
//1.得到一个部门类型对象
            Dept  dept = new Dept(10, "人寿社保事业部", "北京");
  
            //2.通过json.jar中工具类将Dept对象中内容转换为JSON格式字符串
            JSONObject jsonObj =JSONObject.fromObject(dept);
  
            //3.将JSON格式字符串添加请求作用域对象
            request.setAttribute("key", jsonObj.toString());
  
            //4.请求转发
            request.getRequestDispatcher("/index_1.jsp").forward(request, response);

2.JSONArray.fromObject(deptList)通过json.jar工具类将集合内容转换为【JSON数组格式】字符串
//1.获得一个集合存放部门对象
          Dept dept1 = new Dept(10, "社保事业部", "大兴区");
          Dept dept2 = new Dept(20, "金融事业部", "顺义区");
          Dept dept3 = new Dept(30, "公共关系事业部", "平谷区");
          List deptList = new ArrayList();
          deptList.add(dept1);
          deptList.add(dept2);
          deptList.add(dept3);
  
          //2.通过json.jar工具类将集合内容转换为【JSON数组格式】字符串
          JSONArray jsonArray = JSONArray.fromObject(deptList);
 
          //3.价格【JSON数组格式】字符串添加到请求作用域对象
          request.setAttribute("key", jsonArray.toString());
 
          //4.请求转发
          request.getRequestDispatcher("/index_2.jsp").forward(request, response);

四.Java面试题

一.重写与重载区别

1.重载:
         JAVA中允许同一个类文件中出现多个方法名相同
     但是参数列表不同同名方法,这种现象称为重载

     要求两个方法名称必须相同,但是参数列表不能相同
     (个数不同,参数类型不同,参数类型出现顺序)

     目的,让方法在接收不同参数实现不同功能

2.重写:

        发生在继承过程中,子类对父类方法实现细节进行重新
    定义

    1)重写方法时,子类不能降低方法访问权限,可以扩大访问权限

    2)由private或则final修饰方法都不能被重写

    3)重写方法时,抛出异常可以是父类方法抛出异常全集,子集,空集

    4) 重写方法返回值,可以缩小返回类型范围,但是不能增加返回类型范围

二.throw 与 thorws

1. throws:

           1)声明位置 : 方法名之后
                          public void test1() throws NullPointerExeption{
		      
		      }
           2)作用:  通知开发人员当前方法在运行时,【有可能】抛出的异常	
       
       3)携带数据   throws 后面携带【异常类型】,一个throws后面可以携带多个异常类型

       4)调用:  当一个方法被throws修饰时,调用方法时必须考虑异常捕捉问题


  2.throw:
           1)声明位置:  方法执行体
                     public void test1(){
		     
		        throw new RuntimeException();
		     }

            2)作用: throw是一个命令,执行时抛出一个指定异常对象

	3)携带数据: throw后面携带【异常对象】,一个throw一次只能携带一个异常对象

	4)调用: 当一个方法内部存在throw命令时,在调用时可以不考虑异常捕捉问题

三.接口与抽象类区别

1.接口:
       1) 是一种特殊类文件
   2) 作用:
              制定规则
	      降低耦合度

       3)  使用规则:
                接口中属性,默认都是静态常量属性
		接口中方法都是抽象,如果需要定义具体方法实现,此时方法需要使用default修饰
		接口中方法访问权限不能是private
		接口与接口之间可以实现多继承,但是接口之间不能相互实现
		接口中不存在构造方法

2.抽象类:
      1)抽象类由abstract修饰
  2)抽象类作用降低接口实现类与接口之间实现难度【****】
  3)使用规则:

              抽象类可以声明抽象方法,也可以生成具体方法
	      抽象类声明抽象方法必须由子类进行重写
	      抽象类实现接口时,不需要对接口方法进行重写
	      抽象类有构造方法,但是不能使用

1.七个查询命令介绍

2.NullPointerException产生的场景

1)空对象调用属性或则方法,一定会抛出空指针异常
Student stu = null; //空对象
stu.sid;
stu.sayHello();

  1. 将null强转为基本类型数据,一定会抛出空指针异常
    Map map = new HashMap();
    int num =(int)map.get("key1")

3.HashMap 与 HashTable区别


1.Thread 与 Runable区别

2.如何控制线程调用顺序

3.表单域标签value属性默认值

4.GET请求方式与POST方式区别

5.描述互联网通信流程


四.项目介绍

一.项目总体介绍:

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

  举栗子:

        我之前参与 吉林大学在线考试管理系统开发.这个项目主要负责吉大在线考试与在线阅卷功能.
    这个系统使用Servlet ,jsp,jdbc,javascript(从服务端向浏览器过渡)
    这个系统使用Http服务器是tomcat,使用数据库服务器mysql

二.项目功能介绍:捡主要功能

这个系统大体由【学员信息管理】,【试题信息管理】,【在线考试管理】三个模块组成

三.项目特色介绍:

1.使用监听器模拟了数据库连接池功能,节省Connection创建与销毁时间,提高执行速度
       增加QPS(服务器在单位时间接收访问量)

         2.使用过滤器防止用户恶意登录行为,增加项目安全性

四.介绍自己在项目参与某一个功能:

我离职前,最后参与功能【学员信息注册】
     首先根据互联网通信特征,画出来流程图
     根据流程图分析开发功能,然后进行开发与测试

以上是关于JavaScript基础复习的主要内容,如果未能解决你的问题,请参考以下文章

前端技能树,面试复习第 52 天—— 手写代码:Javascript 基础考核

JavaScript期末复习

JavaScript基础复习

JS基础 复习: Javascript的书写位置

JavaScript基础知识复习

javascript基础知识复习一