Javascript基础

最新推荐文章于 2024-05-28 00:30:00 发布
最新推荐文章于 2024-05-28 00:30:00 发布
阅读量652 收藏
点赞数
分类专栏： Javaweb 文章标签： javascript js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shyshyshyshy1/article/details/118582629
版权

1、Javascript

1.1 js与html结合

（1）第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    在head或者body标签中使用一个script标签-->
    <script type="text/javascript">
        alert('Hello!');
    </script>
</head>
<body>
    <script type="text/javascript">
        alert('hello!');
    </script>
</body>
</html>

（2）第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    将js代码写到一个js文件中通过script标签引用，不能同时用两种方法。-->
    <script type="text/javascript" src="../js/js01.js">
    </script>
</head>
<body>
</body>
</html>

1.2 js的变量类型

数值类型：number；
字符类型：string；
对象类型：object；
布尔类型：bool；
函数类型：function；

1.3 js里的特殊的值

undefined：所有js变量没有赋初值时，默认值都是undefined；
null：空值；
NAN：not a number，非数值和非数字。

1.4 js里定义变量的格式

var 变量名；
var 变量名 = 值。

1.5 js提供的一些函数

typeof（变量）可以取变量的数据类型返回；

1.6 js里的关系运算

==是简单的做字面值的比较；
===是除了做字面值的比较还要比较数据类型。

1.7 js里的逻辑运算

（1）且运算：&&当表达式的值全为真的时候，返回最后一个表达式的值。当表达式中有一个为假的时候，返回第一个为假的表达式的值；
（2）或运算：||当表达式的值全为假的时候，返回最后一个表达式的值。当表达式中有一个为真的时候，返回第一个为真的表达式的值；
（3）且运算和或运算都有短路，即且运算中如果左边的表达式的值为false就不会继续计算后面的表达式的值，直接返回false；而或运算中如果左边表达式的值为true就回直接返回true。
（4）取反运算：！；
（5）JavaScript中所有的变量都可以作为一个boolean类型的变量去使用，其中0，null，undefined，""（空串），都认为是false，其他的都为true。

1.8 js里的数组

（1）定义：
var 数组名 = []（空数组）；
var 数组名 = [元素]；
（2）js里的数组只要赋了值，就能自动扩容，前面没有扩容的元素的值为undefined；

1.9 js里的函数

（1）定义：
第一种：使用function关键字定义函数：
function函数名（形参列表）{函数体}；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun1() {
            alert('hello!');
        }
        function fun2(a, b) {
            return a+b;
        }
        fun1();
        alert(fun2(1, 2));
    </script>
</head>
<body>

</body>
</html>

第二种：
var 函数名 = function（形参列表）{函数体}；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun1 = function() {
            alert('hello!');
        }
        var fun2 = function(a, b) {
            return a+b;
        }
        fun1();
        alert(fun2(1, 2));
    </script>
</head>
<body>

</body>
</html>

（2）js中函数不允许重载，如果重载会直接覆盖掉上一次的定义。
（3）隐形参数argument，即在function函数中不需要定义就可以直接获取所有参数的变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun() {
            alert(arguments)
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);
            alert(arguments[3]);
        }
        fun(1,2,3);
    </script>
</head>
<body>

</body>
</html>

1.10 js里的字定义对象

（1）定义：
第一种形式：
var 变量名 = new Object（）；
变量名.属性名 = 值；
变量名.函数名 = function（）{}；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var user = new Object();
        user.name = "Xuan";
        user.age = 19;
        user.getAge = function () {
            alert(this.age);
        }
        alert(user.name);
        user.getAge();
    </script>
</head>
<body>

</body>
</html>

第二种形式：
var 变量名 = {
属性名：值；
函数名：function（）{}；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var user = {
            name:"Xuan",
            age:19,
            getAge:function () {
                alert(this.age);
            }
        }
        alert(user.name);
        user.getAge();
    </script>
</head>
<body>

</body>
</html>

（2）访问：
变量名.属性；
变量名.函数名（）；

1.11 js里的事件

事件的注册（绑定）：
（1）静态注册：通过html标签的事件属性直接赋于事件响应后的代码；
（2）动态注册：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function（）{}这种形式赋于事件响应后的代码。

1.11.1 onload事件

页面加载完之后自动触发的一些操作。
静态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onloadFun() {
            alert('静态注册onload！');
        }
    </script>
</head>
<body onload="onloadFun();">

</body>
</html>

动态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            alert('动态注册onload!');
        }
    </script>
