JavaWeb——JavaScript

最新推荐文章于 2024-06-25 10:47:04 发布

一个董憨憨

最新推荐文章于 2024-06-25 10:47:04 发布

阅读量161

点赞数

分类专栏： Java开发文章标签： javascript

本文链接：https://blog.csdn.net/qq_52534495/article/details/120608459

版权

Java开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

JavaWeb——JavaScript

1、JS和HTML的结合

<!--方式一：写在head中-->
<script type="text/javascript">
    alert("dcdnp")
</script>
<!--方式二：写在文件中-->
<script type="text/javascript" src="test.js">
    alert("dcdnp")
</script>

2、JS的语法

2.1、变量

变量类型

数值类型：number
字符串类型：String
对象类型：object
布尔类型：boolean
函数类型：function

特殊值

undefined：未定义的时候都是
null：空值
NAN：非数字

定义变量

var i;
i=12;

2.2、关系运算

比较关系

==//等于：简单的数字面值比较
===//全等于：除了上面的比较，还要比较数据类型

逻辑运算

//所有的数据都可以看成一个boolean类型的数据，0，null,NAN,undefined,""空串都是false
&&//且运算，当表达式全为真的时候，返回最后一个表达式的值，当有一个为假的时候，返回第一个为假的表达式的值
var a="abc";
var b=true;
var c=null;
var d=false;
alert(d&&c);
||//或运算，表达式全为假时，返回最后一个表达式的值，只要有一个为真，返回第一个为真的表达式
//&&和||有短路，就是有了结果之后后面的语句不再执行
|//取反运算，

2.3、数组

//赋值操作可以自动扩容
var a=[];
var a={null,false}

2.4、函数

//不允许函数重载，如果重载会覆盖
//
function fun(a,b){
    alert("这是函数"+a+b)
    return a+b
}
alert(fun(1,2))

var a=function (){
    alert("第二种方式")
}
a()

//隐形参数arguments，类似于可变形参
var a=function (){
    alert(arguments[0])
    alert(arguments[1])
    alert("第二种方式")
}
a(1,2)

2.5、对象类型

//第一种定义方式
var a=new Object();
a.name="dcd";
a.age=20;
a.fun=function (){
    alert("姓名："+this.name+"年龄："+a.age)//这两种写法都可以
}
a.fun()
//第二种定义
var b={
    name:"dcd",
    age:20,
    fun:function () {
        alert("姓名：" + this.name + "年龄：" + a.age)
    }
}
b.fun()

2.6、事件

常用事件

onload：页面加载完成后，常用于做页面js代码初始化操作
onclick：常用于按钮的点击响应
onblur：常用于输入框失去焦点后验证其输入的内容是否合法
onchange：用于下拉列表和输入框内容发生改变后的操作
onsubmit：表单提交前，验证所有表单项是否合法

事件的注册

就是告诉浏览器，但事件响应后要指向那些操作代码，叫事件注册或者事件绑定

//onload静态注册
//在js文件中写下
var a=function (){
    alert("这是onload事件触发的代码")
}
//在body中写下
<body onload="a()"><body/>

//动态注册：直接在js文件中写下
window.onload=function (){
    alert("这是动态的代码")
}

//onclick静态和动态注册
<script>
    var fun=function () {
        alert("你点击了按钮")
    }

    window.onload=function () {
        //1.获取标签对象
        var e=document.getElementById("btn1")
        //2.通过对象调用事件名
        e.onclick=function () {
            alert("这是按钮动态调用的")
        }
    }
</script>

<body>
    <button onclick="fun()">按钮1</button>
    <button id="btn1">按钮2</button>
</body>

window.onload说明
window表示当前的页面，所以该语句表示整个页面已经加载完成之后的效果。

DOM模型

Document Object Model模型：文档对象模型，就是把文档中的标签、属性、文本，转换成对象来管理。

在这里插入图片描述

2.7、正则表达式

<script>
		var patt=/^\w{5,12}$/
		var s="abd"
		if(patt.test(s)) alert("不包含e")
<script/>

在这里插入图片描述

综合应用，验证输入内容是否正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun=function () {
            var patt=/^\w{5,12}$/
            var usrname=document.getElementById("username")
            var uspan=document.getElementById("userNameSpan")
            var text=usrname.value
            if(patt.test(text)){
                uspan.innerHTML="用户名合法"
            }else{
                uspan.innerHTML="用户名不合法"
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="xxx">
    <span id="userNameSpan" style="color: red"></span>
    <button id="btn1" onclick="fun()">提交</button>
</body>
</html>

2.8、document三种查询对象方法

document.getElementById()：优先级最高，下面依次降低
document.getElementsByName()
document.getElementsByTagName()

2.9、节点常用的属性和方法

方法：
1、getElementByTagName：获取当前节点的指定标签名的孩子节点
2、appendChild：可以添加一个子节点
属性：
childNodes：获取当前节点的所有子节点
firstChild：获取当前节点的第一个子节点
lastChild：获取当前节点的最后一个子节点
parentNodes：获取当前节点的父节点
nextSibling：获取当前节点的下一个节点
previousSibling：获取当前节点的上一个节点
className：用于获取或设置标签的class属性值
innerHTML：获取标签和标签中的文字
innerText：只获取标签内的文字

<script>
    window.onload=function () {
        var divObj=document.createElement("div");
        var textObj=document.createTextNode("dcdnp");
        divObj.appendChild(textObj);
        document.body.appendChild(divObj)
    }
</script>

一个董憨憨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——JavaScript

JavaWeb——JavaScript1、JS和HTML的结合2、JS的语法2.1、变量2.2、关系运算2.3、数组2.4、函数2.5、对象类型1、JS和HTML的结合<script type="text/javascript"> alert("dcdnp")</script><script type="text/javascript" src="test.js"&g
复制链接

扫一扫