java开发工程师入门第二阶段(07-web前端(JS))

文档中心

文章目录

- - - 三.javaScript(简称JS)
    - - 3.1.javaScript概述
      - 3.2.JavaScript和Java的关系
      - 3.3.JavaScript组成
      - 3.4.JavaScript小结
      - 3.5.JavaScript的基本语法
      - 1.语法规范
        
        2.javascript入门案例
        
        3.javscript与html结合的两种方式
        
        4.javscript的注释
        
        5.五种原始类型
        
        6.常量和变量
        
        7.运算符
        
        8.流程控制语句
        
        9.数组
      - 3.6JavaScript的Dom操作
      - 1.Dom概述
        
        2.Dom的api
      - 3.7 事件机制
      - 1.事件概述
        
        2.事件和事件源绑定
      - 3.8.BOM对象
      - 1.BOM概述
        
        2.Bom常见对象
        
        3.常用api
      - 3.9 常见的内置对象
      - 1.Global全局对象
        
        2.Math对象
        
        3.JSON对象
        
        4.定义类创建对象的方式
        
        5.案例(省市二级联动)
      - 4. html网页里面引入javascript

三.javaScript(简称JS)

3.1.javaScript概述

JavaScript是一门客户端脚本语言，基于对象和事件驱动的一门客户端脚本语言，可以直接在浏览器端运行。

客户端:浏览器
脚本语言:无需编译,可以直接运行.
基于对象:javascript已经提供好了大部分对象,前端开发者,可以直接使用这些对象(对象无需创建,直接使用)
时间驱动:通过触发事件,驱动事件绑定的javascript代码,实现网页的动态效果.
核心功能就是增强用户和HTML页面的交互过程,让页面有一些动态效果,以此增强用户的体验.

3.2.JavaScript和Java的关系

3.2.1 javascript是一门脚本语言:无需编译,可以直接运行(在浏览器中)

java是一门编程语言,先编译,后运行(编译的过程依赖与JVM)

3.2.2 javascript是基于对象的脚本语言:对象可以直接使用,无需创建

java是面向对象的编程语言:对象必须先创建,然后再使用

3.2.3 javascript是一门弱类型的脚本语言,指的在javascript所有类型都可以使用var来表示,比如var num=10; var str=“hello”,var flag=true.

java是一门强类型的编程语言,指的在定义变量时,必须先确定类型,然后再定义变量.比如int sum=10; Sring str=

“hello”;boolean flag=true;

javascript和java的相同之处
1. javascript和java的定义基本语法很相似.
2. javascript书写方式和java的书写的diam方式很相似

3.3.JavaScript组成

ECMAScript

规范了javascript的基本语法
DOM

document object model : 文档对象模型（由一系列文档对象构成的模型）

作用：操作标记性的文档(指的xml或者html文档)
BOM

browser object model: 浏览器对象模型（由一系列浏览器对象构成的模型）

作用：操作浏览器的。

3.4.JavaScript小结

javascript是一门客户端脚本语言
javascript是一门弱类型语言(即使有时语法写的很不规范,也不报错)
javascript的三个组成部分:基本语法+DOM+BOM
常见的前端开发工具:html,css,javascript
常见的后端开发工具:idea,eclipse,myeclipse,sts

3.5.JavaScript的基本语法

1.语法规范

区分大小写
每行代码结束,建议使用分号表示
代码书写格式(建议与java代码书写格式保持一致)

2.javascript入门案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//1.定义变量 num=10;var num = 10; //2.弹出的警告框alert(num);</script></body></html>注意： 书写js代码时，一定一定加上<script> js代码 </script>

3.javscript与html结合的两种方式

方式一:直接在html里面,嵌入js代码

优点:可以直接看到书写的js代码

缺点:js代码和html标签在一起,不便于后期的维护

<body><script type="text/javascript">//1.定义变量 num=10;var num = 10; //2.弹出的警告框alert(num);</script></body>

方式二:引入外部的js文件

步骤一：先定义好一个js文件，步骤二：通过script标签的src属性引入外部定义好的js文件

优点：便于后期js的代码维护

outer.js:

//1.定义变量 num=10;var num=10010;//2.弹出的警告框alert(num);

