web前端——javaScript

目录

一、javaScript概述

1.javaScript历史

2.JavaScript与html,css关系

二、基本语法

①放在head中 

②放在 body中  

③写在外部的.js文件中

1.变量

2.数据类型

3.算术运算符 

4.逻辑运算符

5.赋值运算 

6.逻辑运算符 

7.条件运算符

8.控制语句 

三、函数

1.函数定义的基本语法

2.函数调用

3.全局函数

四、内置对象

1.String字符串

2.Array数组

3.Date

4.Math 

五、事件

六、Html DOM对象

1.Html DOM概述

 2.查找元素

 3.改变HTML

 4.改变CSS

七、计时

一、javaScript概述

1.javaScript历史

● JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。

● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行。

● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript

● JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能 （javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

2.JavaScript与html,css关系

JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互，弥补了HTML的缺陷

二、基本语法

脚本写在哪里？

javaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件

● 第一个JavaScript程序 
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/index.js"></script><script>//调用对话框库函数//alert("大家好 我是js!"); alert("hello js!")</script></head><body></body>
</html>
● 对话框
alert(‘welcome!’); 提示对话框

 ①放在head中 

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>alert("hello js!")</script></head><body></body>
</html>

②放在 body中  

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script src="js/index.js"></script></body>
</html>

③写在外部的.js文件中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/index.js"></script></head><body></body>
</html>

1.变量

● 声明变量用var关键字  例如 var name;

● 声明变量的同时对其赋值   var test=“THIS IS A BOOK”

2.数据类型

javaScript支持的数据类型

● ①数值型(number)： 其中包括整型数和浮点型数。

● ②布尔型(boolean)： 即逻辑值，true或flase。

● ③字符串型： 由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串）

● ④undefined类型

● ⑤Object类型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 数据类型 *///1.数值类型（包含整数和浮点数）var a = 10;var b = 10.5; /* alert(typeof(b));number  typeof(b)返回变量的数据类型 *///2.布尔类型var c = true;var d = false;/* alert(a==b); *///3.字符串，单引号和双引号都表示字符串var e = "abcd";var f = 'abcd';/* alert(typeof(e));alert(typeof(f)); *///4.undefined 声明了变量，却没有var g;alert(g==undefined);//对象类型var date = new Date();/* alert(date.getFullYear());alert(date.getMonth()+1);date.getDate(); */</script></head><body></body>
</html>

3.算术运算符 

+：可以进行“加法”与“连接”运算，如果2个运算符中的一个是字符串，javascript就将另一个转换成字符串，然后将2个运算数连接起来

-："字符串"-数值=数值，如果2个运算符中的一个是字符串，会把表达式中的数字字符串尝试类型转换，如果字符串不能转换为数值 ，返回NaN

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 算术运算符 + - * / % ++ --+ 加法运算 字符串运算*/var a = "10";var b = 5;var c = 10;var d = "a";//alert(a+b);//字符串连接 105//alert(b+c);//加法 15/* alert(c-b);//5 减法alert(a-b);//5 "字符串"-数值=数值  会把表达式中的数字字符串尝试类型转换alert(c-d);//NaN not a number 如果字符串不能转换为数值 返回NaN */// alert(a*b);//50// alert(a*d);//NaN</script></head><body></body>
</html>

4.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑，给定 x=6 以及 y=3 ，下表解释了逻辑运算符： 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = "10";var b = 5;var c = 10;var d = "a";// alert(a==c);//只比较值是否相等// alert(a===c);//全等（值和类型）</script></head><body></body>
</html>

5.赋值运算 

6.逻辑运算符 

逻辑运算符用于测定变量或值之间的逻辑，给定 x=6 以及 y=3 ，下表解释了逻辑运算符：

7.条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符
语法：
var result = (条件表达式)?结果1:结果2
当条件成立返回?后的内容，否则返回:后的内容

8.控制语句 

第一种是选择结构
● 单一选择结构（if）
● 二路选择结构（if/else）
● 多路选择结构（switch）
第二种类型的程序控制结构是循环结构
● 由计数器控制的循环（for）
● 在循环的开头测试表达式（while）
● 在循环的末尾测试表达式（do/while）
● break continue 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = "10";var b = 5;var c = 10;var d = "a";if(c>b){alert(c);} for (var i = 0;i < 5;i++){alert(i);}</script></head><body></body>
</html>

三、函数

1.函数定义的基本语法

function functionName([arguments]){
javascript statements
[return expression]
}
function: 表示函数定义的关键字
functionName:表示函数名
arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空
statements: 表示实现函数功能的函数体
return expression:表示函数将返回expression的值，同样是可选的的语句

