JavaWeb技术:JavaScript

2021/10/4 14:12:57

本文主要是介绍JavaWeb技术:JavaScript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

基本概念

ECMAScript

基本语法

与html结合的方式

注释

数据类型

变量

运算符

类型转换

流程控制语句

基本对象

Function:函数对象

Array:数组对象

Date:日期对象

Math:数学对象

Global

RegExp:正则表达式对象

BOM:浏览器对象模型

Window:窗口对象

弹框有关的方法

与打开关闭有关的方法

与定时器有关的方式

属性

Location:地址栏对象

创建

方法

属性

History:历史记录对象

创建

方法

属性

DOM:文档对象模型

核心DOM模型

Document:文档对象

Element:元素对象

Node:节点对象

HTML DOM

事件监听机制

常见的事件


JS:控制页面的元素,让页面有一些动态的效果

基本概念

  • JavaScript是一门客户端脚本语言
  • 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
  • 脚本语言:不需要编译,直接就可以被浏览器解析执行了
  • 它可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
  • JavaScript = ECMAScript(客户端脚本语言的标准) + JavaScript自己特有的东西(BOM+DOM)

ECMAScript

基本语法

与html结合的方式

内部JS

定义<script>,标签体内容就是js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
</head>
<body>
<script>
    alert(1)
</script>
</body>
</html>

外部JS

定义<script>,通过src属性引入外部的js文件

//js文件
alert(2)
//html文件
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <script src="../js/b.js"></script>
</head>

注意:script的定义位置会影响执行顺序  一般导入文件放在<head>里 ;写代码放在<body>的最后

注释

单行注释://注释内容

多行注释:/*注释内容*/

数据类型

1. 原始数据类型(基本数据类型):
                    1. number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
                    2. string:字符串。 字符串  "abc" "a" 'abc'
                    3. boolean: true和false
                    4. null:一个对象为空的占位符
                    5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
                    
  2. 引用数据类型:对象

变量

变量:一小块存储数据的内存空间

JS是弱类型语言,在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。 语法:var 变量名 = 初始化值

typeof运算符:获取变量类型

注:null运算后得到的是object

运算符

  • 一元运算符:++、--、+(-)正负号
  • 算数运算符:+、-、*、/、%...
  • 赋值运算符:=、+=、-=...
  • 比较运算符:>、<、>=、<=、==、===(全等于)

        ==:类型相同直接比较,类型不同先进行转换再比较

        ===:类型不同直接返回false

  • 逻辑运算符:&&、||、!
  • 三元运算符:? : 表达式

类型转换

其他类型转number

  • string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
  • boolean转number:true转为1,false转为0

其他类型转boolean

  • number:0或NaN为假,其他为真
  • string:除了空字符串(""),其他都是true
  • null&undefined:都是false
  • 对象:所有对象都为true

流程控制语句

if...else...

while

do...while

for

switch:switch语句可以接受任意的原始数据类型

基本对象

Function:函数对象

创建(2种)

<script>
    // 方法一
    function fun1(a,b) {
        document.write(a+b+"<br/>");
    }
    fun1(1,2);
    // 方法二
    var fun2=function (a,b) {
        document.write(a-b+"<br/>")
    }
    fun2(2,1);
</script>

属性

  • length:代表形参的个数

特点

  • 方法定义是,形参的类型不用写,返回值类型也不写
  • 方法是一个对象,如果定义名称相同的方法,会覆盖
  • 在JS中,方法的调用只与方法的名称有关,和参数列表无关
  • 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数

Array:数组对象

类似于Java的集合

创建

  • var arr = new Array(元素列表);  简写:var arr = [元素列表];
  • var arr = new Array(默认长度);
  • var arr = new Array();

方法

  • join(参数):将数组中的元素按照指定的分隔符拼接为字符串
  • push()    向数组的末尾添加一个或更多元素,并返回新的长度。

属性

  • length:数组的长度

特点

  • JS中,数组元素的类型可变的
  • JS中,数组长度可变的。

Date:日期对象

创建

  • var date = new Date();