在html网页里面引入:外部的js文件

4.javscript的注释

和java的注释基本一样
单行注释: //注释内容
多行注释: /*注释内容/

5.五种原始类型

1.判断类型可以用typeof

2.原始类型

2.1:number类型:数字类型

2.2:string类型:字符串或者字符

2.3:null类型:比如:定义一个变量,赋值为null,var a=null;

2.4:undefined类型: 未定义类型,比如:定义一个变量,没有赋值,vara;

2.5:boolean类型:表示true或者false

3.代码演示

<script type="text/javascript">//1.定义number类型var num=10;//1.1.判断num的类型document.write(num+" : "+(typeof num)+"
")//2.定义string类型var str="hello world";//2.1 输出到浏览器document.write(str+"  :  "+(typeof str)+"
");//3.定义boolean类型var flag =true;//3.1 输出到浏览器document.write(flag+"  :  "+(typeof flag)+"
");//4.定义null类型var obj =null;//4.1 输出到浏览器document.write(obj +"  :  "+(typeof obj )+"
");//5.定义undefined类型var und;//5.1 输出到浏览器document.write(und+"  :  "+(typeof und)+"
");</script>

6.常量和变量

1.javscript是一门弱类型脚本语言,在定义变量或者常量时,不用知道类型,或者可以使用var,let,const
2.定义局部变量,使用关键字:let(建议放在方法内)
3.全局变量: var 变量名称A; //变量名称A就是全局变量变量名称A=赋值
4.常量值(不能改变的值),关键词:const
5.注意:定义变量或者常量时,使用let或者const关键词:不存在类型变量的提升

<!DOCTYPE html><html><head><meta charset="utf-8"><title>常量</title></head><body><script type="text/javascript">//1.定义全局变量,可以在任意方法内使用var a =10;//定义常量const c=99.9;//c =111;常量不可以修改//2.定义一个方法function test1(){//定义局部变量let b=20;document.write("常量值:"+c+"
")//向浏览器输出document.write("test1方法中,全局变量:"+a+"
");document.write("test1方法中,局部变量:"+b);document.write("
")}//2.1定义方法function test2(){document.write("test2方法中,全局变量:"+a)}//3.调用方法test1();test2();</script></body></html>

7.运算符

1.算术运算符

在这里插入图片描述

注意:如果数字与字符串类型的数字进行运算时:

如果是 + 号,进行的是字符串拼接

如果不是 + 号,进行的是算术运算

<!DOCTYPE html><html><head><meta charset="utf-8"><title>算术运算符</title></head><body><script type="text/javascript">//定义变量var d="10";var e=1;var d_e =d+e;document.write(d_e+"
")//定义变量var a=1;var b=2;var c=3;//求和var sum=(++a)+(b++)+(++c);//2+2+4=8document.write(sum)//8</scrit></body></html>赋值运算符

2.赋值运算符

在这里插入图片描述

<!DOCTYPE html><html><head><meta charset="utf-8"><title>赋值运算符</title></head><body><script type="text/javascript">//取余后赋值var a=10;a %=2;document.write("取余数等"+a)a %=2;document.write("取余数等"+a+"
")//相加后赋值var b=10;b+=2;document.write(b+"
")//12//相减后赋值b -=2;document.write(b)//10</script></body></html>

3.比较运算符

注意: == : 只比较值，不比较类型 === ：先比较类型，然后在比较值

在这里插入图片描述

<!DOCTYPE html><html><head><meta charset="utf-8"><title>比较运算符</title></head><body><script type="text/javascript">//定义数字类型var a=10;var b=10;var f=(a==b);document.write(f)document.write("
")//定义字符串var c="10";document.write("比较"+(a==c)+"
");//两个==只比较数值document.write("比较"+(a===c));//三个===数值和类型都比较</script></body></html>

4.逻辑运算符

注意：

空串取反操作：true
null取反操作：true
0取反操作：true
Nan取反操作：true

java开发工程师入门第二阶段(07-web前端(JS))

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">//空串取反var a="";var flag=!a;document.write(flag)//null取反var b=null;document.write("null取反结果"+(!b)+"
")//NaN取反var c=NaN;document.write("NaN取反结果"+(!c)+"
")//0数字取反var d=0;document.write("0取反结果"+(!d)+"
")</script></body></html>

5.三元运算符

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var totalCount =101;var pageSize =5;pageNumbers=(totalCount%pageSize==0)?(totalCount/pageSize):(((totalCount-1)/pageSize)+1)if(totalCount%pageSize==0){pageNumbers=totalCount/pageSize;}else{pageNumbers=((totalCount-1)/pageSize)+1;}document.write(pageNumbers)</script></body></html>

8.流程控制语句

1.顺序结构

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var a=10;var b="全10美";var c =a+b;document.write(c)</script></body></html>

2.分支结构

if if else if else if

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">//判断当前月份是哪个季节//定义一个月份(3-5春天,6-8夏季,9-11秋季,12-2冬季)var month=15;if(month>3 && month<5){document.write(month+"是春季");}else if(month>6 && month<8){document.write(month+"是夏季");}else if(month>9 && month<11){document.write(month+"是秋季");}else if(month>12 || month<1){document.write(month+"月份写错了");}else{document.write(month+"是冬季");}</script></body></html>

3.循环结构

//for循环 //while循环 //do while循环

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">//for循环for (var i = 0; i < 9; i++) {document.write(i+",");}document.write("
");//while循环var j=10;while(j<=19){document.write(j+",");j++;}document.write("
");//do while循环var h=100;do{document.write(h+",");h+=2;}while(h<200);</script></body></html>

4.普通函数

方式二：普通函数

function 方法名称（方法的参数）{

方法体内容

}

<!DOCTYPE html><html><head><meta charset="utf-8"><title>定义普通函数</title></head><body><script type="text/javascript">function test1(){document.write("定义一个没有参数没有返回值的普通函数");}document.write("
")//调用函数test1();//定义求和的函数,注意:参数不要varfunction addSum(a,b){var sum=a+b;document.write(sum);}addSum(1,11)function addSum(a,b){var sum=a+b;return sum;}var r_c=addSum(1,11);document.write(addSum(1,11))</script></body></html>

5.匿名函数

var 方法名称 = function (方法的参数）{

方法体内容

}

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">/** * var 函数名称 =function(参数){方法体} *  * */var test1 = function(a,b){var sum =a+b;return sum;}var return_data =test1(1,11);document.write(return_data)</script></body></html>

