JavaScript

最新推荐文章于 2023-01-25 12:12:59 发布
最新推荐文章于 2023-01-25 12:12:59 发布
阅读量186 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengdengdecai/article/details/115803898
版权

Web资源分类

静态资源：html、css、js、txt、mp4、jpg
动态资源：jsp、servlet

关系运算
等于 == 简单做字面比较
全等于 === 类型和数值都要等

逻辑运算
且: &&
或: ||
取反： !
**且: &&（短路记忆法）
当表达式全为真的时候，返回最后一个表达式的值
当表达式中，有一个为假的时候，返回第一个为假的表达式的值
**

var b =12;
var  c= undefined
if (b&& c){

    alert("零为真")
}else {
    alert("零为假")
}

或 ||
当表达式全为真的时候 返回第一个表达式的值
当表达式有一个为假的时候，返回第一个为真的表达式的值
数组（像集合 自动变更长度）

var arr=[10];
arr[0]=1;
arr[12]=2;
alert(arr.length)

任何没被赋值的变量输出都是undifine
Function定义函数
使用格式如下
Function 函数名（形参列表）{

function f() {
    alert("无参函数被调用了")
}
f()  //要被调用

带参函数

var  a =10;
var b=undefined;
function f(a,b) {
    alert(a);
    alert(b);
}
f(a,b)

有返回值的函数，直接写return

var  a =10;
var b=undefined;
function f(a,b) {

    return a+b;
}
alert(f(a,b));

函数的第二种定义

var  a =10;
 var b=20;
var f =function (a,b) {
     return a+b;
};
alert(f(a,b))

注意JS不能重载，会覆盖之前的定义
函数的arguments 隐形参数（只在function函数内）
在funciton函数中不需要定义，但却可以用来获取所有参数的变量。管他叫隐形参数。
像java的可变形参一样 像java数组一样有length长度

<script>
    var a=1;
    var b=1;
    var c=1;
    var d=1;
    var e=1;
   var f =function () {
       alert(arguments.length);
        return a+b+c+d+d+e;
   };
   alert(f(a,b,c,d,e))
</script>

计算输入的参数值用arguments循环，可以计算不确定输入个数的总和

var x =0;
 var a=1;
 var b=1;
 var c=1;
 var d=1;
 var e=1;
var f =function () {
    for (let i = 0; i <arguments.length ; i++) {
        x=x+arguments[i];
    }
    alert(x)
};
f(a,b,c,d,e,);

JS中的自定义对象
可以直接对里面属性赋值，也可以直接输出

var x =new Object();
x.name="deng";
x.age = 18;
x.fun = function () {
   alert(x.age);
   alert(x.name);
};
x.fun();

成员变量和全局变量

成员变量：在浏览器打开的时候分配内存空间，关闭的时候销毁
局部变量：在函数体当中声明的变量，调用函数的时候分配空间，执行结束后，内存释放。

var s =123;
function f() {
    var s = 456;
    var a =1;
    alert(s)
}
f();
alert(s);
alert(a);//内存已释放，没有值

当一个变量声明的时候没有写var时候默认是成员变量。

<script>
    function f() {
        s = 456;
        alert(s)
    }
    f();
   alert(s);

</script>

**Js方法不能重载，重写
默认会调用最近方法，同名函数之后的会覆盖之前的。
**

JS的数据类型string int 布尔Object null undefined

引用数据类型：Object function
基本数据类型 Sring int 布尔 null undefined
放到typeof中 时以下6个字符串之一（undefined，number，string，object，function）
Null =Object

检查输入的值是否是number
var d = function (a,b) {
    if (typeof a !== "number" && typeof b !== "number"){
        alert("输入的值有误")
    }else {
        alert(a+b)
    }
};

Undifined
一个变量在声明的时候没有进行赋值就是undefined类型
Null

  1. 也是属于原始类型
  2. Typeof null运行结果时Object

Number类型（小数，正数，NaN，Infinity）

  1. Number类属于原始类型
  2. Number类型都有哪些值
    1.小数
    2.正数都是
    3.NaN（当计算结果应该是一个数字，但没有返回一个数字时就是NaN）
    4.Infinity
    这里解释以下NaN（）：当输入的必须是数字时，却没有输出数字
function f() {
    var a = 10;
    var b ="ss";
    var c = a*b;//这个c是一个NaN
    alert(typeof c);
}
f()

Infinity解释

function f() {
    var a = Infinity;
    alert(typeof a);
}
f()

5.在Number类型中有一个函数叫 isNaN（）函数 true表示是一个数字，false表示不是一个数字。

function f() {
    var a = Infinity;
    alert(isNaN(a));
}
f()

6.在Number类型中有一个函数娇Number（）将一个非数字类型转为数字类型

var i ="10";
var z ="2";
// var sum = Number(i)+Number(z);
// var sum = i+z;
alert(sum);

7.String转number（JAVA）

function f() {
var a =“keivn啊啊啊”//这个不能转
  var i ="keivn";
  var z = parseInt(i);
  alert(typeof z)
}

8.四舍五入（数学类）

function f() {
  var i =123.9;
  var s = Math.ceil(i);
  alert(s)
}

布尔类型
1.只有两个值true 和false
2.有个函数，作用是不是布尔类型转为布尔类型（转换规律，只要有东西就是true，未定义 空 NaN 都是false）

function f() {
  var i = "true";
  var s = Boolean(i);
  console.log(s)
}

Javascript中的事件

1 
function cle() {
    document.getElementById("testa").onclick =function () {
        alert("click1")
    }
    document.getElementById("testb").onclick =function () {
        alert("click2")
    }
}
2.
window.onclick =function () {
    document.getElementById("test1").onclick =function () {
        alert("click1")
    }
    document.getElementById("test2").onclick=function () {
        alert("click2")

跳到json

1.json概述
数据交换两个方法
Xml体积大解析难度大（一般和钱有关系的严谨的系统都采用xml交换）
Json体积小，解析更容易 （java-c++、javascript-java）

相比来说xml语法严格，json语法松散
在javscript中json是一个对象。
3. javascript怎么创建json对象，怎么访问json
注意[]中括号是数值，{}大括号是json

//格式
var jsonObj={
    "属性名":属性值,
    "属性名":属性值,
    "属性名":属性值,
    "属性名":属性值,
    "属性名":属性值,
    ...
};
//访问对象属性
    console.log(jsonObj.属性名)
console.log(jsonObj["属性名"])

例子

var st = [20];
st[20] = 12;
alert(st.length);
var person= {
    "name":"kobe",
    "age":43,
    "position":["movie","basketball","father"]
};
console.log(person.name);
console.log(person.age);
for (let i = 0; i <person.position.length ; i++) {
    console.log(person.position[i])
}

设计一个json格式的数据可以表示全班人数和每个学生信息

var class1= {
    "Total":3,
    "det":[{"name":"kevin","age":23},{"name":"k","age":23},{"name":"ke","age":23}]
};

console.log(class1.Total);
var s = class1.det;
for (let i = 0; i <s.length ; i++) {
    console.log(s[i].name+","+s[i].age)
}

Json用于交换数据
Java将 数据拼接成Json格式的string字符串，给json，json转换成对象。
Window.eval（“将字符串当js执行”）
如：获取java来的json格式的字符串。

var jsonfromjava ="{\"name\":\"kevin\",\"age\":23}";
window.eval("var stu ="+ jsonfromjava);
console.log(stu.name)

浏览器向服务器发送请求的方法

  1. 直接在浏览器地址栏写URL,get请求
  2. 点击页面超链接,get请求。
  3. 提交form表单，可以是get，也可以是post
  4. Window.open(url);
  5. Document.location.href=rul;

例子

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var jsonfromjava = "{\"ID\":1,\"Name\":\"Kabul\",\"CountryCode\":\"AFG\",\"District\":\"Kabol\",\"Population\":1780000}";
        window.onload =function () {
            document.getElementById("display").onclick =function () {
                //解析json来的字符串获取记录数
                window.eval("data = "+jsonfromjava);
                document.getElementById("total_span").innerHTML = data.ID;
                document.getElementById("num").innerHTML = data.ID;
                document.getElementById("nam").innerHTML = data.Name;
                document.getElementById("cityco").innerHTML = data.CountryCode;
                document.getElementById("pla").innerHTML = data.District;
                document.getElementById("popu").innerHTML = data.Population;
            }
        };
    </script>
</head>
<body>
<!--    <form method="get" action="http://localhost:8080/jsontet_war_exploded/welcome">-->
    <form>
        <input type="button" value="查找数据" id="display">
        <table border="1px" width="40%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>城市代码</th>
                <th>地区</th>
                <th>人口</th>
            </tr>
            <tbody>
                <tr>
                    <td id="num"></td>
                    <td id="nam"></td>
                    <td id="cityco"></td>
                    <td id="pla"></td>
                    <td id="popu"></td>
                </tr>
            </tbody>
        </table>
        总记录:<span id="total_span">条</span>
    </form>
</body>
</html>

正则表达式

常用的正则表达式符号
. 匹配除换行符意外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配打你的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束

*重复零次或更多次

  • 重复一次或更多次
    ?重复零次或一次
    {n} 重复N次
    {n,} 重复n次或更多次
    {n,m} 重复n到m次
    取反
    \W 匹配任意不是字母,数字,下划线,汉字的字符
    \S 匹配任意不是空白符的字符
    \D
    \B
    [^X]匹配除X开始以外的字符
    [^aeiou]匹配除了aeiou意外的字符

|表示或者
js中怎么创建正则表达式对象

var regExp = /正则表达式/标记
标记是可选项！！！！！！

  1. g:全局匹配
  2. i:忽略大小写 ignorecase

js中对象有一个很重要的方法：匹配输入的数是否为true（test）

var emailRegExp = [1-9][0-9]/{4:10};
var ok = emailRegExp.test("用户输入字符串");

正则表达式检验邮箱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var s =function () {
            var emailRegExp = /^\w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
            var a = document.getElementById("email").value;
            var ok = emailRegExp.test(a);
            if(ok){
                alert("输入的地址合法")
            }else {
                alert("输入的地址不合法")
            }
        }
    </script>
</head>
<body>
<form>
    输入邮箱地址:</label><input type="text" id="email">
    <br>
    <input type="button" value="验证邮箱地址" onclick="s()" id="checkemail">
</form>


</body>
</html>

正则表达式判断输入账号并提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
            function f() {
                    var  user = document.getElementById("username").value;
                    var emailRegExp=  /^\w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
                    uservalue = user.trim();
                    var ok = emailRegExp.test(uservalue);
                    if (ok){
                        document.getElementById("errorusername").innerHTML = "";
                    }else {
                        document.getElementById("errorusername").innerHTML = "输入的账号有误";
                    }
            }
    </script>
</head>
<body>
<form>
    账号:<input type="text" name="account" id="username" onblur="f()"><span id="errorusername"></span><br>
    密码:<input type="password" name="passowrd" id="password"><span></span><br>
    确认密码:<input type="text" name="confirmpassword" id="confirmpassowrd"><span></span><br>
</form>
</body>
</html>

写法二

<script type="text/javascript">
            window.onblur =function () {
                    document.getElementById("username").onblur =function () {
                            alert("失去焦点")
                    }
            }
    </script>
</head>
<body>
<form>
    账号:<input type="text" name="account" id="username"><span id="errorusername"></span><br>
    密码:<input type="password" name="passowrd" id="password"><span></span><br>
    确认密码:<input type="text" name="confirmpassword" id="confirmpassowrd"><span></span><br>

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onblur =function () {
            document.getElementById("confirmpassword").onblur = function(){
                var con =document.getElementById("confirmpassword").value;
                var co =con.trim();
                var pas = document.getElementById("password").value;
                if(co == pas){
                    document.getElementById("conspan").innerHTML = "";
                }else {
                    document.getElementById("conspan").innerHTML ="两次输入的密码不一致"
                }
            };
            document.getElementById("password").onblur = function(){
                var pas =document.getElementById("password").value;
                var pa =pas.trim();
                var emailRegExp=/^.{3,20}$/;
                var ok = emailRegExp.test(pa);
                if (pa == ""){
                    document.getElementById("passspan").innerHTML = "密码不能为空"
                }else {
                    if (ok){
                        document.getElementById("passspan").innerHTML =""
                    }else {
                        document.getElementById("passspan").innerHTML ="密码不可用"
                    }
                }
            };
            document.getElementById("account").onblur =function () {
                // alert("失去焦点")
                var acc= document.getElementById("account").value;
                var ac = acc.trim();
                var emailRegExp=/^.{3,20}$/;
                var ok = emailRegExp.test(ac);
                if (ac == ""){
                    document.getElementById("accspan").innerHTML = "不能为空"
                }else {
                    if (ok){
                        document.getElementById("accspan").innerHTML = ""
                    }else {
                        document.getElementById("accspan").innerHTML = "请输入正确的账户";
                    }
                }
            }
        };
        window.onfocus =function () {
            document.getElementById("account").onfocus =function () {
                document.getElementById("accspan").innerHTML ="";
            };
            document.getElementById("password").onfocus =function () {
                document.getElementById("passspan").innerHTML ="";
            };
            document.getElementById("confirmpassword").onfocus =function () {
                document.getElementById("conspan").innerHTML ="";
            }
        };
        //触发焦点事件
        window.onclick =function () {
            document.getElementById("sub").onclick =function () {
                document.getElementById("password").focus();//这里我做错了不是onfocus 是focus 调用事件
                document.getElementById("account").blur();
                document.getElementById("account").focus();
                document.getElementById("password").blur();
                document.getElementById("confirmpassword").focus();
                document.getElementById("confirmpassword").blur();
                if(document.getElementById("accspan").innerHTML == "" && document.getElementById("passspan").innerHTML == "" && document.getElementById("conspan").innerHTML == ""){
                    var s = document.getElementById("su");
                    s.submit();
                }
            }
        }
    </script>
</head>
<body>
<form action="http://localhost:8080/" id="su">
    账户：<input type="text" id="account"><span id="accspan"></span><br>
    密码：<input type="password" id="password"><span id = passspan></span><br>
    确认密码：<input type="password" id="confirmpassword"><span id="conspan"></span><br>
    <input type="button" id="sub" value="提交">
</form>


</body>
</html>

jQuery

什么是jQuery
是javascript的库，封装的大量方法。
官网地址https://jquery/com/
几乎所有浏览器支持
标版：写的更少做的更多
jQuery支持跨浏览器适配不用做多条ifelse
jQuery做动态绑定事件
jQuery基础

  1. 下载
    第一个是压缩版，主要用于部署，占用资源空间小，部署带框占用小，因为去掉了多余的换行符和空格，但是可读性差。
    第二个是非压缩版，保留原格式，可读性好，但比压缩版占用资源多大。
    在这里插入图片描述
  2. 简单的使用
    定义dom对象
    $(“#id”)
    $(“.class名字”)
    ( “ ” 标 签 名 ” ” ) 第 一 个 简 单 的 (“”标签名””) 第一个简单的 (“”标签名””)第一个简单的函数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HellojQuery</title>
		<script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
		<script>
			$(document).ready(function(){
				alert("HellojQuery")
			})

		</script>
	</head>
	<body>
		<form id="for">
		账号:<input type="text" id="acc">
		密码:<input type="password" id="pass">
		性别:
		男<input type="checkbox" value="man">
		女<input type="checkbox" value="wuman">
		特长:
		<select>
			<option value="java">java</option>
			<option value="python">python</option>
			<option value="Go">Go</option>
		</select>
		<input type="button" value="提交" id="sub" onclick="$()">
		</form>
	</body>
</html>
一个不一样的小程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript
03-09
Java脚本
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 74万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
最新发布
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4405
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7690
JavaScript的使用
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
JavaScript事件基础
JiuMeilove的博客
04-28 2万+
JavaScript事件概述 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测道德行为 简单的理解为:触发—响应机制 网页中国每个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某个按钮时产生一个事件然后去执行某些操作 JavaScript事件的三要素 JavaScript事件又三分部组成 事件源 被触发的对象 事件类型__如何触发/什么事件 事件处理器__通过一个函数赋值的方式完成 <body> <butto
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
Javascript项目
02-13
Javascript项目
高级JavaScript
02-14
高级JavaScript
javaScript api
11-03
javaScript api离线版，chm格式。。。。。。。。。。。。。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值