java 如何与 JS 交互

转载

码海航行侠 2024-09-04 22:32:25

文章标签 java 如何与 JS 交互 HTML 运算符加载 文章分类 Java 后端开发

1.JS的概述：
　什么是JS：运行在浏览器端脚本语言，基于对象和事件驱动的语言，应用于客户端，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
　 JS的用途：使用JS提升用户的体验.使HTML动起来.

2.JS的引入方式：

　　（1）：页面内直接编写JS代码,JS代码需要使用<script></script>.
　　（2）：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
<script type="text/javascript" src="../js/check.js"> //这里面不写东西</script>。外部脚本不能包含 <script> 标签。

3.JS的组成：

　　 （1） ECMAScript：JS的核心
   基本语法
       与 Java 一样，变量、函数名、运算符以及其他一切东西都是区分大小写的。
           比如：变量 test 与变量 TEST 是不同的
       弱类型语言，可以任意改变变量的类型，变量是弱类型的与 Java 和 C 不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。因此，可以随时改变变量所存数据的类型（尽量避免这样做）。

例子
var color = "red";
var num = 25;
var visible = true;

       行代码结束可不加分号，就默认为换行，建议加上分号，最好的代码编写习惯是总加入分号，因为没有分号，有些浏览器就不能正确运行，不过根据 ECMAScript 标准，下面两行代码都是正确的：

var test1 = "red"
var test2 = "blue";

       变量名可以包含数字，但是不能以数字开头
       注释
           单行注释   :   以双斜杠开头（//）
           多行注释   :   以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）

   js运算符：
       一元运算符：++ -- 与Java一致
       逻辑运算符：&& || ！or
       算术运算符：+ - * / % 运算
           + 特点：做的是拼接操作
           - 特点：先把值转换成数值后再进行减法运算，转换后不是数值相减会出现NaN
       关系运算符：
           > < >=    <=    ==    !=
           == 和 ===的区别，前者比较的是数值，后者不仅比较值而且还比较数据类型
       三元运算符
           值?表达式1:表达式1
           如果值为true,整个表达式取表达式1的值，如果值为false,整个表达式取表达式2值。
       赋值运算符
           *=、+=、-=、/=、%=
           以上赋值运算符与java中操作一样
       逗号运算符
           var a=1, b=2;
           逗号运算符可以在一条语句中执行多个运算
   声明变量
       var关键字
           var i = 10;
           var i = "wangbadan";
           var i = true;
           var i = null;
           ......

   js流程控制语句：
       if条件
           格式：if(条件){语句}else{语句}
           在java中if语句后面的条件必须是true/false值，而在javascript 中我们描述true/false有多种方式，所以要注意与java中的区别
       switch语句
       While与do-while
       for循环

   js类型
       原始类型
           string：字符及字符串都看做为字符类型
           number：数值类型
           boolean：逻辑类型
           null
           undefined：变量未初始化

       引用类型：
           对象类型.对象类型默认值是null.
       类型判断：
           typeof()

       类型转换：
           toString():转传成字符串
           parseInt(值)：转换成数字类型
           parseFloat(值)：转换成浮点类型
           Boolean(值)：值转换成Boolean类型
           Number(值)：值转换成Number类型

　　（2）DOM：Document Object Model 文档对象模型
   DOM:就是将文档加载到内存，形成树形结构, 从而操作树形结构就可以改变HTML的样子.
   Document :文档对象.代表的是加载到内存中的整个的文档.
   Element :元素对象.代表文档中的每个元素（标签）
   Attribute:属性对象.代表元素上的属性.
   Document,Element,Attribute统称为Node（节点）

   DOM基本操作：1.获取元素：
           document.getElementById() 通过ID获得元素
           document.getElementsByName()    通过name属性获得元素
           document.getElementsByTagName();    通过标签名获得元素

       　　 2.创建元素：
           document.createElement(); 创建元素
                   var para=document.createElement("p");

　　 document.createTextNode(); 创建文本节点
var node=document.createTextNode("这是新段落。");

              3.添加元素：
           element.appendChild(); 在最后添加一个节点
           element.insertBefore(); 在某个元素之前插入一个节点
      　　4. 删除元素：
           element.removeChild(); 如需删除 HTML 元素，您必须首先获得该元素的父元素：
                   var parent=document.getElementById("div1");
　　　　　　var child=document.getElementById("p1");
　　　　　　parent.removeChild(child);

如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1");
　　　　　　child.parentNode.removeChild(child);

       　　 5.修改元素:
           elementNode.setAttribute(name,value)
               参数描述
                   name 必需。规定要设置的属性名。
                   value 必需。规定要设置的属性值。
               说明: 该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

       　　6. 改变 HTML
           改变 HTML 内容：document.getElementById(id).innerHTML=new HTML
           改变 HTML 属性：document.getElementById(id).attribute=new value

　　7.改变 CSS
document.getElementById(id).style.property=new style

      　　 8. 事件
              对 HTML 事件做出反应
               onclick=JavaScript
                   <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
                   <h1 onclick="changetext(this)">请点击该文本</h1>

           HTML 事件属性
               向 button 元素分配 onclick 事件：
                   <button onclick="displayDate()">点击这里</button>

           使用 HTML DOM 来分配事件
               向 button 元素分配 onclick 事件：
                   <script>
       document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

　　　　（3）BOM：Browser Object Model 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

Window：窗口对象
   alert(); 显示带有一段消息和一个确认按钮的警告框      alert("文本")
   confirm();    弹出一个确认对话框   confirm("文本")
   open(); 打开一个新窗口
   prompt();    显示可提示用户输入的对话框 prompt("文本","默认值")

   设置定时的方法
       * setInterval(); :每隔多少毫秒执行某个表达式. * setInterval(“change()”,5000);
       * setTimeout(); :隔多少毫秒执行一个该表达式.    * setTimeout(“change()”,5000);
   清除定时的方法 clearInterval();
           （1） clearInterval(id_of_setinterval)
               var int=self.setInterval("clock()",50)
               window.clearInterval(int);
       　（2）clearTimeout();
           clearTimeout(setTimeout_variable)
               t=setTimeout("timedCount()",1000)
               clearTimeout(t)
Navigator：浏览器对象
Screen：屏幕对象
History：历史对象   go();   加载history 列表中的某个具体页面
Location：路径对象    href:   设置或者返回完整的URL

4.JS函数的定义和创建：

　　创建
   function 函数名（参数）{
函数体；
}
//默认返回值为true。
* window.onload = function(){

}
   var 函数名 = new Function（参数（函数体））
   var 函数名 = function（参数） {
函数体
}
js函数参数问题：参数无数据类型，调用时不用按照方法里的参数规定来
js函数返回值问题：
　　（1）如果有返回值可以用return
       （2）有返回值不用声明返回值类型
           注：没有方法重载，可以用arguments模拟
       （3）如果没有返回值就返回undefined