6.动态函数

var fun1 = new Function(参数，方法体);

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">//console.log(数据):在浏览器控制台打印数据var test1 = new Function("a,b","console.log(a+b)");test1(1,11);</script></body></html>

9.数组

数组的创建：
- 方式一：直接创建一个指定元素的数组
  
  var arr1 = [1,“a”,“b”,true];
  
  var arr2= new Array(1,“a”,“b”,true);
- 方式二：创建一个空的数组
  
  var arr1=[ ]; 或者 var arr2= new Array();
- 方式三：创建一个指定长度的数组
  
  var arr= new Array( size 数字)
数组的特点：
- 数组的元素类型：可以是任意类型
- 数组的长度可以变化的
  
  数组的长度 = 数组的最大索引值+1
数组的属性：
- length属性：获取数组的长度

数组的方法：

1.var str = 数组对象.join(连接符号);//字符串

2.var endEle = 数组对象.pop();// 删除最后一个元素并返回

3.var lenght = 数组对象.push(ele);//向数组末尾添加一个元素ele,返回新的长度

4.var arrNew = 数组对象.reverse();//颠倒数组元素的顺序，返回一个新的数组

普通数组:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var arr1 =["a",1,true,null];var arr2 = new Array("a","b","c")//获取数组的长度var arr1_length = arr1.length;document.write("arr1的长度"+arr1_length+"
");document.write("arr2的长度"+arr2.length+"
");//存储和管理数据var arr2_d1 =arr2[0];document.write("arr2的索引为0的数据:"+arr2_d1+"
")//存数据arr2[0] ="aaa";document.write("arr2的:"+arr2+"
");arr2[5] ="eee";document.write("arr2的:"+arr2+"
");document.write("arr2的长度"+arr2.length+"
");</script></body></html>