</head>
<body>

</body>
</html>

1.11.2 onclick事件

常用于按钮的点击响应。
静态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert('静态注册onclick！');
        }
    </script>
</head>
<body>
    <button onclick="onclickFun()">click me!</button>
</body>
</html>

动态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var bt01 = document.getElementById("bt01");
            bt01.onclick = function () {
                alert('动态注册onclick!');
            }
        }
    </script>
</head>
<body>
    <button id="bt01">click me!</button>
</body>
</html>

1.11.3 onblur事件

常用于输入框失去焦点后验证其输入内容是否合法。
静态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onblurFun() {
            input01.value = input01.value.toUpperCase();
        }
    </script>
</head>
<body>
<input type="text" onblur="onblurFun()">
</body>
</html>

动态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var input01 = document.getElementById("input01");
            input01.onblur = function () {
                input01.value = input01.value.toUpperCase();
            }
        }
    </script>
</head>
<body>
<input type="text" id="input01" value="onblur">
</body>
</html>

1.11.4 onchange事件

常用于下拉列表和输入框内容发生改变后操作。
静态绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert('your hero is changed!');
        }
    </script>
</head>
<body>
select your hero!
<select onchange="onchangeFun()">
    <option>亚索</option>
    <option>刀妹</option>
    <option>剑姬</option>
    <option>锐雯</option>
</select>
</body>
</html>

动态绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var hero = document.getElementById("hero");
            hero.onchange = function () {
                alert('your hero is changed!');
            }
        }
    </script>
</head>
<body>
select your hero!
<select id="hero">
    <option>亚索</option>
    <option>刀妹</option>
    <option>剑姬</option>
    <option>锐雯</option>
</select>
</body>
</html>

1.11.5 onsubmit事件

常用于验证表单项是否合法，return false可以阻止表单提交。
静态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitFun() {
            alert('静态注册onsubmit不合法!');
            return false;
        }
    </script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册">
</form>
</body>
</html>

动态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var sub = document.getElementById("sub01");
            sub.onsubmit = function () {
                alert('动态注册onsubmit不合法!');
                return false;
            }
        }
    </script>
</head>
<body>
<form action="http://localhost:8080" method="get" id="sub01">
    <input type="submit" value="静态注册">
</form>
</body>
</html>

1.12 js里的document对象

（1）把文档中的标签、属性、文本转换为对象来管理，管理了所有的html文档内容；
（2）是一种树结构的文档，有层级关系；
（3）把所有的标签都对象化；
（4）可以通过document访问所有的标签对象。

1.12.1 getElementById（elemenId）

返回拥有指定id的第一个对象的引用。

1.12.2 getElementByName（elementName）

返回带有指定名称的对象的集合。

1.12.3 getElementByTagName（tagName）

返回带有指定标签名的对象的集合。

1.12.4 createElement（tagName）

创建一个标签对象。

1.13 案例：验证用户名是否有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            var passwordObj = document.getElementById("password");
            var passwordText = passwordObj.value;

            var psdSpanObj = document.getElementById("psdSpan");
            var patt = /^\w{5,12}$/
            //test()方法用于测试某个字符串是否匹配规则
            if (patt.test(passwordText))
                //innerHTML表示起始标签和结束标签之间的内容，可读可写。
                psdSpanObj.innerHTML = "用户名合法!";
            else
                psdSpanObj.innerHTML = "用户名不合法!";

        }
    </script>
</head>
<body>
    密码：<input type="text" id="password" value="12345">
    <span id="psdSpan" style="color: red"></span>
    <button onclick="onclickFun()">submit</button>
</body>
</html>

1.14 正则表达式

1.15 节点的常用属性和方法

1.15.1 方法：

（1）getElementByTagName()获取当前节点的指定标签名孩子节点。
（2）appendChild(oChildNode)添加一个子节点。

1.15.2 属性：

（1）childNodes获取当前节点的左右子节点；
（2）firstChild获取当前节点的第一个子节点；
（3）lastChild获取当前节点的最后一个子节点；
（4）parentNode获取当前节点的父节点；
（5）nextSibling获取当前节点的下一节点；
（6）previousSibling获取当前节点的上一节点；
（7）className用于获取或设置标签的class属性值；
（8）InnerHtml获取/设置起始标签到结束标签中的内容；
（9）InnerText获取/设置起始标签到结束标签中的文本；

CorlorfulXuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C# Winform WebBrowser获取Html界面中js变量方法总结
u010042708的博客
03-09 955
如界面中有一个变量appVersion=“xiaomi”; 需要获取变量appVersion的值，有以下方法： 1.插入一个函数，此函数返回 token变量，注意需要判断token是否存在，否则会报错，示例代码如下： webBrowser1.Navigate(new Uri("http://www.baidu.com")); var doc = webBrowser1.Docum...
JavaScript基础
02-24
JavaScript基础 模块挑战是学生独立完成的下午项目或作业。 这是在先前由讲师完成的指导项目的基础上扩展的。 高级CSS和JavaScript JavaScript基础 目标 使用let，const，var并演示它们之间的差异。 了解并能够使用...
html如何获取js的变量值
热门推荐
happyb060218的专栏
05-16 6万+
方法一：嵌入到html句子中,当html元素使用                  script language="javascript"type="text/javascript">                        var df=new Date();                         var year= df.getFullYear() ;
Javascript 创建新节点 document.createElement()
最新发布
大剑师兰特的GIS世界
05-28 1172
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
html文件 得到或者引用js变量的值
dazhi_100的专栏
08-27 1万+
可以直接引用的, 也可以做一些运算后输出, 不过要保证你引入 js 的代码写在前面， 不然会变量值是 undefined. 想显示出来可以 document.write 或者赋值给一个容器的 innerHTML document.getElementById("demo").innerHTML = d; 或者赋值给一个输入框的 value document.getEl
html中使用引入js文件中定义的变量
SmallGirlYang的博客
11-28 2108
说明：一般开发人员都是使用服务形式打开，但是对于非开发人员，在他们电脑上打开时需要使用第一种形式。// 以访问js中方法的形式获取数据。
HTML基础-03JS 数据获取
m0_59214979的博客
10-28 1384
【javascript最初的梦】 （1.）点击获取数据进行渲染 <div id="f1" onclick="foo()">张三</div> <script> function foo(){ //利用class获取div var c1di = document.querySelector(".c1"); c1di.innerHTML = "李四"; </scr...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript 基础
02-16
主要为个人学习笔记 超详细
在html的js中获取外部js中的多个变量和数据
rainux
04-22 1万+
Code is never die ! 通常如果数据过多，我们会将数据单独拉出来存储到一个单独的js文件中，然后通过外部js引入进来使用数据。 目前比较简单而且用的比较多的是ES6语法规范的exports&import方法。 使用方法是： // 外部定义dataList.js exports.dataList = { uname = 'Rain', uage = '18', year = '2021-04-22 09:30', hometown = 'China', }
原生JS，textarea标签赋值获取值，innerHTML和innerText方法，HTML标签转义及反转义
搬砖的鱼的博客
05-21 2374
<textarea id="tex" rows="14" cols="60"> </textarea> 1.赋值： document.getElementById(‘tex’).innerText=“hello”; document.getElementById(‘tex’).innerHTML=“hello”; 2.获取值 var textVal=document.getElementById(‘tex’).innerText; var textVal=document.get
html获取php变量的值,html获取javascript变量值的方法有哪些
weixin_35886269的博客
03-10 599
html获取javascript变量值有如下三种方法：(免费学习视频分享：html视频教程)方法一：嵌入到html句子中,当html元素使用var df=newDate();var year= df.getFullYear() ;document.write(""+year+" J2EE开发");方法二：使用jqueryjs部分：$(function(){vardf=newDate();varye...
JavaScript入门之JavaScript的变量学习
David_house的博客
10-19 171
变量 作用：变量是用来存储数据的，方便程序进行操作 声明 格式：var 变量名=初始值; eg： var a=123; var A=456; var a1=1.234; var a2="js"; var a3='k'; var a4=true; var a5=new Date(); 特点 变量声明只有var关键字，且可以储存任意类型的数据 js中的代码可以不用分号结尾，但是为了提高代码的可阅读性，建议使用分号 js的变量名严格区分大小写 js中的字符串可以使用双引号也可以使用单引号 js中可以声
html怎么获取元素个数组,javascript怎么获取数组的值？
weixin_33526515的博客
06-08 1216
JavaScript 数组用于在单一变量中存储多个值，那么怎么获取数组的值？下面本篇文章就来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。数组对象的作用是：使用单独的变量名来存储一系列的值。通过指定数组名以及索引号码，你可以访问某个特定的元素。JavaScript中通过指定数组名及索引号码来取出数组中的值，定义一个变量，通过赋值的方式将取出的数组中的值存放在变量中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值