html5学习笔记22-JavaScript 简略学习

news2024/9/21 2:45:30

https://www.runoob.com/js/js-tutorial.html
JavaScript 是 Web 的编程语言。与java无关。
案例:https://c.runoob.com/examples/
JavaScript 是一种轻量级的编程语言、可插入 HTML 页面的编程代码、脚本语言。
ECMA-262 是 JavaScript 标准的官方名称。

HTML 中的 Javascript 脚本代码必须位于 <script></script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body><head> 部分中。

在 Chrome 浏览器上进行 JavaScript 代码的运行与调试:https://www.runoob.com/js/js-chrome.html
输出数据:

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

js语法

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)3.14  1001 123e5
字符串(String)字面量 可以使用单引号或双引号:"John Doe" 'John Doe'
表达式字面量 用于计算:5 + 6
数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]
对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}
使用关键字 var 来定义变量, 使用等号来为变量赋值:var x=5;

JavaScript 中最​​重要的保留关键字:https://www.runoob.com/js/js-syntax.html
注释:// /* */ 与c语言一致
JavaScript 有多种数据类型:数字,字符串,数组,对象等
JavaScript 对大小写是敏感的。
JavaScript 使用 Unicode 字符集,HTML-5 中默认的字符编码是 UTF-8。https://www.runoob.com/charsets/ref-html-utf8.html
js语句语法与c语言类似。
使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量。
在这里插入图片描述
JavaScript 拥有动态类型。使用 typeof 操作符来查看数据类型。typeof “John” // 返回 string
布尔类型var x=true;var y=false;
数组var cars=new Array();cars[0]=“Saab”;
var cars=new Array(“Saab”,“Volvo”,“BMW”);
var cars=[“Saab”,“Volvo”,“BMW”];
对象var person={firstname:“John”, lastname:“Doe”, id:5566};
可以通过将变量的值设置为 null 来清空变量。
js事件:https://www.runoob.com/js/js-events.html
js运算符、比较、条件语句…都与c语言类似。
js正则表达式:https://www.runoob.com/js/js-regexp.html

js错误控制:try 语句测试代码块的错误。
catch 语句处理错误。throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。

使用 console.log() 方法在调试窗口上打印 JavaScript 值。
debugger 关键字用于停止执行 JavaScript,并调用调试函数。

JavaScript 严格模式(“use strict” 指令)即在严格的条件下运行。“use strict”; x = {p1:10, p2:20}; // 报错 (x 未定义)
“use strict” 指令只允许出现在脚本或函数的开头。

严格的比较运算中,=== 为恒等计算符,同时检查表达式的值与类型。

js保留关键字:https://www.runoob.com/js/js-reserved.html
void()仅仅是代表不返回任何值,但是括号内的表达式还是要运行

异步(Asynchronous, async)与同步(Synchronous, sync)https://www.runoob.com/js/js-async.html
Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。

js函数多种调用方式。
闭包。这个不是很常见的概念。https://www.runoob.com/js/js-function-closures.html
js类class定义:https://www.runoob.com/js/js-class-intro.html
类继承:class Dog extends Animal{};

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
在这里插入图片描述
找到元素有三种方法:
通过 id 找到 HTML 元素var x=document.getElementById(“intro”);
通过标签名找到 HTML 元素var y=x.getElementsByTagName(“p”);
通过类名找到 HTML 元素var x=document.getElementsByClassName(“intro”);

更改此元素的内容 :document.getElementById(“p1”).innerHTML=“新文本!”;
更改此元素的属性:document.getElementById(“image”).src=“landscape.jpg”;
改变 HTML 元素的样式document.getElementById(“p2”).style.color=“blue”;
js事件

<button type="button"onclick="document.getElementById('id1').style.color='red'">点我!</button>

监听事件:

document.getElementById("myBtn").addEventListener("click", displayDate);

HTML DOM 事件列表:https://www.runoob.com/jsref/dom-obj-event.html
DOM元素增删改:https://www.runoob.com/js/js-htmldom-elements.html

getElementsByTagName() 方法返回 HTMLCollection 集合对象。
NodeList 对象是一个从文档中获取的节点列表 (集合) 。var myNodeList = document.querySelectorAll(“p”);

js高级编程…
浏览器对象模型BOM(Browser Object Model ):window.document.getElementById(“header”);