动态数组:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var arr=new Array(3);document.write("存数据之前的长度"+arr.length);document.write("
")//添加数据arr[0]="AAA";arr[1]="BBB";arr[2]="CCC";document.write("添加0,1,2的数据"+arr)document.write("
")arr[5]="BBBBBB";document.write("添加0,1,2,5的数据"+arr)</script></body></html>

3.6JavaScript的Dom操作

1.Dom概述

DOM： Document Object Model 文档对象模型，作用：操作标记性文档（目前学过的xml，html文档）

演示DOM操作过程：

在这里插入图片描述

2.Dom的api

2.1Dom操作标签（crud标签）

根据id获取标签对象：获取的是一个标签对象
根据标签名称获取标签对象：获取的是多个标签对象
根据name属性获取标签对象：获取的是多个标签对象
根据class属性获取标签对象：获取的是多个标签对象

在这里插入图片描述

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>密码：<input type="password" name="psw"  /><br/>用户名：<input type="text" name="username" id="uname" class="s" /><br/>性别：<input type="radio" name="sex" class="s"  value="man"/>男<input type="radio" name="sex"  class="s" value="woman"/>女<br/><script type="text/javascript">//1.根据id获取标签对象var username_tag=document.getElementById("uname");document.write(username_tag.name+"
");//2.根据标签名称获取标签对象var input_tag=document.getElementsByTagName("input");document.write(input_tag.length+"
");//3.根据name的属性值获取标签对象var input_tag1=document.getElementsByName("sex");document.write(input_tag1.length+"
")//4.根据class的属性值获取标签对象var input_tag2=document.getElementsByClassName("s");document.write(input_tag2.length+"
")</script></body></html>

2.2.Dom操作属性（设置属性，获取属性，移除属性）

方法
在这里插入图片描述

<a id="a1">点击我，去跳转</a><a id="a2" href="#">点击我，去跳转</a><hr /><br /><input type="button" value="设置属性" onclick="addAttr()" /><input type="button" value="移除属性" onclick="removeAttr()" /><input type="button" value="获取属性" onclick="getAttr()" /><input type="button" value="设置属性的方式二" onclick="addAttr2()" /><script type="text/javascript">//4.给a设置属性function addAttr2(){//1.获取a标签对象var a_tag = document.getElementById("a2");//2.设置属性a_tag.style.textDecoration="none";//通常：设置css样式使用}//1.给a设置 href=index.htmlfunction addAttr(){//1.获取a标签对象var a_tag = document.getElementById("a1");//2.设置属性a_tag.setAttribute("href","index.html");}//2.移除a标签的href属性function removeAttr(){//1.获取a标签对象var a_tag = document.getElementById("a1");//2.设置属性a_tag.removeAttribute("href");}//3.获取a标签的href属性function getAttr(){//1.获取a标签对象var a_tag = document.getElementById("a1");//2.设置属性var str  = a_tag.getAttribute("href");alert(str);}</script>

2.3.Dom操作文本（文本：指的标签体内容）

* 第一块: 通过document获取标签对象   ==根据id获取:     var singleTag = getElementById("id的值");   ==根据标签名称获取: var tags =  getElementsByTagName("标签名称");   ==根据标签的name属性获取:var tags =  getElementsByName("name属性的值");* 第二块操作: 通过标签对象操作属性  ==给属性赋值:方式一:  标签对象.属性名称= 赋值;//可以,但是在有的浏览器不兼容方式二:  标签对象.setAttribute("属性名称","赋值");  ==获取属性的值方式一:  var value = 标签对象.属性名称;//可以,但是在有的浏览器不兼容方式二:  var value = 标签对象.getAttribute("属性名称");* 第三块操作: 操作文本文本: 指的标签体的内容, 只有围堵标签才有标签体.比如a标签,div标签  ==设置文本   标签对象.innerHTML = 赋值;  ==获取文本  var value = 标签对象.innerHTML;* 事件: 指的操作网页时,触发的动作,比如: 鼠标单击,鼠标双击,按键盘等等     实际生活场景中: 脚踹电动车事件    * 事件源: 指的网页的元素,比如: 标签,文本等等     实际生活场景中:电动车    * 事件(js代码)和事件源绑定: 通过触发网页的事件,去调用js代码.  实际生活场景中: 报警器和电动车绑定,脚踹电动车事件,触发报警器报警    * 常见的事件有那些点击事件*onclick： 单击事件*ondbclick: 双击事件内容改变事件* onchange* 作用范围: 通常作用于select标签页面加载事件* onload  1. 通常作用于body标签  2. 特点: 当html网页全部加载完毕以后,会自动执行对应的js代码* js代码位置: 建议放在body最下面,为什么? 因为代码加载从上向下的* js代碼放在head里面,并且代码不报错,怎么解决?.  onload事件: 作用就是,当html网页全部加载完毕后,才会执行js代码* 事件和事件源绑定  方式一: 直接绑定,就是在标签里面写我们的事件   比如: <input type="button" onclick = "test1()" />  方式二: 间接绑定,就是通过我们的标签调用事件属性   比如:<input type="button" id="b1" />      document.getElementById("b1").onclick=function(){}

获取文本:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="d1">    我是一个小小鸟！！！</div><script type="text/javascript">//获取文本的值:innerHTMLvar div_tag =document.getElementById("d1");//赋值div_tag.innerHTML="xxxxx";//获取值var div_text = div_tag.innerHTML;console.log(div_text);</script></body></html>

事件的绑定方法:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><button>普通按钮</button><script type="text/javascript">//间接绑定/** * onclick也是标签的属性:函数 * 分析思路:操作属性时 * 1.获取标签对象 * 2.对象.οnclick=函数 * *///1.根据标签名称获取标签对象var tags=document.getElementsByTagName("button");//2.通过标签对象.属性名称=函数var singlebutton=tags[0];singlebutton.onclick =function(){console.log(2222);}</script></body></html>

双击事件:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><a href="#" id="a1">点击我到达内官网</a><script type="text/javascript">var tag=document.getElementById("a1");tag.setAttribute("ondbclick","test2()")function test2(){tag.setAttribute("href","http://www.tedu.cn");}</script></body></html>

内容切换事件1:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!--直接绑定:在下拉选择框里面直接绑定内容切换事件    内容切换事件:内容在切换的时候才会触发切换事件--><select onchange="changeContext()"><option>选择省份</option><option>海南省</option><option>江苏省</option><option>河北省</option></select><script type="text/javascript">//1.给直接绑定:定义函数//定义变量var num=1;function changeContext(){console.log(num);num++;}</script></body></html>

内容切换事件2:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>/** * οnlοad="t2" * 作用:当html网页全部加载完毕以后,才会执行t2函数 * 特点:由于网页是自动加载的,所有加载完毕后,onload会自动执行 * */function t2(){//0.需求:获取标签内容//1.根据id获取标签对象var divTag = document.getElementById("d1");//2.根据标签对象的innerHTML属性var div_text =divTag.innerHTML;//3.打印console.log(div_text);    }</script></head><!--直接绑定:body标签,绑定onload事件--><body onload="t2()"><div id="d1">我们一起学习JAVA</div></body></html>

3.7 事件机制

1.事件概述

* 事件: 指的操作网页时,触发的动作,比如: 鼠标单击,鼠标双击,按键盘等等     实际生活场景中: 脚踹电动车事件    * 事件源: 指的网页的元素,比如: 标签,文本等等     实际生活场景中:电动车    * 事件(js代码)和事件源绑定: 通过触发网页的事件,去调用js代码.  实际生活场景中: 报警器和电动车绑定,脚踹电动车事件,触发报警器报警    * 常见的事件有那些点击事件*onclick： 单击事件*ondbclick: 双击事件内容改变事件* onchange* 作用范围: 通常作用于select标签页面加载事件* onload  1. 通常作用于body标签  2. 特点: 当html网页全部加载完毕以后,会自动执行对应的js代码* js代码位置: 建议放在body最下面,为什么? 因为代码加载从上向下的* js代碼放在head里面,并且代码不报错,怎么解决?.  onload事件: 作用就是,当html网页全部加载完毕后,才会执行js代码* 事件和事件源绑定  方式一: 直接绑定,就是在标签里面写我们的事件   比如: <input type="button" onclick = "test1()" />  方式二: 间接绑定,就是通过我们的标签调用事件属性   比如:<input type="button" id="b1" />      document.getElementById("b1").onclick=function(){}

2.事件和事件源绑定

1.直接绑定和间接绑定

    <input type="button" value="直接绑定" onclick="f1();" /><input type="button" value="间接绑定" id="bt2" /><script type="text/javascript">//1.直接绑定：function f1() {alert("直接绑定---");}//2.间接绑定：//2.1 获取标签对象var input2_tag = document.getElementById("bt2");//2.2 标签对象操作事件属性input2_tag.onclick = function(){alert("间接绑定---");}   </script>

onchange:在内容改变时，触发该事件

<script type="text/javascript"> //1.页面加载事件 window.onload=function(){ //2.内容改变事件 document.getElementById("province").onchange=function(){ //3.获取改变的内容: this 表示option标签对象 var province_name = this.value; console.log(province_name); } //3.作业： 点击省份，在右侧显示该省份对应的市区 } </script></head><body><select id="province"><option>--请选择--</optgroup><option value="henan">河南</optgroup><option value="jianghsu">江苏</optgroup><option value="gaugndong">广东</optgroup></select><select id="city"><option>--请选择--</optgroup></select></body>

3.8.BOM对象

1.BOM概述

Browser Object Model 浏览器对象模型,包含多个bom对象作用: 操作浏览器

2.Bom常见对象

window : 窗口
navigator :表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)
screen:网页的屏幕
history:历史记录
location :获取地址栏的地址或者改变地址栏的地址

3.常用api

1.window 对象

== 打开新的窗口,显示网页

window.open(“https://www.baidu.com”);

== 关闭窗口,关闭网页

window.close();

2.location对象

属性href

3.9 常见的内置对象

1.Global全局对象

<meta charset="utf-8"><script type="text/javascript">/**Global全局对象：javascript内置的对象（这个对象的名称是Global: 只有名称，没有”真人“）*1.eval();将普通的字符串解析为js代码执行* 2.isNaN();判断是不是数字* 3.parseInt();将字符串类型的数字转成number类型数字* 4.parseFloat();将字符串类型的浮点数转成float浮点数* */document.write(33333+"
");//方法的调用var str1="document.write(1111)";eval(str1);var num=10;var flag1 = isNaN(num);document.write(flag1);//falsedocument.write("
");//转成整数var num1 = "10";var num2 =10;var num3=parseInt(num1);document.write(num3);document.write(typeof num3);document.write("
");//转成浮点数var sum ="1.1";var sum1=parseFloat(sum);document.write(sum1);

2.Math对象

<meta charset="utf-8"><script type="text/javascript">/** * floor();"地板方法"向下取整,比如: 5.9-->向下取整 5 * ceil();"天花板方法"向上取整,比如:5.01-->向上取整6 * random();随机数,范围[0,1);包含0,不包含1 * */var n1 = 2.1;var n1_end=Math.floor(n1);document.write(n1_end)//2document.write("
");//ceil();"天花板方法"向上取整var n2 = 3.111;var n2_end=Math.ceil(n2);document.write(n2_end);//4document.write("
");var t =101;var p =5;var totalPage =(t%p==0) ? (t/p) : (Math.ceil(t/p));document.write("总页数"+totalPage);//21 //3.random();随机数 document.write("
"); var s= Math.random()*6;//[0,5.5.9) var s1 = Math.floor(s);//[,5] document.write(s1);

3.JSON对象

<meta charset="utf-8"><script type="text/javascript">/** * json概述 *  它是一种轻量级的数据格式,类型与map * json特点: * 1.数据量小 * 2.描述数据,比较直观,清晰 * json作用 * 前端----json----后端 * json定义 * 第一类:单个json对象 * 第二类:json数据对象 * 注意: * 1.大括号外边不要加双引号 * 2.在大括号里面除了数字不加引号以外,其他值都加引号 * json解析 * 1.第一类:单个json对象:json对象.key * 2.第二类:json数据对象   * 步骤一:从数组中拿到单个json * 步骤二:json对象 .key * */ //json的key:first //json的value:{"id":1,"name":"jack"} var casjson={"first":{"id":111,"name":"jack"}}; var casUserID=casjson.first.id; var casUserName = casjson.first.name;  document.write(casUserID+","+casUserName); document.write("
") //第一类:单个json对象 var user={"id":1,"name":"jack"}; var id =user.id; var name= user.name; document.write(id+","+name) var users=[{"id":1,"name":"jack"},{"id":2,"name":"rose"},{"id":3,"name":"海水"}];//静态数组 for (var i = 0; i < users.length; i++) { var u=users[i]document.write(u.id+","+u.name+"
") }

4.定义类创建对象的方式

<meta charset="utf-8"><script type="text/javascript">/** * 基本语法: *   class 类名{ * 构造函数 * constructor(参数){ * } * 普通方法 * 方法名称(){方法体} * } * */class Demo{//成员变量num=0;constructor(num){this.num=num;}//方法test(){document.write(this.num)document.write("测试");}}var demo=new Demo(1000);demo.test();

5.案例(省市二级联动)

<meta charset="utf-8"><div style="text-align:center"><select id="p">请选择<option value="js">江苏省<option value="sd">山东省<option value="hn">河南省<select id="c">请选择

<script type="text/javascript">/** * 分析思路 * 1.点击省份显示对应得市区数据,给省份绑定onchange * 2.当我们点击省份时,判断点击的是那个省份 * 3.点击省份,在右侧的下拉选择框中通过innerHTML *  * */ //1:间接绑定:点击省份显示对应得市区数据,给省份绑定onchange document.getElementById("p").οnchange=function(){ //解决bug:点击省份,去除上个省份对应得市区数据 document.getElementById("c").innerHTML="请选择"; //2.当我们点击省份时,判断点击的是那个省份 //this:在javascript语法中,点击那个标签,this就表示那个标签 var p = this.value; //window.alert(p) //3.根据获取的省份进行判断,在右侧显示我们的市区数据 //根据id获取市区的标签 var city =document.getElementById("c"); //4.进行判断 if(p=="js"){ //显示福建的城市 var data="请选择"+"苏州"+"南京"+"徐州" city.innerHTML = data; }else if(p=="sd"){ var data="请选择"+"济南"+"青岛"+"烟台"city.innerHTML =data; } }

4. html网页里面引入javascript

<meta charset="utf-8" /><!--   1. my.js文件：  document.write("outer js");   2. html网页： script标签的src属性引入外部定义的js文件 --><script type="text/javascript" src="js/my.js" >/* * 在html网页里面引入javascript *  方式一: * html网页里面,书写script标签,里面定义js代码 * 缺点: *    1.js代码不能重复使用(不能在其它网页里面使用) *    2.html标签和js代码耦合了,后期不便于修改和维护 * 优点: *     html网页和js代码写在一起,便于阅读和调试. * 小结: 在开发环境下(代码处于编码阶段),使用方式一. *  方式二: * 1.在外部定义一个js文件 * 2.在html网页里面,通过script标签的src属性引入外部的js文件 * 缺点: *     js代码是单独的一个文件,所以在html阅读起来麻烦. * 优点: *    1.js代码可以重复使用 *    2. js代码和html网页解耦合,便于修改和维护 * 小结: 在生产环境下(代码全部发完毕,上线),使用方式二 */

java开发工程师入门第二阶段(07-web前端(JS))

文章目录

三.javaScript(简称JS)

3.1.javaScript概述

3.2.JavaScript和Java的关系

3.3.JavaScript组成

3.4.JavaScript小结

3.5.JavaScript的基本语法

1.语法规范

2.javascript入门案例

3.javscript与html结合的两种方式

4.javscript的注释

5.五种原始类型

6.常量和变量

7.运算符

8.流程控制语句

9.数组

3.6JavaScript的Dom操作

1.Dom概述

2.Dom的api

3.7 事件机制

1.事件概述

2.事件和事件源绑定

3.8.BOM对象

1.BOM概述

2.Bom常见对象

3.常用api

3.9 常见的内置对象

1.Global全局对象

2.Math对象

3.JSON对象

4.定义类创建对象的方式

5.案例(省市二级联动)

4. html网页里面引入javascript

相关问题

公告

标签