2.函数调用

由函数来调用
<script type= "text/javascript">
function fun(){
  alert(“test”);
}
fun();//函数名调用
function fun2(){
fun();//在其他函数中调用
}
</script>

3.全局函数

• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN” 
• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN” 
• typeof (arg)返回arg值的数据类型
• eval(arg) 可运算某个字符串 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//①无参构造方法/*function test(){alert("你好");} *///②有参构造方法/* function test(a,b,c){alert(a+":"+b+":"+"c");}*///有返回值/* function test(a,b){return a+b;}*///函数调用/*  test(); test(true,"abc",new Date()); var c = test(10,23);alert(c); *///系统中的全局函数 在系统已经定义好了，直接调用的函数//alert(输出内容); 弹窗显示var a = 10.5;var b = "10.5";var c = 5;alert(parseInt(a));//把浮点数转为整数alert(parseInt(b)+c);//把字符串更换转换成整数, 如果转换的内容是字符串,字母不能开头, 只将开头的数字部分转换alert(parseFloat(c));alert(parseFloat(b));	alert(typeof(a));alert(typeof(b)); //typeof(变量)  获取变量的数据类型var s = "2+3*2"; var s = 2+3*2;var s = "alert(a)";eval(s);//把传入进来的字符串可以当做js脚本执行		</script></head><body></body>
</html>

四、内置对象

1.String字符串

●属性
length 用法：返回该字符串的长度
●方法
charAt(n) ：返回该字符串位于第 n 位的单个字符
indexOf(char) ：返回指定 char 首次出现的位置
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从 start 位置到end 位置的前一位置的一段 .
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从 start 位置开始，长度为length 的一段
split( 分隔符字符 ) ：返回一个数组，该数组是从字符串对象中分离开来的， < 分隔符字符> 决定了分离的地方，它本身不会包含在所返回的数组中
例如：'1&2&345&678'.split('&')返回数组：1,2,345,678

2.Array数组

数组的定义方法：
  var <数组名> = new Array();
这样就定义了一个空数组，以后要添加数组元素，就用：
  <数组名>[下标] = 值;
如果想在定义数组的时候直接初始化数据，请用：
  var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);
还可以
  var <数组名> = [<元素1>, <元素2>, <元素3>...];
●属性
length ：数组的长度，即数组里有多少个元素
●方法
join(<分隔符>) ： 返回一个字符串，该字符串把数组中的各个元素串起来，用 < 分隔符> 置于元素与元素之间
reverse()： 使数组中的元素顺序反过来。如果对数组 [1, 2, 3] 使用这个方法，它将使数组变成：[3, 2, 1]
sort() ： 使数组中的元素按照一定的顺序排列。如果不指定 < 方法函数 > ，则按字母顺序排列
对数字排序需要调用排序函数
function sortNumber(a,b){
  return a - b;
}

 3.Date

● 获取日期

new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

4.Math 

● Math 对象，提供对数据的数学计算

● 属性

PI 返回π（3.1415926535...)

● 方法 

Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的y次幂
Math.sqrt(x) 计算平方根；
Math.ceil(x) 对一个数进行上舍入
Math.floor(x) 对一个数进行下舍入。
Math.round(x) 把一个数四舍五入为最接近的整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值 

五、事件

● 一些常用的事件

onclick()鼠标点击时；
onblur()标签失去焦点;
onfocus()标签获得焦点;
onmouseover()鼠标被移到某标签之上;
onmouseout鼠标从某标签移开;
onload()是在网页加载完毕后触发相应的的事件处理程序;
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

六、Html DOM对象

1.Html DOM概述

● DOM是Document Object Model文档对象（网页中的标签）模型的缩写
● 通过html dom，可用javaScript操作html文档的所有标签

 2.查找元素

