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的相同之处

javascript和java的定义基本语法很相似.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入门案例

	
		
		
	
	
		
	

注意： 书写js代码时，一定一定加上

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

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

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

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

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

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

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

outer.js:

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

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

4.javscript的注释

和java的注释基本一样单行注释: //注释内容多行注释: var test1 = function(a,b){ var sum =a+b; return sum; } var return_data =test1(1,11); document.write(return_data)

6.动态函数

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

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();//颠倒数组元素的顺序，返回一个新的数组

普通数组:

动态数组:

3.6Javascript的Dom操作 1.Dom概述

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

​ 演示DOM操作过程：

2.Dom的api

2.1Dom操作标签（crud标签）

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

	
		
		
	
	
		密码：

		用户名：

		性别：男
		女

		
	

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

方法

点击我，去跳转
		
		点击我，去跳转
		

		

		
		
		
		
		

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代码
	* 事件和事件源绑定
	  方式一: 直接绑定,就是在标签里面写我们的事件
	                 比如: 
	  方式二: 间接绑定,就是通过我们的标签调用事件属性
	                 比如:
	             document.getElementById("b1").onclick=function(){}

获取文本:

	
		
		
	
	
		

		    我是一个小小鸟！！！
		
		
	

事件的绑定方法:

	
		
		
	
	
		普通按钮
		
	

双击事件:

	
		
		
	
	
		点击我到达内官网
		
	

内容切换事件1:

	
		
		
	
	
		
		
			选择省份
			海南省
			江苏省
			河北省
		
		
	

内容切换事件2:

	
		
		
		
	
	
	
		

			我们一起学习JAVA
		
	

3.7 事件机制 1.事件概述

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

2.事件和事件源绑定

1.直接绑定和间接绑定

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

	
	
		
				--请选择--
				河南
				江苏
				广东
		
		
				--请选择--
				
		
	

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全局对象

2.Math对象

3.JSON对象

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

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

	
		
		
	
	
		"text-align:center">
			
				请选择
				江苏省
				山东省
				河南省
			
			
				请选择
			
		
		
	

4. html网页里面引入javascript