精华内容
下载资源
问答
  • Java解析JavaScript数据

    千次阅读 2013-09-24 20:55:37
    最近有一个小小的需求,就是在java解析javascript脚本,JDK6就已经支持脚本语言了,针对JS有js引擎ScriptEngine。但是我在使用过程觉得用的不是很方便,比较别扭,经研究发现还有一个更强大的脚本引擎-mozilla提供

    转载自:http://demi-panda.com/2013/01/26/java-parse-javascript/index.html

    最近有一个小小的需求,就是在java中解析javascript脚本,JDK6就已经支持脚本语言了,针对JS有js引擎ScriptEngine。但是我在使用过程觉得用的不是很方便,比较别扭,经研究发现还有一个更强大的脚本引擎-mozilla提供的rhino

    Java用ScriptEngine解析脚本

      javax.script,始于JDK1.6,不过现在只有sun实现的javascript的解析器,难道是因为主要用来解析js语法所以归类到JEE的范畴?不过基本足够了,一般的用途主要是能解析通用的表达式就好,比如X >= 1(X作为参数传入)这样的表达式,也能利用js的函数语法,创造一个就像java的函数一样存在于内存中随时可以被调用的函数,更可以将js中的对象直接转换成java对象。

    Script主要类及接口

    ScriptEngineManager、ScriptEngine、CompiledScript和Bindings 4个类或接口

    1. ScriptEngineManager是一个工厂的集合,可以通过name或tag的方式获取某个脚本的工厂并生成一个此脚本的ScriptEngine,目前只有javascript的工厂。通过工厂函数得到了ScriptEngine之后,就可以用这个对象来解析脚本字符串了,直接调用Object obj = ScriptEngine.eval(String script)即可,返回的obj为表达式的值,比如true、false或int值。
    2. CompiledScript可以将ScriptEngine解析一段脚本的结果存起来,方便多次调用。只要将ScriptEngine用Compilable接口强制转换后,调用compile(String script)就返回了一个CompiledScript对象,要用的时候每次调用一下CompiledScript.eval()即可,一般适合用于js函数的使用。
    3. Bindings的概念算稍微复杂点,我的理解Bindings是用来存放数据的容器。它有3个层级,为Global级、Engine级和Local级,前2者通过ScriptEngine.getBindings()获得,是唯一的对象,而Local Binding由ScriptEngine.createBindings()获得,很好理解,每次都产生一个新的。Global对应到工厂,Engine对应到ScriptEngine,向这2者里面加入任何数据或者编译后的脚本执行对象,在每一份新生成的Local Binding里面都会存在。

    ScriptEngine代码示例

    先来看一段JS

    var arrclass = new Array();
    arrclass.push(new Class(20000,"计算机-软件开发"));
    arrclass.push(new Class(30000,"计算机-网络/通讯"));
    arrclass.push(new Class(10000,"计算机-硬件开发"));
    arrclass.push(new Class(40000,"计算机-管理"));
    arrclass.push(new Class(50000,"计算机-品质管理/技术支持"));
    arrclass.push(new Class(320000,"电子/电器/半导体/仪器仪表"));

    java代码实现解析

    public void parseJS() {
      //1、通过Http请求获取js的String数据,格式如上
      String jsData = getJsData("url");
      //2、观察js结构,自定义Class,push到数组中,java中需要定义跟js中的Class的声明
      String clazz = "function Class(classId, className){ this.classId=classId;this.className=className};";
    
      //3、初始化ScriptEngine
      ScriptEngine engine = new ScriptEngineManager().getEngineByName("javascript");
      //4、js中未定义返回对象,这里需要将Class数据转换成字符串的数组返回,个人觉得很别扭,不知道是理解错误还是确实如此?
      //如果不这样做则直接在js后加上arrclass,cScript.evel()则返回NativeObject对象的数组
      String fun = "var result = new Array() ;for(var i=0;i <arrclass.length;i++){result.push(new Array(arrclass[i].classId,arrclass[i].className))}; result;";
      Compilable compilable = (Compilable) engine;
      //4、使用NativeArray获取数据
      CompiledScript cScript;
      try {
         cScript = compilable.compile(clazz + jsData + fun);
         NativeArray na = (NativeArray) cScript.eval();
         for (int i = 0; i < na.getLength(); i++) {
             NativeArray nv = (NativeArray) na.get(i, null);
             System.out.println(nv.get(0, null).toString() + " " + nv.get(1, null).toString());
         }
     } catch (ScriptException ex) {
         ex.printStackTrace();
     }
    }

    java代码中执行js计算

    public void js() {  
        // 创建脚本引擎管理器  
        ScriptEngineManager sem = new ScriptEngineManager();  
        // 创建一个处理JavaScript的脚本引擎  
        ScriptEngine engine = sem.getEngineByExtension("js");  
        try {  
            // 执行js公式  
            engine.eval("if(6>5){flag=true;}else{flag =false;}");  
        } catch (ScriptException ex) {
            ex.printStackTrace();  
        }  
        //看看我们预期的反馈结果 true  
        System.out.println(engine.get("flag"));  
    }  

    Java解析JS另一大引擎-Rhino

    Rhino是完全用Java编写的JavaScript的开放源代码实现。它通常是嵌入到Java应用程序提供给最终用户的脚本。它被镶嵌在J2SE6作为默认的Java脚本引擎。

    使用Rhino来解析,感觉一切都很清晰明朗.

    public void parseJS() {
      //1、通过Http请求获取js的String数据,格式如上
      String jsData = getJsData("url");
      //2、定义跟js中的Class的声明
      String clazz = "function Class(classId, className){ this.classId=classId;this.className=className};";
      //3、初始化Context
      Context cx = Context.enter();
      Scriptable scope = cx.initStandardObjects();
      Object result = cx.evaluateString(scope, clazz + jsData + ";arrclass", "arrclass", 1, null);
      System.out.println(NativeJSON.stringify(cx, scope, result, null, null));
      Context.exit();
    } 

    展开全文
  • 第一次用java解析js文件,实现后台调用前台方法实现验证 1.js文件(放在src下) //此处定义一个空的alert方法,否则解析下面checkRate(name)方法会报错没有定义alert(),只有这个用途; function alert() {...

    第一次用java解析js文件,实现后台调用前台方法实现验证

    1.js文件(放在src下)

    //此处定义一个空的alert方法,否则解析下面checkRate(name)方法会报错没有定义alert(),只有这个用途;
    function alert() {
    }
    //根据名字取标签的值
    function getVal(name) {
        return document.getElementsByName(name)[0].value;
    }
    //验证邮箱格式是否合法
    function checkRate(name) {
        var re =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        var nubmer =getVal(name);
        if (!re.test(nubmer)) {
            alert("请输入正确格式的邮件地址");
            // document.getElementById("email").value = "";
            return false;
        }
        return true;
    }

    2.jsp页面

    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript">
            function validateForm() {
                alert(checkRate("email"));
            }
    
    
    
        </script>
    </head>
    <body>
    邮箱:<input type="text" name="email" id="email" οnblur="checkRate('email')"><br>
    <input type="button" value="validate" οnclick="validateForm()"/>
    
    </body>
    </html>

    当点击button时验证输入是否合法

    3.java代码

    package com.test;
    
    import java.io.FileReader;
    import javax.script.Invocable;
    import javax.script.ScriptEngine;
    import javax.script.ScriptEngineManager;
    
    /**
     * Created by gaoziang on 2017/8/28.
     */
    public class FunctionTest {
        public static void main(String[] args) throws Exception{
     
            ScriptEngineManager manager = new ScriptEngineManager();
            ScriptEngine engine = manager.getEngineByName("javascript");
            String jsFileName = "src/JavaScript";
            // 读取js文件
            FileReader reader = new FileReader("src/validate.js");
            // 执行指定脚本
            engine.eval(reader);
    //此处的email是定义在主函数里的,正常应从表单提交里接收到email文本框的值并赋值给email
            String email="907273324@qq.com";
    /此处重新定义一个getVal方法,这样在js里的checkRate方法就会调用下面的新的getVal方法,实现了避开document对象,如果不重写就会提示document没定义,外部js没法单独用document。
            engine.eval("function getVal(name) {var json = {'name':"+"'"+email+"'"+"};return json[name];}");
            if(engine instanceof Invocable) {
                Invocable invoke = (Invocable)engine;
                Boolean boo=(boolean)invoke.invokeFunction("checkRate","name");
                System.out.println("boo="+boo);
    
    
            }
            reader.close();
        }
    }


    此时输出的就应该是 true ;


    总结:
        主要的一点就是重新写一个getVal方法,在jsp解析js时用js文件中的getVal通过document获得值进行邮箱正则表达式校验。
        
        而在后台解析js时用新写的getVal方法,把通过表单提交的email值(我是模拟的)传到checkRate方法中,进行正则表达式的校验。



    展开全文
  • Java中原生解析JavaScript脚本语言

    千次阅读 2018-10-10 21:54:53
    做一些简单的算数运算和逻辑运算,那么最先想的是模板引擎这个东西,但是Java中的模板引擎是针对View层的,也就是JSP的,在Service层中使用不是太方便,因此选用了原生的JavaScript脚本解析引擎。实际上Java原生支持...

    前言

    由于一些需求,现在需要在Java中解析字符串,做一些简单的算数运算和逻辑运算,那么最先想的是模板引擎这个东西,但是Java中的模板引擎是针对View层的,也就是JSP的,在Service层中使用不是太方便,因此选用了原生的JavaScript脚本解析引擎。实际上Java原生支持解析大部分脚本语言,像JavaScript,PHP,Python等。

    那么,先贴一下核心实现类的代码:

    import java.io.FileNotFoundException;
    import java.util.Map;
    
    import javax.script.ScriptException;
    
    public interface TempletEngineService {
    	
    	public Object eval(String script) throws ScriptException, FileNotFoundException;
    	
    	public Object eval(String script, Map<String, Object> vars) throws ScriptException, FileNotFoundException;
    	
    }

    然后是实现类:

    
    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileReader;
    import java.lang.reflect.InvocationTargetException;
    import java.lang.reflect.Method;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    import javax.script.ScriptEngine;
    import javax.script.ScriptEngineManager;
    import javax.script.ScriptException;
    
    @Service
    public class TempletEngineServiceImpl implements TempletEngineService {
    
    	private ScriptEngine jsEngine;
    	
    	public TempletEngineServiceImpl() {
    		ScriptEngineManager manager = new ScriptEngineManager();
    		jsEngine = manager.getEngineByName("JavaScript");
    	}
    	
    	@Override
    	public Object eval(String script) throws ScriptException, FileNotFoundException {
    		if (script == null || script.equals("")) {
    			return null;
    		}
    		String jsfile = "/home/phw/Workspaces/MyEclipseProjects/gomoo-fu/src/com/gomoo/util/script/template.js";
    		jsEngine.eval(new FileReader(new File(jsfile)));
    		return jsEngine.eval(script);
    	}
    	
    	@Override
    	public Object eval(String script, Map<String, Object> vars) throws ScriptException, FileNotFoundException {
    		if (script == null || script.equals("")) {
    			return null;
    		}
    		if (vars == null || vars.isEmpty()) {
    			for (Map.Entry<String, Object> entry: vars.entrySet()) {
    				jsEngine.put(entry.getKey(), entry.getValue());
    			}
    		} 
    		return eval(script);
    	}
    
    }
    

    主要的核心类就是这两个文件,可以看到,用到的解析引擎是javax.script包下的引擎。

    脚本是自定义的一串符合JavaScript规则的字符串,像简单点的字符串“5 + 6”、"9 - (6 + 5) * 5"等等,可以直接执行eval函数;若需要计算一些复杂的逻辑,那可以写到你自定义的一个js文件里,然后在脚本中运行那个函数;那再复杂一点,在函数中或者脚本中带自定义参数,这时就用到了eval(String script, Map vars)函数了。

    下面是一些例子:

    /**
    	 * 简单字符串的测试
    	 * @throws ScriptException 
    	 * @throws FileNotFoundException 
    	 */
    	@Test
    	public void testEval() throws FileNotFoundException, ScriptException {
    
    		String script = "(65 - 5) / (3 * 6)";
    		String script2 = "15 > 10 ? 15 : 10";
    		String script3 = "15 > 10";
    		
    		Object val1 = templetEngineService.eval(script);
    		System.out.println("脚本1的结果为:" + val1);
    		Object val2 = templetEngineService.eval(script2);
    		System.out.println("脚本2的结果为:" + val2);
    		Object val3 = templetEngineService.eval(script3);
    		System.out.println("脚本3的结果为:" + val3);
    		
    	}
    
    	/**
    	 * 脚本1的结果为:3.3333333333333335
    	 * 脚本2的结果为:15
    	 * 脚本3的结果为:true
    	 */
    
    	/**
    	 * 带函数的脚本测试
    	 * @throws ScriptException 
    	 * @throws FileNotFoundException 
    	 */
    	@Test
    	public void testEval2() throws FileNotFoundException, ScriptException {
    		String script = "random()";
    		String script2 = "random() + random()";
    		Object val1 = templetEngineService.eval(script);
    		System.out.println("脚本1的结果为:" + val1);
    		Object val2 = templetEngineService.eval(script2);
    		System.out.println("脚本2的结果为:" + val2);
    	}
    	
    	/**
    	 * 脚本1的结果为:63.0
    	 * 脚本2的结果为:163.0
    	 */
    
    	/**
    	 * 带参数的脚本测试
    	 * @throws FileNotFoundException
    	 * @throws ScriptException
    	 */
    
    	@Test
    	public void testEval3() throws FileNotFoundException, ScriptException {
    		
    		String script = "random(min, max)";
    		String script2 = "random(min, max) + min - max";
    		
    		Map<String, Object> vars = new HashMap<>();
    		vars.put("min", 10);
    		vars.put("max", 100);
    		Object val1 = templetEngineService.eval(script, vars);
    		System.out.println("脚本1的结果为:" + val1);
    		
    		Map<String, Object> vars2 = new HashMap<>();
    		vars.put("min", 100);
    		vars.put("max", 1000);
    		Object val2 = templetEngineService.eval(script2, vars2);
    		System.out.println("脚本2的结果为:" + val2);
    	}
    
    	/**
    	 * 脚本1的结果为:69.0
    	 * 脚本2的结果为:-65.0
    	 */
    
    /**
    	 * 参数为类时的脚本测试
    	 * @throws FileNotFoundException
    	 * @throws ScriptException
    	 */
    	@Test
    	public void testEval4() throws FileNotFoundException, ScriptException {
    		
    		User user = new User();
    		user.setRealName("phw");
    		String script = "out(user)";
    		Map<String, Object> vars = new HashMap<>();
    		vars.put("user", user);
    		Object val = templetEngineService.eval(script, vars);
    		System.out.println("脚本1的结果为:" + val);
    	}
    	
    	/**
    	 * 脚本1的期望结果:phw
    	 */

    下面贴一下template.js,也就是我们预定义的Js function的文件:

    /**
     * 生成100内的随机数
     */
    function random() {
    	return Math.floor(Math.random() * 100);
    }
    
    /**
     * 生成区间内的随机整数[m, n]
     */
    function random(minNum,maxNum){
      switch(arguments.length){ 
          case 1: 
              return parseInt(Math.random()*minNum+1,10); 
          break; 
          case 2: 
              return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
          break; 
              default: 
                  return 0; 
              break; 
      } 
    }
    
    function out(obj) {
    	return obj.realName;
    }
    

    以上就是测试里用到的js function函数,再说一下,脚本不支持es6的语法,所以老老实实用var,不要用let。

    以上。

    展开全文
  • 海豚 用Java编写的Javascript解析器和运行器。
  • Canopy 是一个针对 JavaJavaScript、Python 和 Ruby 的解析器编译器。 它需要一个描述的文件,并将其编译成目标语言的解析器模块。 生成的解析器对 Canopy 本身没有运行时依赖性。 有关使用文档,请参阅 。 有关...
  • 用于JavaScript / TypeScript的Java Parser,也基于 ,语法也来自(因此请报告错误并打开与上游语法相关的请求) 使用范例 import { parse , createVisitor } from 'java-ast' ; const countMethods = ( source : ...
  • java原始包javascript -导入“ vimagination.zapto.org/javascript” 用法 const ( TokenWhitespace parser. TokenType = iota TokenLineTerminator TokenSingleLineComment TokenMultiLineComment ...
  • Canopy是针对JavaJavaScript,Python和Ruby的解析器编译器。 它获取一个描述a的文件,并将其编译为目标语言的解析器模块。 生成的解析器对Canopy本身没有运行时依赖性。 有关使用说明文件,请参见。 有关构建项目...
  • JavaScript详细解析

    万次阅读 多人点赞 2021-09-20 14:28:18
    文章目录1、JavaScript详细解析1.1、JavaScript介绍1.2、快速入门引入js的方式一:内部方式引入js的方式一:外部方式1.3、开发环境搭建1.4、快速入门总结2、JavaScript基本语法2.1、注释2.2、输入输出语句2.3、变量...

    1、JavaScript详细解析

    1.1、JavaScript介绍

    • JavaScript 是一种客户端脚本语言。运行在客户端浏览器中,每一个浏览器都具备解析 JavaScript 的引擎。

    • 脚本语言:不需要编译,就可以被浏览器直接解析执行了。

    • 核心功能就是增强用户和 HTML 页面的交互过程,让页面有一些动态效果。以此来增强用户的体验!
      在这里插入图片描述

          1995 年,NetScape (网景)公司,开发的一门客户端脚本语言:LiveScript。后来,请来 SUN 公司的专家来 进行修改,后命名为:JavaScript。
          1996 年,微软抄袭 JavaScript 开发出 JScript 脚本语言。 
          1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户 端脚本语言的编码方式。
      

    在这里插入图片描述

    1.2、快速入门

    • 实现步骤
    1. 创建一个 HTML。
    2. 在标签下面编写一个
    • 具体实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS快速入门</title>
    </head>
    <body>
        <button id="btn">点我呀</button>
    </body>
    </html>
    

    引入js的方式一:内部方式

    <script>
        document.getElementById("btn").onclick=function () {
            alert("点我干嘛?");
        }
    </script>
    

    引入js的方式一:外部方式

    • 创建js文件

      document.getElementById("btn").onclick=function () {
          alert("点我干嘛?");
      }
      
    • 在html中引用外部js文件

      <script src="js/my.js"></script>
      

    1.3、开发环境搭建

    • Node.js:JavaScript 运行环境

    • VSCode:编写前端技术的开发工具

    1.4、快速入门总结

    • JavaScript 是一种客户端脚本语言。

    • 组成部分

      ECMAScript、DOM、BOM
      
    • 和 HTML 结合方式

      内部方式:<script></script>
      外部方式:<script src=文件路径></script>
      

    2、JavaScript基本语法

    2.1、注释

    • 单行注释

      // 注释的内容
      
    • 多行注释

      /*
      注释的内容
      */
      

    2.2、输入输出语句

    • 输入框 prompt(“提示内容”);
    • 弹出警告框 alert(“提示内容”);
    • 控制台输出 console.log(“显示内容”);
    • 页面内容输出 document.write(“显示内容”);

    2.3、变量和常量

    ​ JavaScript 属于弱类型的语言,定义变量时不区分具体的数据类型。

    • 定义局部变量 let 变量名 = 值;

      //1.定义局部变量
      let name = "张三";
      let age = 23;
      document.write(name + "," + age +"<br>");
      
    • 定义全局变量 变量名 = 值;

      //2.定义全局变量
      {
          let l1 = "aa";
          l2 = "bb";
      }
      //document.write(l1);
      document.write(l2 + "<br>");
      
    • 定义常量 const 常量名 = 值;

      //3.定义常量
      const PI = 3.1415926;
      //PI = 3.15;
      document.write(PI);
      

    2.4、原始数据类型和typeof方法

    2.4.1、原始数据类型

    在这里插入图片描述

    2.4.2、typeof

    typeof 用于判断变量的数据类型

    	let age = 18; 
    	document.write(typeof(age)); // number
    

    2.5、运算符

    • 算数运算符

    在这里插入图片描述

    • 赋值运算符

    在这里插入图片描述

    • 比较运算符

    在这里插入图片描述

    • 逻辑运算符

    在这里插入图片描述

    • 三元运算符

      • 三元运算符格式

        (比较表达式) ? 表达式1 : 表达式2;

      • 执行流程

        如果比较表达式为true,则取表达式1

        如果比较表达式为false,则取表达式2

    2.6、流程控制和循环语句

    • if 语句

      //if语句
      let month = 3;
      if(month >= 3 && month <= 5) {
          document.write("春季");
      }else if(month >= 6 && month <= 8) {
          document.write("夏季");
      }else if(month >= 9 && month <= 11) {
          document.write("秋季");
      }else if(month == 12 || month == 1 || month == 2) {
          document.write("冬季");
      }else {
          document.write("月份有误");
      }
      
      document.write("<br>");
      
    • switch 语句

      //switch语句
      switch(month){
          case 3:
          case 4:
          case 5:
              document.write("春季");
              break;
          case 6:
          case 7:
          case 8:
              document.write("夏季");
              break;
          case 9:
          case 10:
          case 11:
              document.write("秋季");
              break;
          case 12:
          case 1:
          case 2:
              document.write("冬季");
              break;
          default:
              document.write("月份有误");
              break;
      }
      
      document.write("<br>");**for 循环**
      
    • for循环

      //for循环
      for(let i = 1; i <= 5; i++) {
          document.write(i + "<br>");
      }
      
    • while 循环

      //while循环
      let n = 6;
      while(n <= 10) {
          document.write(n + "<br>");
          n++;
      }
      

    2.7、数组

    • 数组的使用和 java 中的数组基本一致,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制。

    • 定义格式

      • let 数组名 = [元素1,元素2,…];

      • let arr = [10,20,30];
        
    • 索引范围

      • 从 0 开始,最大到数组长度-1
      • 数组长度
      • 数组名.length
        for(let i = 0; i < arr.length; i++) {
            document.write(arr[i] + "<br>");
        }
        document.write("==============<br>");
        
    • 数组高级运算符…

      • 数组复制

         //复制数组
         let arr2 = [...arr];
         //遍历数组
         for(let i = 0; i < arr2.length; i++) {
         document.write(arr2[i] + "<br>");
         }
         document.write("==============<br>");
        
      • 合并数组

        //合并数组
        let arr3 = [40,50,60];
        let arr4 = [...arr2 , ...arr3];
        //遍历数组
        for(let i = 0; i < arr4.length; i++) {
        document.write(arr4[i] + "<br>");
        }
        document.write("==============<br>");
        
      • 字符串转数组

        //将字符串转成数组
        let arr5 = [..."heima"];
        //遍历数组
        for(let i = 0; i < arr5.length; i++) {
        document.write(arr5[i] + "<br>");
        }
        

    2.8、函数

    • 函数类似于 java 中的方法,可以将一些代码进行抽取,达到复用的效果

    • 定义格式

      function 方法名(参数列表) {
          方法体; 
          return 返回值; 
      }
      
    • 可变参数

      function 方法名(…参数名) {
          方法体; 
          return 返回值; 
      }
      
    • 匿名函数

      function(参数列表) {
          方法体; 
      }
      

    2.9、小结

    • 注释:单行// 多行/**/
    • 输入输出语句:prompt()、alert()、console.log()、document.write()
    • 变量和常量:let、const
    • 数据类型:boolean、null、undefined、number、string、bigint
    • typeof 关键字:用于判断变量的数据类型
    • 运算符:算数、赋值、逻辑、比较、三元运算符
    • 流程控制和循环语句:if、switch、for、while
    • 数组:数据类型和长度没有限制,let 数组名 = [长度/元素]
    • 函数:类似方法,抽取代码,提高复用性

    3、JavaScript DOM

    3.1、DOM介绍

    • DOM(Document Object Model):文档对象模型。
    • 将 HTML 文档的各个组成部分,封装为对象。借助这些对象,可以对 HTML 文档进行增删改查的动态操作。
      在这里插入图片描述

    3.2、Element元素的获取操作

    • 具体方法
      在这里插入图片描述

    • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素的获取</title>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div class="cls">div3</div>
        <div class="cls">div4</div>
        <input type="text" name="username"/>
    </body>
    <script>
        //1. getElementById()   根据id属性值获取元素对象
        let div1 = document.getElementById("div1");
        //alert(div1);
    
        //2. getElementsByTagName()   根据元素名称获取元素对象们,返回数组
        let divs = document.getElementsByTagName("div");
        //alert(divs.length);
    
        //3. getElementsByClassName()  根据class属性值获取元素对象们,返回数组
        let cls = document.getElementsByClassName("cls");
        //alert(cls.length);
    
        //4. getElementsByName()   根据name属性值获取元素对象们,返回数组
        let username = document.getElementsByName("username");
        //alert(username.length);
    
        //5. 子元素对象.parentElement属性   获取当前元素的父元素
        let body = div1.parentElement;
        alert(body);
    </script>
    </html>
    

    3.3、Element元素的增删改操作

    • 具体方法

    在这里插入图片描述

    • 代码实现

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>元素的增删改</title>
      </head>
      <body>
          <select id="s">
              <option>---请选择---</option>
              <option>北京</option>
              <option>上海</option>
              <option>广州</option>
          </select>
      </body>
      <script>
          //1. createElement()   创建新的元素
          let option = document.createElement("option");
          //为option添加文本内容
          option.innerText = "深圳";
      
          //2. appendChild()     将子元素添加到父元素中
          let select = document.getElementById("s");
          select.appendChild(option);
      
          //3. removeChild()     通过父元素删除子元素
          //select.removeChild(option);
      
          //4. replaceChild()    用新元素替换老元素
          let option2 = document.createElement("option");
          option2.innerText = "杭州";
          select.replaceChild(option2,option);
      
      </script>
      </html>
      

    3.4、Attribute属性的操作

    • 具体方法
      在这里插入图片描述

    • 代码实现

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>属性的操作</title>
          <style>
              .aColor{
                  color: blue;
              }
          </style>
      </head>
      <body>
          <a>点我呀</a>
      </body>
      <script>
          //1. setAttribute()    添加属性
          let a = document.getElementsByTagName("a")[0];
          a.setAttribute("href","https://www.baidu.com");
      
          //2. getAttribute()    获取属性
          let value = a.getAttribute("href");
          //alert(value);
      
          //3. removeAttribute()  删除属性
          //a.removeAttribute("href");
      
          //4. style属性   添加样式
          //a.style.color = "red";
      
          //5. className属性   添加指定样式
          a.className = "aColor";
      
      </script>
      </html>
      

    3.5、Text文本的操作

    • 具体方法
      在这里插入图片描述

    • 代码实现

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>文本的操作</title>
      </head>
      <body>
          <div id="div"></div>
      </body>
      <script>
          //1. innerText   添加文本内容,不解析标签
          let div = document.getElementById("div");
          div.innerText = "我是div";
          //div.innerText = "<b>我是div</b>";
      
          //2. innerHTML   添加文本内容,解析标签
          div.innerHTML = "<b>我是div</b>";
      
      </script>
      </html>
      

    3.6、DOM小结

    • DOM(Document Object Model):文档对象模型
    • Document:文档对象
    • Element:元素对象
    • Attribute:属性对象
    • Text:文本对象
    • 元素的操作
      • getElementById()
      • getElementsByTagName()
      • getElementsByName()
      • getElementsByClassName()
    • 子元素对象.parentElement属性
      • createElement()
      • appendChild()
      • removeChild()
      • replaceChild()
    • 属性的操作
      • setAtrribute()
      • getAtrribute()
      • removeAtrribute()
      • style属性
    • 文本的操作
      • innerText
      • innerHTML

    4、JavaScript 事件

    4.1、事件介绍

    事件指的就是当某些组件执行了某些操作后,会触发某些代码的执行。

    • 常用的事件

      事件名说明
      onblur元素失去焦点,在对象失去焦点时发生
      onchange域的内容被改变时发生
      onclick当用户点击某个对象时调用的事件句柄
      ondblclick当用户双击某个对象时调用的事件句柄
      onfocus元素获得焦点时发生
      onsubmit确认按钮被点击时发生
      onreset重置按钮被点击,事件会在表单中的重置按钮被点击时发生
    • 了解的事件

    在这里插入图片描述

    4.2、事件操作

    绑定事件

    • 方式一

      通过标签中的事件属性进行绑定。

      <button id="btn" onclick="执行的功能"></button>
      
    • 方式二

      通过 DOM 元素属性绑定。

      document.getElementById("btn").onclick = 执行的功能
      

    4.3、事件小结

    • 事件指的就是当某些组件执行了某些操作后,会触发某些代码的执行。
    • 常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
    • 绑定事件方式
      • 方式一:通过标签中的事件属性进行绑定。
      • 方式二:通过 DOM 元素属性绑定。

    5、JavaScript综合案例

    5.1、案例效果介绍

    • 在“姓名、年龄、性别”三个文本框中填写信息后,添加到“学生信息表”列表(表格)中。

    在这里插入图片描述

    5.2、添加功能的分析

    1. 为添加按钮绑定单击事件。
    2. 创建 tr 元素。
    3. 创建 4 个 td 元素。
    4. 将 td 添加到 tr 中。
    5. 获取文本框输入的信息。
    6. 创建 3 个文本元素。
    7. 将文本元素添加到对应的 td 中。
    8. 创建 a 元素。
    9. 将 a 元素添加到对应的 td 中。
    10. 将 tr 添加到 table 中。

    5.3、添加功能的实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态表格</title>
    
        <style>
            table{
                border: 1px solid;
                margin: auto;
                width: 500px;
            }
    
            td,th{
                text-align: center;
                border: 1px solid;
            }
            div{
                text-align: center;
                margin: 50px;
            }
        </style>
    
    </head>
    <body>
    
    <div>
        <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
        <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
        <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">
    </div>
    
        <table id="tb">
            <caption>学生信息表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
    
            <tr>
                <td>张三</td>
                <td>23</td>
                <td></td>
                <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
            </tr>
    
            <tr>
                <td>李四</td>
                <td>24</td>
                <td></td>
                <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
            </tr>
    
        </table>
    
    </body>
    <script>
        //一、添加功能
        //1.为添加按钮绑定单击事件
        document.getElementById("add").onclick = function(){
            //2.创建行元素
            let tr = document.createElement("tr");
            //3.创建4个单元格元素
            let nameTd = document.createElement("td");
            let ageTd = document.createElement("td");
            let genderTd = document.createElement("td");
            let deleteTd = document.createElement("td");
            //4.将td添加到tr中
            tr.appendChild(nameTd);
            tr.appendChild(ageTd);
            tr.appendChild(genderTd);
            tr.appendChild(deleteTd);
            //5.获取输入框的文本信息
            let name = document.getElementById("name").value;
            let age = document.getElementById("age").value;
            let gender = document.getElementById("gender").value;
            //6.根据获取到的信息创建3个文本元素
            let nameText = document.createTextNode(name);
            let ageText = document.createTextNode(age);
            let genderText = document.createTextNode(gender);
            //7.将3个文本元素添加到td中
            nameTd.appendChild(nameText);
            ageTd.appendChild(ageText);
            genderTd.appendChild(genderText);
            //8.创建超链接元素和显示的文本以及添加href属性
            let a = document.createElement("a");
            let aText = document.createTextNode("删除");
            a.setAttribute("href","JavaScript:void(0);");
            a.setAttribute("onclick","drop(this)");
            a.appendChild(aText);
            //9.将超链接元素添加到td中
            deleteTd.appendChild(a);
            //10.获取table元素,将tr添加到table中
            let table = document.getElementById("tb");
            table.appendChild(tr);
        }
    </script>
    </html>
    

    5.4、删除功能的分析

    • 删除功能介绍

    在这里插入图片描述

    • 删除功能分析
    1. 为每个删除超链接添加单击事件属性。
    2. 定义删除的方法。
    3. 获取 table 元素。
    4. 获取 tr 元素。
    5. 通过 table 删除 tr。

    5.5、删除功能的实现

    //二、删除的功能
    //1.为每个删除超链接标签添加单击事件的属性
    //2.定义删除的方法
    function drop(obj){
    	//3.获取table元素
    	let table = obj.parentElement.parentElement.parentElement;
    	//4.获取tr元素
    	let tr = obj.parentElement.parentElement;
    	//5.通过table删除tr
    	table.removeChild(tr);
    }
    

    6、JavaScript面向对象

    6.1、面向对象介绍

    	在 Java 中我们学习过面向对象,核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。
    

    在这里插入图片描述

    6.2、类的定义和使用

    • 结构说明

    在这里插入图片描述

    • 代码实现

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>类的定义和使用</title>
      </head>
      <body>
          
      </body>
      <script>
          //定义Person类
          class Person{
              //构造方法
              constructor(name,age){
                  this.name = name;
                  this.age = age;
              }
      
              //show方法
              show(){
                  document.write(this.name + "," + this.age + "<br>");
              }
      
              //eat方法
              eat(){
                  document.write("吃饭...");
              }
          }
      
          //使用Person类
          let p = new Person("张三",23);
          p.show();
          p.eat();
      </script>
      </html>
      

      6.3、字面量类的定义和使用

    • 结构说明

    在这里插入图片描述

    • 代码实现

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>字面量定义类和使用</title>
      </head>
      <body>
          
      </body>
      <script>
          //定义person
          let person = {
              name : "张三",
              age : 23,
              hobby : ["听课","学习"],
      
              eat : function() {
                  document.write("吃饭...");
              }
          };
      
          //使用person
          document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
          person.eat();
      </script>
      </html>
      

    6.3、继承

    • 继承:让类与类产生子父类的关系,子类可以使用父类有权限的成员。

    • 继承关键字:extends

    • 顶级父类:Object

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>继承</title>
      </head>
      <body>
          
      </body>
      <script>
          //定义Person类
          class Person{
              //构造方法
              constructor(name,age){
                  this.name = name;
                  this.age = age;
              }
      
              //eat方法
              eat(){
                  document.write("吃饭...");
              }
          }
      
          //定义Worker类继承Person
          class Worker extends Person{
              constructor(name,age,salary){
                  super(name,age);
                  this.salary = salary;
              }
      
              show(){
                  document.write(this.name + "," + this.age + "," + this.salary + "<br>");
              }
          }
      
          //使用Worker
          let w = new Worker("张三",23,60000);
          w.show();
          w.eat();
      </script>
      </html>
      

    6.4、小结

    • 面向对象

      把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统建模,更贴近事物的自然运行模式。

    • 类的定义

      class 类{} 字面量定义

    • 类的使用

      let 对象名 = new 类名(); 对象名.变量名 对象名.方法名()

    • 继承

      让类和类产生子父类关系,提高代码的复用性和维护性。

      子类 extends 父类

      Object 顶级父类

    7、JavaScript内置对象

    7.1、Number

    • 方法介绍
      在这里插入图片描述
    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Number</title>
    </head>
    <body>
        
    </body>
    <script>
        //1. parseFloat()  将传入的字符串浮点数转为浮点数
        document.write(Number.parseFloat("3.14") + "<br>");
    
        //2. parseInt()    将传入的字符串整数转为整数
        document.write(Number.parseInt("100") + "<br>");
        document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换,直到不是数字为止
    
    </script>
    </html>
    

    7.2、Math

    • 方法介绍

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Math</title>
    </head>
    <body>
        
    </body>
    <script>
        //1. ceil(x) 向上取整
        document.write(Math.ceil(4.4) + "<br>");    // 5
        
        //2. floor(x) 向下取整
        document.write(Math.floor(4.4) + "<br>");   // 4
        
        //3. round(x) 把数四舍五入为最接近的整数
        document.write(Math.round(4.1) + "<br>");   // 4
        document.write(Math.round(4.6) + "<br>");   // 5
        
        //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
        document.write(Math.random() + "<br>"); // 随机数
        
        //5. pow(x,y) 幂运算 x的y次方
        document.write(Math.pow(2,3) + "<br>"); // 8
    </script>
    </html>
    

    7.3、Date

    • 方法说明

      • 构造方法
        在这里插入图片描述

      • 成员方法

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Date</title>
    </head>
    <body>
        
    </body>
    <script>
        //构造方法
        //1. Date()  根据当前时间创建对象
        let d1 = new Date();
        document.write(d1 + "<br>");
    
        //2. Date(value) 根据指定毫秒值创建对象
        let d2 = new Date(10000);
        document.write(d2 + "<br>");
    
        //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
        let d3 = new Date(2222,2,2,20,20,20);
        document.write(d3 + "<br>");
    
        //成员方法
        //1. getFullYear() 获取年份
        document.write(d3.getFullYear() + "<br>");
    
        //2. getMonth() 获取月份
        document.write(d3.getMonth() + "<br>");
    
        //3. getDate() 获取天数
        document.write(d3.getDate() + "<br>");
    
        //4. toLocaleString() 返回本地日期格式的字符串
        document.write(d3.toLocaleString());
    </script>
    </html>
    

    7.4、String

    • 方法说明

      • 构造方法

    在这里插入图片描述

    • 成员方法

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>String</title>
    </head>
    <body>
        
    </body>
    <script>
        //1. 构造方法创建字符串对象
        let s1 = new String("hello");
        document.write(s1 + "<br>");
    
        //2. 直接赋值
        let s2 = "hello";
        document.write(s2 + "<br>");
    
        //属性
        //1. length   获取字符串的长度
        document.write(s2.length + "<br>");
    
        //成员方法
        //1. charAt(index)     获取指定索引处的字符
        document.write(s2.charAt(1) + "<br>");
    
        //2. indexOf(value)    获取指定字符串出现的索引位置
        document.write(s2.indexOf("l") + "<br>");
    
        //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)
        document.write(s2.substring(2,4) + "<br>");
    
        //4. split(value)   根据指定规则切割字符串,返回数组
        let s3 = "张三,23,男";
        let arr = s3.split(",");
        for(let i = 0; i < arr.length; i++) {
            document.write(arr[i] + "<br>");
        }
    
        //5. replace(old,new)   使用新字符串替换老字符串
        let s4 = "你会不会跳伞啊?让我落地成盒。你妹的。";
        let s5 = s4.replace("你妹的","***");
        document.write(s5 + "<br>");
    </script>
    </html>
    

    7.5、RegExp

    正则表达式:是一种对字符串进行匹配的规则。
    在这里插入图片描述

    • 方法说明

      • 构造方法&成员方法

    在这里插入图片描述

    • 规则

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RegExp</title>
    </head>
    <body>
        
    </body>
    <script>
        //1.验证手机号
        //规则:第一位1,第二位358,第三到十一位必须是数字。总长度11
        let reg1 = /^[1][358][0-9]{9}$/;
        document.write(reg1.test("18688888888") + "<br>");
    
        //2.验证用户名
        //规则:字母、数字、下划线组成。总长度4~16
        let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
        document.write(reg2.test("zhang_san123"));
    </script>
    </html>
    

    7.6、Array

    • 成员方法

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Array</title>
    </head>
    <body>
        
    </body>
    <script>
    
        let arr = [1,2,3,4,5];
    
        //1. push(元素)    添加元素到数组的末尾
        arr.push(6);
        document.write(arr + "<br>");
    
        //2. pop()         删除数组末尾的元素
        arr.pop();
        document.write(arr + "<br>");
    
        //3. shift()       删除数组最前面的元素
        arr.shift();
        document.write(arr + "<br>");
    
        //4. includes(元素)  判断数组中是否包含指定的元素
        document.write(arr.includes(2) + "<br>");
    
        //5. reverse()      反转数组元素
        arr.reverse();
        document.write(arr + "<br>");
    
        //6. sort()         对数组元素排序
        arr.sort();
        document.write(arr + "<br>");
    
    </script>
    </html>
    

    7.7、Set

    JavaScript 中的 Set 集合,元素唯一,存取顺序一致。

    • 方法说明

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Set</title>
    </head>
    <body>
        
    </body>
    <script>
        // Set()   创建集合对象
        let s = new Set();
    
        // add(元素)   添加元素
        s.add("a");
        s.add("b");
        s.add("c");
        s.add("c");
    
        // size属性    获取集合的长度
        document.write(s.size + "<br>");    // 3
    
        // keys()      获取迭代器对象
        let st = s.keys();
        for(let i = 0; i < s.size; i++){
            document.write(st.next().value + "<br>");
        }
    
        // delete(元素) 删除指定元素
        document.write(s.delete("c") + "<br>");
        let st2 = s.keys();
        for(let i = 0; i < s.size; i++){
            document.write(st2.next().value + "<br>");
        }
    </script>
    </html>
    

    7.8、Map

    JavaScript 中的 Map 集合,key 唯一,存取顺序一致。

    • 方法说明
      在这里插入图片描述

    • 代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Map</title>
    </head>
    <body>
        
    </body>
    <script>
        // Map()   创建Map集合对象
        let map = new Map();
    
        // set(key,value)  添加元素
        map.set("张三",23);
        map.set("李四",24);
        map.set("李四",25);
    
        // size属性     获取集合的长度
        document.write(map.size + "<br>");
    
        // get(key)     根据key获取value
        document.write(map.get("李四") + "<br>");
    
        // entries()    获取迭代器对象
        let et = map.entries();
        for(let i = 0; i < map.size; i++){
            document.write(et.next().value + "<br>");
        }
    
        // delete(key)  根据key删除键值对
        document.write(map.delete("李四") + "<br>");
        let et2 = map.entries();
        for(let i = 0; i < map.size; i++){
            document.write(et2.next().value + "<br>");
        }
    </script>
    </html>
    

    7.9、Json

    • JSON(JavaScript Object Notation):是一种轻量级的数据交换格式。

      • 它是基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
      • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于计算机解析和 生成,并有效的提升网络传输效率。
        在这里插入图片描述
    • 方法说明

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JSON</title>
    </head>
    <body>
        
    </body>
    <script>
        //定义天气对象
        let weather = {
            city : "北京",
            date : "2088-08-08",
            wendu : "10° ~ 23°",
            shidu : "22%"
        };
    
        //1.将天气对象转换为JSON格式的字符串
        let str = JSON.stringify(weather);
        document.write(str + "<br>");
    
        //2.将JSON格式字符串解析成JS对象
        let weather2 = JSON.parse(str);
        document.write("城市:" + weather2.city + "<br>");
        document.write("日期:" + weather2.date + "<br>");
        document.write("温度:" + weather2.wendu + "<br>");
        document.write("湿度:" + weather2.shidu + "<br>");
    </script>
    </html>
    

    7.10、表单校验

    • 案例说明

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单校验</title>
        <link rel="stylesheet" href="css/style.css"></link>
    </head>
    <body>
        <div class="login-form-wrap">
            <h1>黑马程序员</h1>
            <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
                <label>
                    <input type="text" id="username" name="username" placeholder="Username..." value="">
                </label>
                <label>
                    <input type="password" id="password" name="password" placeholder="Password..." value="">
                </label>
                <input type="submit" value="注册">
            </form>
        </div>
    </body>
    <script>
        //1.为表单绑定提交事件
        document.getElementById("regist").onsubmit = function() {
            //2.获取填写的用户名和密码
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
    
            //3.判断用户名是否符合规则  4~16位纯字母
            let reg1 = /^[a-zA-Z]{4,16}$/;
            if(!reg1.test(username)) {
                alert("用户名不符合规则,请输入4到16位的纯字母!");
                return false;
            }
    
            //4.判断密码是否符合规则  6位纯数字
            let reg2 = /^[\d]{6}$/;
            if(!reg2.test(password)) {
                alert("密码不符合规则,请输入6位纯数字的密码!");
                return false;
            }
    
            //5.如果所有条件都不满足,则提交表单
            return true;
        }
        
    </script>
    </html>
    

    7.11、小结

    • 内置对象是 JavaScript 提供的带有属性和方法的特殊数据类型。
    • 数字日期 Number Math Date
    • 字符串 String RegExp
    • 数组集合 Array Set Map
    • 结构化数据 JSON

    8、JavaScript BOM

    • BOM(Browser Object Model):浏览器对象模型。
    • 将浏览器的各个组成部分封装成不同的对象,方便我们进行操作。

    在这里插入图片描述

    8.1、Windows窗口对象

    • 定时器
      • 唯一标识 setTimeout(功能,毫秒值):设置一次性定时器。
      • clearTimeout(标识):取消一次性定时器。
      • 唯一标识 setInterval(功能,毫秒值):设置循环定时器。
      • clearInterval(标识):取消循环定时器。
    • 加载事件
      • window.onload:在页面加载完毕后触发此事件的功能。
    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>window窗口对象</title>
        <script>
            //一、定时器
            function fun(){
                alert("该起床了!");
            }
        
            //设置一次性定时器
            //let d1 = setTimeout("fun()",3000);
            //取消一次性定时器
            //clearTimeout(d1);
        
            //设置循环定时器
            //let d2 = setInterval("fun()",3000);
            //取消循环定时器
            //clearInterval(d2);
        
            //加载事件
            window.onload = function(){
                let div = document.getElementById("div");
                alert(div);
            }
        </script>
    </head>
    <body>
        <div id="div">dddd</div>
    </body>
    <!-- <script>
        //一、定时器
        function fun(){
            alert("该起床了!");
        }
    
        //设置一次性定时器
        //let d1 = setTimeout("fun()",3000);
        //取消一次性定时器
        //clearTimeout(d1);
    
        //设置循环定时器
        //let d2 = setInterval("fun()",3000);
        //取消循环定时器
        //clearInterval(d2);
    
        //加载事件
        let div = document.getElementById("div");
        alert(div);
    </script> -->
    </html>
    

    8.2、Location地址栏对象

    • href 属性

      就是浏览器的地址栏。我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。

    在这里插入图片描述

    • 代码实现
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>location地址栏对象</title>
        <style>
            p{
                text-align: center;
            }
            span{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            注册成功!<span id="time">5</span>秒之后自动跳转到首页...
        </p>
    </body>
    <script>
        //1.定义方法。改变秒数,跳转页面
        let num = 5;
        function showTime() {
            num--;
    
            if(num <= 0) {
                //跳转首页
                location.href = "index.html";
            }
    
            let span = document.getElementById("time");
            span.innerHTML = num;
        }
    
        //2.设置循环定时器,每1秒钟执行showTime方法
        setInterval("showTime()",1000);
    </script>
    </html>
    

    8.3、案例-动态广告

    • 案例分析和实现
    <!-- 广告图片 -->
    <img src="img/ad_big.jpg" id="ad_big" width="100%"/>
    
    • 在 css 样式中,display 属性可以控制元素是否显示
    style="display: none;"
    
    • 设置定时器,3 秒后显示广告图片
    //1.设置定时器,3秒后显示广告图片
    setTimeout(function(){
        let img = document.getElementById("ad_big");
        img.style.display = "block";
    },3000);
    
    • 设置定时器,3 秒后隐藏广告图片
    //2.设置定时器,3秒后隐藏广告图片
    setTimeout(function(){
    let img = document.getElementById("ad_big");
    img.style.display = "none";
    },6000);
    

    8.4、小结

    • **BOM(Browser Object Model):**浏览器对象模型。
    • 将浏览器的各个组成部分封装成不同的对象,方便我们进行操作。
      • Window:窗口对象
      • Location:地址栏对象
      • Navigator:浏览器对象
      • History:当前窗口历史记录对象
      • Screen:显示器屏幕对象
    • Window 窗口对象
      • setTimeout()、clearTimeout():一次性定时器
      • setInterval()、clearInterval():循环定时器
      • onload 事件:页面加载完毕触发执行功能
    • Location 地址栏对象 href 属性:跳转到指定的 URL 地址

    9、JavaScript封装

    封装思想

    • **封装:**将复杂的操作进行封装隐藏,对外提供更加简单的操作。

    • 获取元素的方法

      • document.getElementById(id值):根据 id 值获取元素
      • document.getElementsByName(name值):根据 name 属性值获取元素们
      • document.getElementsByTagName(标签名):根据标签名获取元素们
    • 代码实现

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>封装</title>
      </head>
      <body>
          <div id="div1">div1</div>
          <div name="div2">div2</div>
      </body>
      <script src="my.js"></script>
      <script>
          let div1 = getById("div1");
          alert(div1);
      
          // let div1 = document.getElementById("div1");
          // alert(div1);
      
          // let divs = document.getElementsByName("div2");
          // alert(divs.length);
      
          // let divs2 = document.getElementsByTagName("div");
          // alert(divs2.length);
      </script>
      </html>
      

      js封装

      function getById(id){
          return document.getElementById(id);
      }
      
      function getByName(name) {
          return document.getElementsByName(name);
      }
      
      function getByTag(tag) {
          return document.getElementsByTagName(tag);
      }
      

    我们之前的操作都是基于原生 JavaScript 的,比较繁琐。 JQuery 是一个前端框架技术,针对 JavaScript 进行了一系列的封装,使得操作变得非常简单! 期待吧……

    展开全文
  • 主要介绍了Java调用JavaScript实现字符串计算器代码示例,具有一定参考价值,需要的朋友可以了解下。
  • 它支持C,JavaJavascript,Python,Ruby和Scheme。 特征 编程语言选择 C Java Java脚本 Python Ruby 球拍 无扫描仪解析 自动AST生成 语言无关的可重用文法 模块化可组合语法 语法测试 用户手册 Waxeye的用户...
  • java解析json

    万次阅读 2012-02-20 17:16:52
    1:下载另外一个java的小包就可以了; http://www.JSON.org/java/json_simple.zip ...2:在后端java解析json的代码: //JavaScript之家:http://www.jrose.cn a:把json字符串变成java数组对象形式:
  • 使用Java解析Json

    千次阅读 2019-08-11 22:52:07
    一、什么是JSON 1.JSON全称JavaScript Object Notation 2.JSON是一种轻量级的数据交换格式 3.JSON有两种结构 json对象 和 json数组 4.json对象 为 {key:value,key...5.json数组 结构为 ["java","javascript","...
  • javajavascript语法分析

    千次阅读 2012-01-30 10:49:02
    http://code.google.com/p/jslint4java/ 下载jslint4java 的库 1.4版本以上使用jdk1.6 1.4版本以下使用的jdk1.5 我选择的jdk1.3 比较小只有...可是使用命令行来解析js文件 比如: java -jar jslint4java-1.3.jar
  • JavaJavaScript中使用Json方法大全

    千次阅读 多人点赞 2015-07-03 17:17:16
    JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、JavaJavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和...
  • 【狂神说JavaJavaScript学习笔记

    万次阅读 多人点赞 2020-05-10 22:30:33
    本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网Java全栈工程师”再向前迈进一步。 1.1、前端三要素 HTML(结构):超文本标记语言(Hyper Text Markup Language)...
  • JavaScript解析

    千次阅读 2020-07-19 15:55:53
    JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程 预解析过程: 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。 把函数的声明提升到当前作用域的最前面,...
  • XML由于存在时间较长已经成为了传输结构化数据的事实标准。 JSON则是由于后来业界不少人认为XML过于繁琐、冗长而新产生的一种...JavaJavaScript对XML和JSON的支持   Java解析和序列化xml以及json
  • JAVA解析json数据

    千次阅读 2010-08-26 16:04:00
    在www.json.org上公布了很多JAVA下的json解析工具,其中org.json和json-lib比较简单,两者使用上差不多。下面两段源代码是分别使用这两个工具解析和构造JSON的演示程序。 这是使用json-lib的程序: ...
  • zxing.java源码解析很棒的Java 精选的 Java 框架、库和软件的精选列表。 古人 从一开始就存在,并且在炒作消退后将继续使用很长时间。 - 使用 XML 构建流程管理。 - 在商品硬件集群上存储和大规模处理数据集。 - ...
  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成。接下来通过本文给大家介绍JAVA使用Gson解析json数据实例解析,需要的朋友参考下吧
  • 仿58同城源码java javascript理解奇怪的部分 5 - 概念旁白 - 语法解析器、执行上下文和词法环境 语法解析器- 一个读取您的代码并确定其功能以及其语法/语法是否有效的程序。 当您编写 JavaScript 时,它并没有直接...
  • java解析xml动态生成树形菜单结构

    热门讨论 2009-12-04 16:17:15
    java解析xml动态生成树形菜单结构 可以满足无限层的树形菜单,该工程的所有代码,都有详细的实例。 以及js控制树形菜单的伸展和收缩,以及全选
  • 效率非常快的java读取javascript,附带源码和js.jar
  • JavaJavaScript和C#度量和数据类型转换库。 20个完整的计量单位。 解析任何编程数据类型或转换分数而没有任何错误。 能够创建自己的自定义UnitOf测量值。 体积小(整个套件最小64kb),快速且易于使用,且...
  • 果不其然,他扔给了我一个新的需求,要我在 Java解析 JSON,并且要在半个小时候给出最佳的解决方案。 无奈,提前下班的希望破灭了。不过,按时下班的希望还是有的。于是我撸起袖子开始了研究,结果出乎我的意料...
  • Java解析XML的几种方法

    万次阅读 多人点赞 2017-11-07 20:43:16
    Java解析XML有几种方法,本文就讨论是怎么使用这四种方法来解析XML文件,并分析他们的优缺点以及应用场合。1. DOM(Document Object Model)优点: 1. 允许应用程序对数据和结构做出更改。 2. 访问是双向的,...
  • JAVA解析JSON常用方法及注意事项

    千次阅读 2018-06-25 14:34:11
    JSON:JavaScript 对象表示法(JavaScript Object Notation)。 分享一个: 在线的json解析器 再分享一个: w3c json教程地址 json支持的数据类型:  - Number 数字型(整数或浮点数)  - String 字符串...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 128,505
精华内容 51,402
关键字:

java解析javascript

java 订阅