js库:https://www.runoob.com/js/js-libraries.html
JavaScript 库常被称为 JavaScript 框架.
jQuery:https://www.runoob.com/jquery/jquery-tutorial.html
Prototype提供用于执行常见 web 任务的简单 API。
MooTools提供了可使常见的 JavaScript 编程更为简单的 API。
YUI - Yahoo! User Interface Framework,涵盖大量函数的大型库,从简单的 JavaScript 功能到完整的 internet widget。
Ext JS - 可定制的 widget,用于构建富因特网应用程序(rich Internet applications)。
Dojo - 用于 DOM 操作、事件、widget 等的工具包。
script.aculo.us - 开源的 JavaScript 框架,针对可视效果和界面行为。
UIZE - Widget、AJAX、DOM、模板等等。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。
国内免费的 CDN 资源有:Staticfile CDN:https://staticfile.org/
海外免费的 CDN 资源有:cdnjs:https://cdnjs.com/

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js">
</script>

js实例:https://www.runoob.com/js/js-examples.html

后续:html DOM、jQuery、AJAX、ASP、PHP、.NET

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1005677.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

房地产小程序 | 小程序赋能,房地产业务数字化升级

随着科技的不断发展&#xff0c;房地产行业正逐渐向数字化转型。在这个过程中&#xff0c;房地产小程序成为了一种重要的工具&#xff0c;可以帮助房地产企业提供更好的购房体验、增加销售额&#xff0c;并实现管理的便捷化。 优点 便捷购房体验&#xff1a;房地产小程序为用户…

vite + react + typescript + uni-app + node 开发一个生态系统

简介 使用 vite react typescript uni-app node 来开发一个简易的生态系统案例&#xff0c;包含 APP&#xff0c;H5&#xff0c;微信小程序&#xff0c;控制台&#xff0c;服务端 开发 admin 技术栈&#xff1a;vite react typescript初始化控制台项目选择自定义预设…

快速傅里叶变化

引言 目标 傅里叶变化&#xff08;Fourier transform&#xff09;是一种信号处理技术&#xff0c;它可以将时间信号转换为频率信号&#xff0c;即将一组具有相同数量频率的正弦波叠加在一起&#xff0c;形成一组新的正弦波。如果我们把时间信号从频域转换到时域&#xff0c;那么…

手搭手入门MybaitsX