方法

  • toLocaleString():返回当前date对象对应的时间本地字符串格式
  • getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math:数学对象

不用创建对象,静态方法,直接使用。Math.方法名();

方法

  • random():返回 0 ~ 1 之间的随机数。 含0不含1
  • ceil(x):对数进行上舍入。
  • floor(x):对数进行下舍入。
  • round(x):把数四舍五入为最接近的整数。

属性

  • PI:圆周率

Global

主要用于中文字符的编码和解码,因为在网络传输中不能直接使用中文字符

特点:全局对象,该对象的方法不需要创建对象就可以直接调用。方法名();

方法:

  • encodeURI():url编码
  • decodeURI():url解码
  • encodeURIComponent():url编码,编码的字符更多
  • decodeURIComponent():url解码
  • parseInt():将字符串转为数字
    • 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
  • isNaN():判断一个值是否是NaN,判断数字是否为NaN
    • NaN六亲不认,连自己都不认。NaN参与的==比较全部问false
  • eval():将JavaScript 字符串,并把它作为脚本代码来执行。
eval("alert(1)");

RegExp:正则表达式对象

创建

var reg = new RegExp("正则表达式");

var reg = /正则表达式/;

方法

test(参数):验证指定的字符串是否符合正则定义的规范    

BOM:浏览器对象模型

Window:窗口对象

不需要创建对象直接使用方法名和属性

弹框有关的方法

  •  alert()    显示带有一段消息和一个确认按钮的警告框
  • confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
    • 如果用户点击确定按钮,则方法返回true
    • 如果用户点击取消按钮,则方法返回false
  •  prompt()    显示可提示用户输入的对话框。
    • 返回值:获取用户输入的值

与打开关闭有关的方法

  • close()    关闭浏览器窗口 (谁调用我 ,我关谁)
  • open()    打开一个新的浏览器窗口 ,返回新的window对象

与定时器有关的方式

  • setTimeout()    在指定的毫秒数后调用函数或计算表达式。
    • 参数1,方法对象
    • 参数2,毫秒值
    • 返回值:唯一标识,用于取消定时器
  •  clearTimeout()    取消定时器
  •  setInterval()    按照指定的周期(以毫秒计)来调用函数或计算表达式
  •  clearInterval()    取消由 setInterval() 设置的 timeout。

属性

获取其他的BOM对象

  • history
  • location
  • Navigator
  • Screen

获取DOM对象

  • document

示例代码:计时器

<body>
<p id="pid"></p>
<button id="bt">暂停</button>
<script>
    var num=1;
    function fun() {
        document.getElementById("pid").innerText=num+"";
        num++;
    }
    let interval = setInterval(fun,1000);
    document.getElementById("bt").onclick=function () {
       clearInterval(interval);//将循环计时器暂停
    }
</script>
</body>

Location:地址栏对象

创建

  • window.location
  • location

方法

  • reload()    重新加载当前文档。刷新

属性

  • href    设置或返回完整的 URL

示例代码:倒计时跳转至指定页面

<body>
<span id="sid">5</span>秒之后,跳转到首页
<script>
    var num=5;
    function fun() {
        num--;
        if(num<=0){//判断不要写成num===0,因为网络有延时
            location.href="http://www.baidu.com";
        }
        document.getElementById("sid").innerText=num+"";
    }
    setInterval(fun,1000);
</script>

</body>

History:历史记录对象

创建

  • window.history
  • history

方法

  • back()    加载 history 列表中的前一个 URL
  • forward()    加载 history 列表中的下一个 URL
  • go(参数)    加载 history 列表中的某个具体页面
    • 参数: 正数:前进几个历史记录;负数:后退几个历史记录

属性

  • length    返回当前窗口历史列表中的 URL 数量

示例代码:

页面跳转至下一个页面,通过“后退”返回至上一个页面;在上一个页面,通过“前进”返回下一个页面。

<!--第一个页面-->
<body>
<a href="c_3.html">链接</a><br/>
<button id="bt1">前进</button>
<script>
    document.getElementById("bt1").onclick=function () {
        history.go(1);
    }
</script>
</body>

