javascript 俗称 js
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,
内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言
组成部分:
ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
BOM:浏览器对象模型
DOM:文档对象模型
作用:
修改html页面的内容
修改html的样式
完成表单的验证
注意:
js可以在页面上直接写,也可以单独出去
js的文件的后缀名 .js
js和html整合
方式1:在页面上直接写
将js代码放在 标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入
js中变量声明:
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略
js的数据类型:
原始类型:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null,使用typeof弹出的值 object使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的 引用类型:
//
js:事件驱动函数
函数定义格式:
方式1:
function 函数名(参数){
函数体;
}
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候
函数名(参数)
js中的事件:
常见的事件:
单击:onclick
表单提交: onsubmit 加在form表单上的 onsubmit="return 函数名()"注意函数返回值为boolean类型
页面加载: onload
焦点事件:★
onfocus
onblur
表单事件:★
onsubmit
onchange 改变
页面加载事件:★
onload鼠标事件(掌握)
onclick
鼠标事件(了解)
ondblclick:双击
onmousedown:按下
onmouserup:弹起
onmousemove:移动
onmouserover:悬停
onmouserout:移出
键盘事件(理解)
onkeydown:按下
onkeyup:弹起
onkeypress:按住js事件和函数的绑定:
方式1:
通过标签的事件属性
js获取元素:
方式1:
var obj=documnet.getElementById("id值");
获取元素的value值
obj.value;
获取元素的标签体中的内容
obj.innerHTML;
函数的定义:
方式1:
function 函数名(参数){
函数体;
}
方式2:
var 函数名=function(参数){
函数体;
}js事件和函数的绑定:
方式1:
通过标签的事件属性
方式2:
给元素派发事件
document.getElementById("id值").onclick=function(参数){....}
document.getElementById("id值").onclick=函数名
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码onload事件.bom中window对象的定时器方法
定时器:
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
clearInterval(id);
claerTimeout(id);
String对象
原始类型的String是一个为对象可以直接调用String类对象的方法
substring(0,endIndex);
补充:
运算符:
比较运算符: > >= < <=
若两边都是数字 和java一样
若一般为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较3>"2"
若一般为数字,另一边为字符串,返回一个false3>"hello"
两边都是字符串的时候,比较ascii
等性运算符 == ===
== :只判断值是否相同
===:不仅判断是否相同,还要判断类型是否相同
语句:
if语句 和java一样
for while 语句和java一样
switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)
/总结:掌握
1.css和html整合
方式3种
2.css中选择器:
id class 元素
属性 后代
3.js
js和html整合
方式两种
4.变量定义
5.函数定义
2中格式
6.事件
onclick onload onsubmit
7.事件和函数的绑定
2中方式
8.定时器 2种
9.for while if
bom(浏览器对象模型)总结
所有的浏览器都有5个对象
window:窗口
location:定位信息 (地址栏)
history:历史
window对象详解:
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,
并为每个框架创建一个额外的 window 对象。
常用的属性:
通过window可以获取其他的四个对象
window.location 等价域 location
window.history 等价于 history
...
常用的方法
消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容
定时器
设置定时器
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.例如:
setInterval(showAd,4000);
serInterval("showAd()",4000);
清除定时器
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url):打开
close():关闭
location:定位信息
常用属性:
href:获取或者设置当前页面的url(定位信息)location.href;
获取url
location.href="https://www.it610.com/article/...";
设置url 相当于 a标签
history:历史
back();
后退
forward():向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()
dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
设置获取获取节点的value属性
dom对象.value;
获取
dom对象.value="";
设置
设置或者获取节点的标签体
dom对象.innerHTML;
获取
dom对象.innerHTML="";
设置
获取或者设置style属性
dom对象.style.属性;
获取
dom对象.style.属性="";
设置
获取或者设置属性
dom对象.属性
/
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom
关于文档的操作 在 xml dom 的document中
关于元素的操作 在 xml dom 的element中
appendChild(dom对象):在一个元素下添加孩子
数组:
语法:
new Array();
//长度为0
new Array(size);
//指定长度的
new Array(e1,e2..);
//指定元素
非官方
var arr4=["aa","bb"];
常用属性:
length
注意:
数组是可变的
数组可以存放任意值
常用方法:(了解)
存放值:对内容的操作
pop():弹 最后一个
push():插入 到最后shift():删除第一个
unshift():插入到首位
打印数组:
join(分隔符):将数组里的元素按照指定的分隔符打印
拼接数组:
concat():连接两个或更多的数组,并返回结果。
对结构的操作:
sort();
排序
reverse();
反转
引用类型总结:
原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
Array:数组
String:
语法:
new String(值|变量);
//返回一个对象
String(值|变量);
//返回原始类型
常用方法:
substring(start,end):[start,end)
substr(start,size):从索引为指定的值开始向后截取几个charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引replace():替换
split():切割常用属性:length
Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
非0数字 非空字符串 非空对象 转成true
Number
语法:
new Number(值|变量);
Number(值|变量);
注意:null====>0
fale====>0 true====>1
字符串的数字=====>对应的数字
其他的NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正则表达式
语法:
直接量语法/正则表达式/参数
直接量语法/正则表达式/new RegExp("正则表达式")
new RegExp("正则表达式","参数")
参数:
i:忽略大小写
g:全局
常用方法:
test() :返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random()[0,1) 全局:
★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。Number():强制转换成数字
String():转成字符串parseInt():尝试转换成整数
parseFloat():尝试转换成小数eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。
【Java开发|JavaWeb基础知识day03——javascript知识】
推荐阅读
- javaweb|基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统
- JavaWeb|JavaWeb学习——CSS
- JavaWeb|JavaWeb学习——用户注册(14)
- 验证码 注意一点存session时
- Spring Boot 版本升级到2
- html模仿淘宝按钮
- 获取客户端IP地址
- javaWeb中使用Excel模板导出业务数据(包含复杂单元格动态合并操作)+附源码
- java开发|Axon框架深入使用的一点经验
- Tomcat服务器映射图片,文件地址