Mybatis-Plus介绍 为简化开发而生 MyBatis-Plus(opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis(opens new window) 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 特性 无侵入&#xff1a;只做增强…

2022年全国研究生数学建模竞赛华为杯C题汽车制造涂装-总装缓存调序区调度优化问题求解全过程文档及程序

2022年全国研究生数学建模竞赛华为杯 C题 汽车制造涂装-总装缓存调序区调度优化问题 原题再现&#xff1a; 背景介绍   汽车制造厂主要由焊装车间、涂装车间、总装车间构成&#xff0c;每个车间有不同的生产偏好&#xff0c;如&#xff1a;焊装车间由于车身夹具的限制偏向最…

【C语言】指针的“最后一站”【进阶版】

欢迎各位看官^_^ 目录 1、字符指针 2、指针数组 3、数组指针 3.1数组指针的定义 3.2数组指针的使用 4、数组指针和指针数组的区别 5、数组参数&#xff0c;指针参数 5.1数组参数定义 5.2指针参数定义 5.3一维数组传参 5.4二维数组传参 5.5一级指针传参 5.6二级指…

Matlab图像处理-彩色图像基础

光谱 在17世纪60年代&#xff0c;人们普遍认为白光是一种没有其他颜色的纯色光&#xff0c;而彩色光是有某种缘故发生变化的光。为了验证这个假设&#xff0c;牛顿让一束阳光通过一面三棱镜&#xff0c;光线在墙上被分解成了八种不同的颜色&#xff0c;即&#xff1a;红、橙、…

Unity SteamVR 开发教程:SteamVR Input 输入系统(2.x 以上版本)

文章目录 &#x1f4d5;前言&#x1f4d5;教程说明&#x1f4d5;导入 SteamVR 插件&#x1f4d5;SteamVR Input 窗口⭐action.json 文件⭐窗口面板⭐SteamVR_Input 目录 &#x1f4d5;SteamVR 动作的类型⭐Boolean⭐Single⭐Vector2⭐Vector3⭐Pose⭐Skeleton⭐Vibration &…

postgresql -数据库事务与并发控制

postgresql -数据库事务与并发控制 数据库事务事务控制语句并发与隔离数据库事务 事务控制语句 -- serial 自增 CREATE TABLE accounts(id serial PRIMARY KEY,user_name varchar(50),balance numeric

Windows11 OneDrive 安装后无法打开的解决办法

按 WinR &#xff0c;输入 gpedit.msc 在 本地组策略编辑器 中找到 计算机配置 > 管理模板> Windows 组件 > OneDrive&#xff0c;找到 禁止使用 OneDrive 进行文件存储 然后双击 禁止使用 OneDrive 进行文件存储&#xff0c;将中改为 已禁用&#xff0c;点击应用并…

CSS核心使用一

CSS核心使用一 box-sizingbox-shdowtext-shadowpositionwriting-mode box-sizing 定义计算一个元素的总高度和总宽度. 属性值 content-box 默认值,width 内容宽度,height内容的高度border-box 宽度和高度包含内容,内边距和边框 widthborderpadding内容宽度, heightborderpad…

迁移学习和多任务学习

迁移学习&#xff08;Transfer Learning&#xff09; 深度学习中&#xff0c;最强大的理念之一就是&#xff0c;有的时候神经网络可以从一个任务中习得知识&#xff0c;并将这些知识应用到另一个独立的任务中。 例如&#xff0c;你已经训练好一个能够识别猫的图像的神经网络&a…

软件设计模式系列之四——简单工厂模式

1 模式的定义 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;用于对象的创建&#xff0c;它属于工厂模式的一种。简单工厂模式的主要目标是封装对象的创建过程&#xff0c;使客户端代码与具体类的实例化解耦&#xff0c;从而提…

VS CODE改变背景色

1) setting 2&#xff09; workbench/appearance/color theme&#xff0c;有几种模式可以测试 4&#xff09;效果 light modern&#xff0c;适合文档中截图 solarized dark 还有RED&#xff0c;吓人啊

数据结构(C语言)——单链表

整体结构如上&#xff1a;看似简单&#xff0c;但第一次用C语言实现还是感觉有点吃力&#xff0c;尤其是特别容易让链表断裂 下面是代码&#xff1a;&#xff08;有链表的增删改查&#xff09; 注&#xff1a;这里E类型是用define将int进行了宏定义 #include <stdio.h> …

西工大 ASLP 实验室在 WeNet 中开源基于 CPPN 的神经网络热词增强语音识别方案

语境偏置&#xff08;Contextual biasing&#xff09;旨在将语境知识集成到语音识别&#xff08;ASR&#xff09;系统中&#xff0c;以提高在相关领域词汇&#xff08;俗称“热词”&#xff09;上的识别准确率。在许多ASR场景中&#xff0c;待识别语音中可能会包含训练数据中数…

双系统ubuntu20.04(neotic版本)从0实现Gazebo仿真slam建图

双系统ubuntu20.04(neotic版本)从0实现Gazebo仿真slam建图 昨晚完成了ROS的多机通讯&#xff0c;还没来得及整理相关操作步骤&#xff0c;在进行实际小车的实验之前&#xff0c;还是先打算在仿真环境中进行测试&#xff0c;熟悉相关的操作步骤&#xff0c;计划通过虚拟机&…

写好技术书籍

写好技术书籍 目录概述需求&#xff1a; 设计思路实现思路分析1.如何写好对应的书籍 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,chal…

多模态情感学习技术

近年来随着深度学习的发展&#xff0c;多种模态的语义表示的壁垒被打破&#xff0c;计算机可以处理和理解的向量形式成为多模态的主要表示形式。 多模态学习技术不是自然语言处理领域独有的技术&#xff0c;在图像处理、视频处理以及智能语音等领域中都能找到多模态相关技术的…

数字电源常用传递函数

文章目录 PID控制器二阶广义积分器PR谐波抑制器陷波器全通滤波器重复控制器连续域离散化的几种方法 有S域和Z域 PID控制器 传递函数&#xff1a; bode图&#xff1a; m代码 %% PID控制器 % 连续域 kp 100; ki 10; kd 10; Ts 1/50000; num [kd kp ki]; den [1 0]; Gpi…