<!--第二个页面-->
<body>
<button id="bt2">后退</button>
<script>
    document.getElementById("bt2").onclick=function () {
        history.go(-1);
    }
</script>
</body>

DOM:文档对象模型

将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作,一个html文档可以转换成DOM树

 

核心DOM模型

Document:文档对象

 创建(获取):

  • window.document
  • document

方法

获取Element对象

  • getElementById()    : 根据id属性值获取元素对象。id属性值一般唯一
  • getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
  • getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
  • getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

创建其他DOM对象

  • createAttribute(name)
  • createComment()
  • createElement()
  • createTextNode()

Element:元素对象

创建

  • 通过document来获取和创建

方法

  • removeAttribute():删除属性
  • setAttribute():设置属性

Node:节点对象

所有dom对象都可以被认为是一个节点 ,节点可以是元素节点、属性节点、文本节点等等

主要进行节点的增删操作

方法:

  • appendChild():向节点的子节点列表的结尾添加新的子节点
  • removeChild()    :删除(并返回)当前节点的指定子节点
  • replaceChild():用新节点替换一个子节点

属性

  • parentNode 返回节点的父节点。

示例代码:动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        th,td{
            width: 80px;
            height: 30px;
        }
    </style>
</head>
<body>
<input type="text" placeholder="输入用户名" id="username">
<input type="text" placeholder="年龄" id="uage">
<button id="bt_1">添加</button>
<br/>
<table border="1px" cellpadding="2px" cellspacing="1px" id="table">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>

</table>
<script>
    //删除方法
    function del(obj){
        //通过追溯父元素的方法 获得table、tr
        var table=obj.parentNode.parentNode.parentNode;
        var tr=obj.parentNode.parentNode;
        table.removeChild(tr);
    }
    document.getElementById("bt_1").onclick=function () {
        let name = document.getElementById("username").value;
        let age = document.getElementById("uage").value;
        //td_name
        let td_name = document.createElement("td");
        let text_name = document.createTextNode(name);//文本节点
        td_name.appendChild(text_name);
        //td_age
        let td_age = document.createElement("td");
        let text_age = document.createTextNode(age);
        td_age.appendChild(text_age);
        //td_made
        let td_made = document.createElement("td");
        let td_a = document.createElement("a");
        td_a.setAttribute("hrep","javascript:void(0);");
        td_a.setAttribute("onclick","del(this) ");
        let text = document.createTextNode("删除");
        td_a.appendChild(text);
        td_made.appendChild(td_a);
        //tr
        let tr = document.createElement("tr");
        tr.appendChild(td_name);
        tr.appendChild(td_age);
        tr.appendChild(td_made);
        //table
        let table = document.getElementById("table");
        table.appendChild(tr)
    }
</script>
</body>
</html>

HTML DOM


标签体的设置和获取:innerHTML

控制元素样式

  •  使用元素的style属性来设置:div1.style.width = "200px";
  • 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值:div1.className="div_1";

事件监听机制

某些组件被执行了某些操作后,触发某些代码的执行

  • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
  • 事件源:组件。如: 按钮 文本输入框...
  • 监听器:代码
  • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码

常见的事件

  • 点击事件
    • onclick:单击事件
    • ondblclick:双击事件
  • 焦点事件
    • onblur:失去焦点
    • onfocus:元素获得焦点
  • 加载事件
    • onload:一张页面或一幅图像完成加载
  • 鼠标事件
    • onmousedown    鼠标按钮被按下
    • onmouseup    鼠标按键被松开
    • onmousemove    鼠标被移动
    • onmouseover    鼠标移到某元素之上
    • onmouseout    鼠标从某元素移开
  • 键盘事件
    • onkeydown    某个键盘按键被按下。    
    • onkeyup        某个键盘按键被松开。
    • onkeypress    某个键盘按键被按下并松开。
  • 选择和改变
    • onchange    域的内容被改变。
    • onselect    文本被选中。
  • 表单事件
    • onsubmit    确认按钮被点击。
    • onreset    重置按钮被点击。



这篇关于JavaWeb技术:JavaScript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程