JavaScript速学笔记

最新推荐文章于 2023-04-11 16:48:32 发布
最新推荐文章于 2023-04-11 16:48:32 发布
阅读量236 收藏 3
点赞数
分类专栏： web前端 知识 JavaScript 文章标签： javascript js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45952745/article/details/109149360
版权
知识 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
web前端
5 篇文章 1 订阅
订阅专栏
JavaScript
1 篇文章 0 订阅
订阅专栏

1、JavaScript介绍

在这里插入图片描述
注意：Java是强类型(类型不可变)，而JavaScript是弱类型(类型可变 var)

JavaScript的特点：

  • 交互性：信息的动态交互
  • 安全性：不允许直接访问本地硬盘
  • 跨平台性：只要是可以解释js的浏览器 都可以执行，和平台无关

2、JavaScript和HTML代码的结合

第一种方法：

在head标签中，或者在body标签中，使用script标来书写JavaScript代码

第二种方法：
使用script标签引入
在这里插入图片描述
注：script标签可以用来定义js代码，也可以引入js文件。但是两个功能二选一使用，不能同时使用两个功能，想用多次的话只需要再加一对script标签

<script type="text/javascript" src="1.js"> </script>
<script type="text/javascript">...</script	>

3、变量

1、JavaScript的变量类型：

2、JavaScript里的特殊的值：

  • undefined：未定义，所有js变量未赋予初始值的时候，默认值都是unfinished
  • null：空值
  • NAN：全称为not a number。非字数 ，非数值

3、变量的定义

var 变量名;//不赋初值
var 变量名=某个值;//赋初值

4、typeof()函数
typeof()是JavaScript提供的一个函数，它可以取变量的数据类型返回

4、关系运算

等于:==,字面值的比较
全等于：===还会比较数值的类型
在这里插入图片描述

5、逻辑运算

且运算：&&
或运算：||
取反运算：！

返回结果：
在这里插入图片描述

6、数组（重点）

js中数组的定义：
格式：
在这里插入图片描述

（1）定义一个空数组在这里插入图片描述
（2）js中数组会可以自动扩容，中间未给赋值的值为undefined
在这里插入图片描述

（3）js中数组的遍历
var写成int、double等就会报错
在这里插入图片描述

7、函数(重点)

(1)第一种定义方式:使用function关键字来定义函数
使用格式如下：

function 函数名(形参列表)
{
	函数体
}

①无参函数：
在这里插入图片描述
②有参函数
在这里插入图片描述

③有返回值的函数
函数体内添加return就可以。

(2)第二种定义方式
使用格式如下：

var 函数名 = function(形参列表){函数体}

(3)js中的函数不允许重载

(4)函数的arguments 隐形参数（只在function函数内）
基本内容：
在这里插入图片描述

需求：编写一个函数，用于计算所有参数相加的和并返回
在这里插入图片描述
结果：
在这里插入图片描述
当出现string时：
在这里插入图片描述
结果： 在这里插入图片描述
所以，最终的代码应该为：
在这里插入图片描述

8、js中的object形式的自定义对象（扩展）

1.对象的定义

在这里插入图片描述

2.对象的访问
格式：
在这里插入图片描述
操作实例：

在这里插入图片描述

9、js中的{}形式的自定义对象（扩展）

1.对象的定义

在这里插入图片描述
调用时同object形式一致

9、JavaScript中的事件

1.什么是事件
在这里插入图片描述
2.常用事件
在这里插入图片描述
3.什么是事件的注册(绑定)？

在这里插入图片描述

4.事件的注册分为静态注册和动态注册两种
（1）静态注册：在这里插入图片描述

（2）动态注册：
先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码，叫动态注册

基本步骤：
在这里插入图片描述

（一）onload事件

onload事件是浏览器解析完页面之后就会自动触发的事件

(1)静态注册：

在这里插入图片描述
(2)动态注册:

...
<head>
	<script type="text/javascript">
	//onload动态注册是固定写法
	window.onload = function()
	{
		alert("动态注册onload事件");
	}
	<script>
</head>

（二）onclick单击事件(多用于按钮button)

(1)静态注册：
在这里插入图片描述
(2)动态注册:

<head>
	<script>
		window.onload = function(){
		//1.获取标签对象
		/*
		*document是JavaScript语言提供的一个对象(文档)
		*get              获取
		*Element          元素（就是标签）
		*by               通过。。。    由。。。经。。。
		*id               id属性

		*getElementById   通过id属性获取标签对象
		*/
		var btnobj = document.getElementById("btn01");
		}
		//2、通过  标签对象.事件名 = function(){}
		btnobj.onclick = function()
		{
			alert("动态注册的onclick事件")
		}
	</script>
