Java开发|JavaWeb基础知识day03——javascript知识

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知识】

    推荐阅读