● 通常，通过 JavaScript，您需要操作 HTML 标签
● 为了做到这件事情，您必须首先找到该标签
● 要操作，先得到
● 有四种方法来做这件事：
①通过 id 找到 HTML 标签
document.getElementById(“id");
②通过标签名找到 HTML 标签
document.getElementsByTagName("p");
③通过类名找到 HTML 标签
document.getElementsByClassName("p");
④通过name找到 HTML 标签
document.getElementsByName(“name");

 3.改变HTML

● Html dom允许javaScript 改变html标签的内容

  • 改变 HTML 标签的属性
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
• 修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById( “div”).innerHTML= new HTML  

 4.改变CSS

● html dom允许 javaScript改变html标签的样式
语法：
document.getElementById("id").style.property=new style;
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

七、计时

● 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件
●  方法
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval() 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function hello(){console.log("下午好");}/* var t = setTimeout("hello()",5000);//设定指定时间后调用指定的函数，只调用一次 */var t;function startTime(){t = setInterval("hello()",1000);}function stopTime(){/* clearTimeout(t);//取消定时器 */clearInterval(t);}</script></head><body><input type="button" value="开始" onclick="startTime()"/><input type="button" value="停止" onclick="stopTime()"/></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

智能扫地机器人环境感知与地图构建优化方案

智能扫地机器人环境感知与地图构建优化方案

以下是一个针对智能扫地机器人程序中环境感知与地图构建问题的具体解决方案&#xff0c;参考了之前文章中的相关技术和信息&#xff1a; 智能扫地机器人环境感知与地图构建优化方案 一、引入高精度传感器 激光雷达&#xff08;LiDAR&#xff09;&#xff1a;使用高精度激光雷达…
阅读更多...
模板语法轮播

模板语法轮播

1.常用的视图容器组件 view类似于div进行使用 <div></div><view></view> scroll-view实现滚动列表效果 <scroll-view scroll-y> <view></view> <view></view> <view></view> </scroll-view> …
阅读更多...
数据库死锁解决

数据库死锁解决

一、Oracle死锁查看和解决办法汇总 由于生产的tomcat 经常有假死问题&#xff0c;困扰很久&#xff0c;最后发现有死锁&#xff0c;解决办法分享 1.1、查看死锁 1.1.1、用dba用户执行以下语句 select username,lockwait,status,machine,program from v$session where sid in …
阅读更多...
Arduino - 按钮 - 长按短按

Arduino - 按钮 - 长按短按

Arduino - Button - Long Press Short Press Arduino - 按钮 - 长按短按 Arduino - Button - Long Press Short Press We will learn: 我们将学习&#xff1a; How to detect the button’s short press 如何检测按钮的短按How to detect the button’s long press 如何检测…
阅读更多...
重大进展！微信支付收款码全场景接入银联网络

重大进展！微信支付收款码全场景接入银联网络

据中国银联6月19日消息&#xff0c;近日&#xff0c;银联网络迎来微信支付收款码场景的全面接入&#xff0c;推动条码支付互联互通取得新进展&#xff0c;为境内外广大消费者提供更多支付选择、更好支付体验。 2024年6月&#xff0c;伴随微信支付经营收款码的开放&#xff0c;微…
阅读更多...
Docker部署Nginx+Keepalived

Docker部署Nginx+Keepalived

# 创建挂载路径 mkdir /data/nginx_keep/nginx/conf -p mkdir /data/nginx_keep/keepalived/vim nginx.conf user nginx; worker_processes auto;error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid;events {worker_connections 1024; }http {incl…
阅读更多...
Rust: duckdb和polars读csv文件比较

Rust: duckdb和polars读csv文件比较

一、文件准备 样本内容&#xff0c;N行9列的csv标准格式&#xff0c;有字符串&#xff0c;有浮点数&#xff0c;有整型。 有两个csv文件&#xff0c;一个大约是2.1万行&#xff1b;一个是64万行。 二、toml文件 [package] name "my_duckdb" version "0.1.0&…
阅读更多...
opencv简单小项目

opencv简单小项目

OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库&#xff0c;它提供了大量的图像和视频处理功能。使用OpenCV可以开发各种简单的小项目&#xff0c;例如&#xff1a; 图像基本操作&#xff1a; 读取和显示图像。调整…
阅读更多...
弱监督学习

弱监督学习

弱监督学习&#xff08;Weak Supervision&#xff09;是一种利用不完全、不精确或噪声数据进行模型训练的方法。以下是一些常用的弱监督方法及其原理&#xff1a; 1. 数据增强&#xff08;Data Augmentation&#xff09; 原理&#xff1a; 数据增强是一种通过增加训练数据的多…
阅读更多...
区块链的历史和发展：从比特币到以太坊

区块链的历史和发展：从比特币到以太坊

想象一下&#xff0c;你住在一个小镇上&#xff0c;每个人都有一个大账本&#xff0c;记录着所有的交易。这个账本很神奇&#xff0c;每当有人买卖东西&#xff0c;大家都会在自己的账本上记一笔&#xff0c;确保每个人的账本都是一致的。这就是区块链的基本思想。而区块链的故…
阅读更多...
HG/T 5838-2021金属骨架发泡橡胶复合密封板检测

HG/T 5838-2021金属骨架发泡橡胶复合密封板检测

金属骨架发泡橡胶复合密封板是指工作温度范围-40&#xff5e;140℃&#xff0c;峰值温度为150℃条件下使用的金属骨架发泡密封板。 HG/T 5838-2021金属骨架发泡橡胶复合密封板检测项目&#xff1a; 测试项目 测试标准 外观 HG/T 5838 厚度 HG/T 5838 压缩性能 GB/T 206…
阅读更多...
VSCode安装OpenImageDebugger

VSCode安装OpenImageDebugger

VSCode安装OpenImageDebugger 1. 官网2. 编译2.1 依赖项2.2 编译 OpenImageDebugger2.3 配置 GDB 和 LLDB 3. 验证安装是否成功 1. 官网 下载路径&#xff1a;OpenImageDebugger 2. 编译 2.1 依赖项 官网上描述&#xff0c; Qt 5.15.1Python 3.10.12 这两个其实配置并不需…
阅读更多...
【好物推荐】给大家安利一个liux运维全能脚本工具箱

【好物推荐】给大家安利一个liux运维全能脚本工具箱

前几天在开源社区冲浪的时候无意间逛到一个部署帖&#xff0c;里面提到了一个脚本&#xff0c;让我眼前一亮。 科技Lion的Shell脚本&#xff01;大家赶紧去体验学习一下&#xff0c;感觉写的还是不错的。 该工具是一款全能脚本工具箱&#xff0c;使用shell脚本编写。专为Linux服…
阅读更多...
Jenkins多stage共享同一变量方式

Jenkins多stage共享同一变量方式

在第一个stage中为这个变量赋值&#xff0c;在其它stage中使用这个变量 import java.nio.file.Files import java.nio.file.Path import java.nio.file.Paths import java.nio.file.StandardCopyOption import groovy.json.JsonOutput import groovy.json.JsonSlurper// 共享的…
阅读更多...
图解HTTP笔记整理（前六章）

图解HTTP笔记整理（前六章）

图解HTTP 第一章 web使用HTTP &#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;协议作文规范&#xff0c;完成从客户端到服务器端等一系列运作流程。 协议&#xff1a;计算机与网络设备要相互通信&#xff0c;双方就必须基于相同的方法。比如…
阅读更多...
【论文阅读】--Popup-Plots: Warping Temporal Data Visualization

【论文阅读】--Popup-Plots: Warping Temporal Data Visualization

弹出图&#xff1a;扭曲时态数据可视化 摘要1 引言2 相关工作3 弹出图3.1 椭球模型3.1.1 水平轨迹3.1.2 垂直轨迹3.1.3 组合轨迹 3.2 视觉映射与交互 4 实施5 结果6 评估7 讨论8 结论和未来工作致谢参考文献 期刊: IEEE Trans. Vis. Comput. Graph.&#xff08;发表日期: 2019&…
阅读更多...
【TS】Typescript 中，什么是函数重载

【TS】Typescript 中，什么是函数重载

在JavaScript中&#xff0c;传统上并没有直接支持函数重载&#xff08;Function Overloading&#xff09;的概念&#xff0c;这是许多其他面向对象编程语言&#xff08;如Java、C#、C等&#xff09;的一个特性。函数重载意味着可以使用相同的函数名但不同的参数列表&#xff08…
阅读更多...
1.3.数据的表示

1.3.数据的表示

定点数 原码 最高位是符号位&#xff0c;0表示正号&#xff0c;1表示负号&#xff0c;其余的n-1位表示数值的绝对值。 数值0的原码表示有两种形式&#xff1a; [0]原0 0000000 [-0]原1 0000000 例&#xff1a;1010 最高位为1表示这是一个负数&#xff0c; 其它三位 010…
阅读更多...
HQChart使用教程30-K线图如何对接第3方数据41-分钟K线叠加股票增量更新

HQChart使用教程30-K线图如何对接第3方数据41-分钟K线叠加股票增量更新

HQChart使用教程30-K线图如何对接第3方数据40-日K叠加股票增量更新 叠加股票叠加分钟K线更新Request 字段说明Data.symbol 协议截图返回json数据结构overlaydata HQChart代码地址交流 叠加股票 示例地址:https://jones2000.github.io/HQChart/webhqchart.demo/samples/kline_i…
阅读更多...
可以一键生成热点营销视频的工具，建议收藏

可以一键生成热点营销视频的工具，建议收藏

在当今的商业环境中&#xff0c;热点营销已经成为了一种非常重要的营销策略。那么&#xff0c;什么是热点营销呢&#xff1f;又怎么做热点营销视频呢&#xff1f; 最近高考成绩慢慢公布了&#xff0c;领导让结合“高考成绩公布”这个热点&#xff0c;做一个关于企业或产品的营销…
阅读更多...
最新文章

Copyright @ 2022~2023