JavaScript技术（js）
一、简介：
1.js：基于浏览器的，解释型，面向对象的编程语言
1）编译型语言：—C C++ 运行效率高，不能跨平台
2）解释型语言：—HTML js 运行效率低，可以跨平台
3）先编译后解释-----java C# 运行效率较高，可以跨平台
2.作用：用来嵌入到HTML页面里面，为”网页“添加动画效果
1）HTML+css—静态网页（里面的数据不会改变）
2）servlet+JSP—动态网页（在网页中嵌入java代码改变数据）
3）js—添加动画效果（按钮功能的添加，表单数据的验证），在网页刷新后，所有的动画效果会消失。
二、第一个JavaScript程序
1.嵌入方式：
<html>
<head>
<style type="text/css">...</style>
<script type="text/javascript">
js代码
</script>
</head>
<body>
</body>
</html>
2.Js中的输出;
//第一种方式;-----将内容输出到浏览器窗口
document.write("HelloWorld");
//第二种方式：-----将内容以警告框的形式在浏览器中输出
window.alert("HelloWorld");--->可以简写为 alert("HelloWorld")
//如果函数或者属性是window对象的，则在调用的时候可以省略widow，直接写函数名
//第三种方式：-----将内容打印到输出到浏览器的控制台
console.info("HelloWorld");----->//相当于java里的System.out.println();
三、js语法
1)js是一种弱数据型语言（只有值有类型，变量没有类型）
var a = 3;
var b =“hehe”;
2）js里变量的定义
1、变量可以多次重复声明定义赋值，值以最后一次有值得赋值为准
2、没有块作用域的概念
java---> if(true){int a = 3;}
System.out.println(a); -----error;
js ---> if(true){var a = 3;}
alert(a); ------right;
3)只有定义在函数里，并且用var关键字声明的变量，才叫“局部变量”，只在函数内有效
4）没有用var声明的变量一定是”全局变量“，到处可见，以最后一次赋值为准
四、数据类型
1基本数据类型
数字类型—不分小数和整数
字符串类型-- 不分字符和字符串，用单引号或者双引号声明定义 “hehe”
布尔类型— true|false 非0 | 0(false) 非空 | null(false)
2 特殊的数据类型
null underfined
3 复合数据类型：数组 日期 对象 函数类型
五、数学运算符
1.数学运算符： + - * / %
注意：只要能计算出结果，js就会自动做出类型切换算出结果。
2. 判断相等性： == ===
== 比较值是否相等
var a=3; var b=“3”; alert(a==b);----->true
=== 比较值和类型是否完全相同
var a=3; var b =“3”; alert(a===b) —> false
3.typeof 判断变量的类型
if(typeof(“helloword”)==“string”)------->true
4.流程控制
//流程控制---与java一致
if(){}
if(){}else(){}
for(var i=0;i<10;i++){}
while(){}
do{}while{}
5.js中的条件判断
| 布尔值 | true | false |
|---|---|---|
| 数字 | 非0 | 0 |
| 字符串 | 字符串长度大于0 | ‘’ 或者“”（空字符串） |
| 特殊值 | null、undefined、NaN |
六、自定义函数
在js里函数也被认作是一种**数据类型**，一个函数也可以被理解为“一个函数类型的值”，函数名就是保存这个值的变量
定义函数
1）使用关键字function定义
Java --- 修饰符 返回值类型 函数名(形参类型 形参名, .......) { }
public int add(int a,int b){ return a+b; }
Js ---- function 函数名( a, b ){ ..... }
function add(a,b) { return a+b; }
function add()return a+b}
*注意：使用与java一致 *函数名*(实参);
2）隐式声明函数 --- 将函数看做是一个值
语法： var 函数名 = function(形参){ 函数体 } ；
使用： 函数名(实参);
案例： var fun1 = function(){ return “hello”; } ;
3）保存函数类型数据的变量之间可以互相赋值
var fun1 = function(){ return “hello”; }
// 将fun1里保存的“函数类型值”赋值给fun2，赋值成功后，fun2里存也是“函数类型值”
Var fun2 = fun1 ;
//调用fun1函数，将fun1函数的返回值赋值给fun3变量，成功后fun3里存放的是String类型值
Var fun3 = fun1();
函数注意：
1、js代码中没有方法重载的概念，调用函数的时候可以传入多于或者少于形参数量的实参。
2、所有的实参都被默认保存在“arguments”数组中
3、函数里可以定义其他函数（函数的参数可以是另一个函数），称为“内联函数”
七、js里面的对象
/*
1.Js里只有对象，没有类，任意两个对象都不相同。
2.创建对象
语法： var 对象 = {属性名：属性值 ，属性名：属性值，..........} ;
对象.新属性 = 值 ；（可以随时添加新的属性）
3.访问对象
1）访问具体某一个属性值 --- 对象.属性名 或者 对象[“属性名”]
2）遍历对象属性 ： for...in语法
for( 变量 in 对象 ){
// 循环每执行一次，会提取对象的一个“属性名”赋值给变量
对象[变量]
}
*/
//对象类型
// 1.定义
var 对象={属性名：值，属性名：值，......}
// 2.属性的访问（获取属性值，修改属性 添加属性）
对象名.属性 对象名["属性名"]
八、数组
1、特点js里的数组长度不固定，可以任意扩展：数据可以是任意类型的。
2、创建：var 数组名=[元素1，元素2…]
创建好以后可以任意扩展，添加任意元素。
3、访问：
1一个元素通过下标访问，从0 开始-----arr1[3]
2 遍历（与java一样，可以用for循环遍历）
for(var i = 0; i<arr1.length; i++){ arr1[i]}
4、数组的常见函数
数组对象.sort()------->对数组的元素按照顺序升序排列
数组对象.push()------->在数组的末尾插入一个元素
数组对象.pop()------->删除数组的末尾的最后一个元素，且数组长度减一
delete 数组对象[下标]------->删除指定位置的元素，且数组长度不变
九、js中常见的内置对象
1、字符串类型
var str=“hehe”;
var str2=new String(“hehe”);
注意：获取字符串的长度是length属性，不是length函数
2、Math:相当于java里的工具类，里面的函数相当于java里的静态函数，可以用Math直接调用
var ran = Math.random();
var min = Math.min(1,2,3,4);
var max = Math.max(90,43);
3、日期类型
//1.日期类型
var d1 = new Date(); ------>得到当前浏览器的时间对象
var d2 = new Date(1992-04-01);------>创建一个指定日期的date对象
//常见的函数：
getFullYear() ----->获得四位的年
getMonth() ----->获得日期对象里的月（0—11）
十、事件
1.js代码靠事件触发运行，当网页中的标签产生浏览器能够捕获的特定事件时，触发js代码运行
1）事件模型的三要素
事件源：发生动作的事物（对象），通常为HTML页面元素
事件：发生动作（如：单击，双击）
监听器：动作发生后的处理 通常在函数中定义处理程序
2）为HTML标签注册事件的方式
<标签名 属性=“” 事件名称=“监听器”>
例如：<input type=“button” οnclick=函数名（参数列表） 例子>
监听事件模型：
监听器 listener
事件源 source
事件对象 event
当事件源产生特定的事件对象时，会触发监听器的代码自动运行
js监听器
xxxxxxxxxxx监听器代码
监听文本框 事件源
失去焦点 事件（就开始做检查）
反应代码-----监听器代码
按钮 --------事件源
点击 -------单击事件
onclick: 单击事件
2、常见的事件名称
1）鼠标相关
onclick 单击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
ondblclick 双击事件
onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标松开
2）键盘相关
onKeyDown 按键按下
onKeyUp 按键抬起
3）body相关事件
onload 页面加载完毕后出发
onUnload 窗口离开时触发（刷新，返回，前进，主页…）
onscrool 页面滚动
onresize 缩放页面
4）form表单控件相关事件
onblur 当前元素失去焦点 <input标签>
onchange 当前元素失去焦点并且值改变时 <input标签>(监听value属性值得修改)<select标签>
onfocus 当前元素获得焦点时 <input标签>
onsubmit 表单提交时（验证表单数据是否格式正确）
3、注意事项
1）内部元素产生的事件，会默认扩散到外部的容器中
取消事件冒泡 — event.cancelBubble = true ;
Event — 事件对象， event.clientX event.clientY (获取事件产生点的纵坐标)
2）通过为标签添加事件监听还可以修改标签的默认行为
<html>
<head>
<script>
function fun(){
if(true) return false;
}
</script>
</head>
<body>
<h1>
<a href="xxxx" onclick="return fun()">点击跳转</a>
</h1>
</body>
</html>
十一、DOM编程
1、documen object model 文档对象模型
1）DOM：
一种解析标记语言文档的技术。浏览器会将整个文档加载进内存，将文档
封装成一棵“文档树”，文档里的所有标签都被封装成“标签对象”，成
为这棵树上的一个节点 （Element–标签 ， node – 文本）
2）document：代表整个文档（特指body部分）
3） window：代表整个浏览器窗口，document是window的一部分（属性）
作用：
可以通过dom提供的api获取文档中的标签对象，进而修改其属性或者样
式，达到添加动画效果的目的 。父标签对象对子标签对象拥有所有的操
作权限（增删改查）
2、DOM提供的API—获取标签的api
1)根据标签的id属性值获取标签对象
var tag = documnet.getElementById(id属性值)；
2）根据标签名获取标签对象
var tags = document.getElementsByTagName(“标签名”);
3）根据标签的name属性获取标签对象
var tag=document.getElementsByNmae(“标签的name属性值”);
----通常只有form标签里的元素会有name属性
4）根据标签的显示风格名获取标签对象
var tag=document.getElementsByClassName(“标签的class属性值”)
3、可以通过修改属性和样式添加动画效果
1）获取属性值------ var value=标签对象.属性名
2）设置属性值------ 标签对象.属性名=值
3）设置样式------标签.style.css样式=值
h1.style.color=“red”
h1.style.backgroundColor=“blue”
5)设置一种风格------标签.className=“class样式值”
4、DOM里的常见属性
1）innerHTML：为标签设置标签体里的内容
2）this：代表当前产生事件的标签对象
5、处理下拉列表的常见属性
1）下拉列表一般使用的是onchange事件
2）options — 值为数组类型，表示获取下拉列表里的所有option选项
3）selectedIndex — 值为数字类型，表示下拉列表里被选中的option的下标
4）清空下拉列表 — select.options.length=0;
5) 向下拉列表里添加一个option选项
创建一个option对象 ： var op = new Option(text,value);
添加到select里 ： select.options[下标] = op；
6、从网页中删除标签
1）需要通过父标签对象删除子标签对象：parentTag.removeChild( 子标签对象 );
2）对表格进行js处理时，主要针对的是tbody标签，不是table；
3）标签对象的一组相关关系属性：
tag.parentNode ----> 获取当前标签的父标签对象
tag.childNodes -----> 获取当前标签对象的所有孩子节点（标签和文本）
tag.firstChild -----> 第一个孩子节点
tag.lastChild -------> 最后一个孩子
tag.nextSibling -----> 当前标签对象的同级下一个标签（“弟弟”）
tag.previousSibling ----> 当前标签对象的同级上一个标签（“哥哥”）
注意：js存在浏览器差异，google浏览器会默认将标签间的空格也算作孩子节点
4）删除的辅助功能
var ba = window.confirm(“提示文字”);
— 方法返回boolean值，表示对话框里的选择（确认–true 取消–false）
7、向网页中添加标签
1）产生一个新的标签
var element = document.createElement(“标签名”);
例如：<h1（例子）>hehehe
var h1 = document.createElement(“h1”);
h1.innerHTML = “hehehe”;
2) 向网页里添加新建的标签
I. parentTag.appendChild( 新标签 ); // 将新标签添加到父标签的最后面
II. parentTag.insertBefore(新标签，旧标签); //将新标签添加到旧标签前
III. parentTag.replaceChild(新标签，旧标签); //用新标签替换指定的旧标签
十二、BOM编程—browser object model 浏览器对象模型
1.bom—一组与浏览器相关的内置对象以及他们的函数和属性（window）
2.window的常用功能（使用window的函数时，可以省略window）
1）对话框
警告框—window.alert（…）；
确认框—var ba=window.confirm(…);
提示输入框—var str=window.prompt("…");
2)定时器
var id=window.setTimeout(fun,time); ------在time毫秒后，执行一次fun函数
window.clearTimeout(id); ----移除定时器
var id=window.setInterval(fun,time); ------周期定时器，每隔time毫秒，执行一次fun函数
window.clearInterval(id); ------移除周期定时器
3）location–window的一个属性，而location有一个href属性，用来在JS代码里向其他资源跳转（类似于超链接）
location.href=“url”;
4)history—是window的一个属性
history.back()----退回到上一个浏览器网页
history.forward()----前进
history.go(num)-----num为负数则表示退后，num为正数则是前进，num为0表示刷新
5）open(“url”)----打开一个新的窗口，并在窗口里显示url指定的资源。函数有返回值为当前打开的新窗口对象
var w = window.open(“url”);
十三、重构代码
1.网页中的事件处理
1）标签式事件处理
<标签名 οnclick=”js代码或者函数”>
编程式事件处理
2）编程式事件处理
十四、定义js文件
可以将js代码单独定义在一个以.js为结尾的文件中，在网页里需要使用时通过<script标签>引入
<head>
<link real="stylesheet" type="text/css" href="css文件路径"/>
<style type="text/css">........</style>
<script type="text/javascript" src="单独的js文件路径"></script>
<script type="text/javascript">
自己的代码
</script>
</head>
并在窗口里显示url指定的资源。函数有返回值为当前打开的新窗口对象
var w = window.open(“url”);
十三、重构代码
1.网页中的事件处理
1）标签式事件处理
<标签名 οnclick=”js代码或者函数”>
编程式事件处理
2）编程式事件处理
[外链图片转存中…(img-jzYVWROK-1576755139129)]
十四、定义js文件
可以将js代码单独定义在一个以.js为结尾的文件中，在网页里需要使用时通过<script标签>引入
<head>
<link real="stylesheet" type="text/css" href="css文件路径"/>
<style type="text/css">........</style>
<script type="text/javascript" src="单独的js文件路径"></script>
<script type="text/javascript">
自己的代码
</script>
</head>
扫一扫
1290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