</head>

<body>
	<button id="btn01">按钮</button>
</body>

（三）onblur失去焦点事件(常用于输入框)

(1)静态注册：
在这里插入图片描述
在这里插入图片描述
(2)动态注册：
在这里插入图片描述
在这里插入图片描述

（四）onchange内容发生改变事件（下拉列表和输入框）

(1)静态注册：
在这里插入图片描述

(2)动态注册：

  • head标签内script标签内：
    在这里插入图片描述
  • body标签内：
    在这里插入图片描述

（五）onsubmit表单提交事件（表单）

(1)静态注册：

  • head标签内script标签内：
    在这里插入图片描述
  • body标签内：
    在这里插入图片描述
    (2)动态注册：
  • head标签内script标签内：
    在这里插入图片描述
  • body标签内：在这里插入图片描述

10、DOM中模型

在这里插入图片描述

（一）Document对象

对应HTML代码：
在这里插入图片描述
Document文档树内存结构：
在这里插入图片描述
在这里插入图片描述
HTML要对象化改 怎么办在这里插入图片描述

(二)document方法的介绍(重点)

在这里插入图片描述
在这里插入图片描述
案例一：验证用户名是否有效
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    function onclickFun()
    {
        //操作标签之前需要获取这个标签对象
        var usernameObj=document.getElementById("username");
        //将输入框输入的内容传入usernameText
        var usernameText=usernameObj.value;
        //正则表达式判断是否满足要求
        var patt = /^\w{5,12}$/;
        //test()方法用于测试某个字符串，符合返回true，不符合返回false
        if(patt.test(usernameText))//判断传入到usernameText的输入框里的内容是否满足条件
        {alert("用户名合法")}
        else
        {alert("用户名不合法")}
    }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="123"/>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

正则表达式对象：
RegExp对象：
在这里插入图片描述
语法：
在这里插入图片描述
在这里插入图片描述

方括号[]:
在这里插入图片描述
元字符(主要是\w):
在这里插入图片描述
量词：
在这里插入图片描述
在这里插入图片描述
因此我们可以知道：

var patt = /^\w{5,12}$/;
//含义为：从头到尾有5-12个单词字符
var str="53165416";
patt.test(str)

(三)两种常见的验证提示效果

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    function onclickFun()
    {
    	//操作标签之前需要获取这个标签对象
        var usernameObj=document.getElementById("username");
        //将输入框输入的内容传入usernameText
        var usernameText=usernameObj.value;
        
    	var usernameSpanObj = document.getElementById("usernameSpan");
    	
        var patt = /^\w{5,12}$/;
        //test()方法用于测试某个字符串，符合返回true，不符合返回false
        if(patt.test(usernameText))//判断传入到usernameText的输入框里的内容是否满足条件
        {usernameSpan.innerHTML = "用户名合法";}//起始标签和结束标签中间的内容
        else
        {usernameSpan.innerHTML = "用户名不合法";}
    }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="123"/>
    <span id="usernameSpan" style="color:red;"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    function onclickFun()
    {
    	//操作标签之前需要获取这个标签对象
        var usernameObj=document.getElementById("username");
        //将输入框输入的内容传入usernameText
        var usernameText=usernameObj.value;
        
    	var usernameSpanObj = document.getElementById("usernameSpan");
    	
        var patt = /^\w{5,12}$/;
        //test()方法用于测试某个字符串，符合返回true，不符合返回false
        if(patt.test(usernameText))//判断传入到usernameText的输入框里的内容是否满足条件
        {usernameSpan.innerHTML = "<img src=\"right.png\" width\"18\" height\"18\">";}//起始标签和结束标签中间的内容
        else
        {usernameSpan.innerHTML = "<img src=\"wrong.png\" width\"18\" height\"18\">";}
        //   height\"18\"中的\为转义字符
    }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="123"/>
    <span id="usernameSpan" style="color:red;"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

(三)getElementsByName方法

在这里插入图片描述
为了实现全选，全不选，反选之类的操作。

全选：

在这里插入图片描述

全不选：

在这里插入图片描述

反选：

在这里插入图片描述

(四)getElementsByTagName方法(按照标签名)

在这里插入图片描述
js代码实现：
在这里插入图片描述

在这里插入图片描述

(五)document对象三个查询方法的使用注意事项

1、使用顺序
在这里插入图片描述

2.以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

以上便是博主这两天自学JavaScript的全部内容，希望对你能有所帮助

一头秀发的徐同学
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
javascript学习复盘笔记
最新发布
02-29
javascript学习复盘笔记
JavaScript正则表达式（符号汇总）
ECHO的博客
02-14 2285
JavaScript正则表达式功能： 搜索、替换、判断 JavaScript正则表达式格式： /正则表达式主体/修饰符 JavaScript正则表达式的修饰符： i：忽略大小写 g：全局匹配 m：多行匹配 JavaScript中正则表达式应用场景： 搜索功能（字符串方法） search() 方法参数为字符串或者是正则表达式 返回结果为匹配成功的索引值，如果没有，返回-1 替换功能（字符串方法） r...
script标签到底该放在哪里
我的博客
04-30 7102
一般script标签会被放在头部或尾部 头部就是<head>里面,但是将script放在头部，会让网页内容呈现滞后，导致用户感觉到卡。 尾部一般指将script放在<body>里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。将script放在尾部，优点是能加速网页加载。 缺点：是浏览器只能先解析完整个HTML页面，再下载JS。而对于一些高度依赖于JS的网页，就会显得慢了。所以将script放在尾部也不是最优解，最优解是一边解析
script标签应该写在哪儿？
AuroraCD的博客
06-04 6127
如果script标签放在头部，网页内容必须等待所有的Javascript代码下载、解析、执行完毕后才能开始呈现，这样会导致网页打开延迟，不利于用户体验，所以一般的做法是放在body最底部。 定义defer属性，脚本就会在整个页面都载入后再执行，这样就不会造成 网页打开延迟。 也可以根据js的作用要放在不同的位置： （1）放在头部 引用，比如一些函数库，例如常见的JQ库; （2）放在底部 在内部...
关于script标签在HTML页面放置的位置
热门推荐
weixin_45832482的博客
03-05 1万+
一般script标签会被放在头部或尾部，头部就是head标签里，尾部就是body里，也有放在body闭合标签之后。 1、script标签放在head标签内部 <head> <title>获取DOM元素</title> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script&g
javaScript快速入门(仅需一天)
King的博客
04-03 3615
/
JavaScript个人学习笔记
02-18
JavaScript个人学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript学习笔记
04-10
JavaScript学习笔记
JavaScript 基础入门速成上篇
灵魂学者的博客
04-11 837
JavaScript 基础入门速成上篇内容主讲js在页面嵌入以及基本使用，从定义变量，变量的类型以及命令规范，从函数的定义和执行以及变量与函数的预解析是js的一特点，js中的基础使用条件语句结合逻辑运算符讲解，如何获取js的元素以及通过js来操作页面的元素，也称操作DOM，对应的也有事件操作，如点击事件，键盘的事件等等这些基础快速入门！
JavaWeb—JavaScript
m0_54734531的博客
02-14 835
1、JavaScript介绍 Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型，Java 是强类型。 特点： 交互性（它可以做的就是信息的动态交互） 安全性（不允许直接访问本地硬盘） 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关） 2、J
JavaScript的DOM和正则表达式
qq_40703471的博客
03-29 496
需求： 当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" >
【教程】JavaScript快速学习
风舞雪凌月的博客
10-17 331
【教程】JavaScript快速学习备注一、JavaScript简介 备注 2021/6/10 星期四 终于写完了html和css，该轮到JavaScript了 一、JavaScript简介 JavaScript是一门客户端脚本语言，运行在浏览器中，可以增强用户和html页面的交互，控制html页面的元素实现动态效果。 ...
js实现：'w5-8' -> /^\w{5,8}$/
weixin_30518397的博客
07-05 310
HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现：'w5-8' -> /^\w{5,8}$/</title> <style> body{padding: 100px;} .abs...
JAVAWEB JavaScript 正则表达式
chengqingshihuishui的博客
09-04 211
1、RegExp对象：描述字符串模式的对象 正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）用于对字符串模式匹配以及检索替换，是对字符串执行模式匹配的强大工具。 语法： var patt = new RegExp(pattern,modifiers); 或 var patt = /pattern/modifiers; pattern（模式）描述了表达式的模式 modiffiers（修饰符）用于指定全局匹配，区分大小写的匹配和多行匹配 exp
正则表达式/^\w+$/i的理解
coolpad9187的专栏
04-29 9568
/^\w+$/i 两个//表示开始和结束 ^表示开始字符串 $表示结束字符串 \w表示包含【a-z，A-Z, _ , 0-9】 +表示一个或者多个\w 后面的i表示不区分大小写，在此处没用，因为\w里已经包含了大小写。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值