js的学习

什么是JavaScript?

JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,”它能使网页可交互。

JavaScript 和Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似。

JavaScript在1995 年由 Brendan Eich 发明,并于 1997 年成为 ECMA 标准。

ECMAScript6(ES6)是最新的JavaScript版本(发布于 2015年)。

 JavaScript引入方式

内部脚本

将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中,可以在任意地方,放置任意数量的<script>

一般会把脚本置于<body>元素的底部,可改善显示速度

<script>
alert("Hello javaScript")
</script>


外部脚本

将JS代码定义在外部JS文件中,然后引入到 HTML页面中

外部JS文件中,只包含J代码,不包含<script>标签

<script>标签不能自闭合

<script src="is/demo.js"></script>

JavaScript的基础语法

1.区分大小写:与Java一样,变量名、函数名以及其他一切东西都是区分大小写的

2.每行结尾的分号可有可无

3.注释:
单行注释://注释内容
多行注释:/* 注释内容 */

4.大括号表示代码块

//判断
if(count == 3){
alert(count);
}

输出语句

使用 window.alert()写入警告框

使用 document.write()写入 HTML 输出

使用 console.log()写入浏览器控制台

 代码样例

<script>
window.alert("Hello javaScript"); //浏览器弹出警告框
document.write("Hello javaScript"); //写入HTML,在浏览器展示
console.log("Hello javaScript");//写入浏览器控制台
</script>

运行结果

 变量

1.JavaScript 中用 var 关键字(variable 的缩写)来声明变量。

2.JavaScript 是一门弱类型语言,变量可以存放不同类型的值

3.变量名需要遵循如下规则:
        组成字符可以是任何字母、数字、下划线(...)或美元符号($)
        数字不能开头
        建议使用驼峰命名

 数据类型

JavaScript中分为:原始类型 和引用类型

使用 typeof运算符可以获取数据类型:

var a = 20:;
alert(typeof a);
原始类型

number:数字(整数、小数、NaN(NotaNumber))

string:字符串,单双引皆可

boolean:布尔。true,false

nul:对象为空

undefined:当声明的变量未初始化时,该变量的默认值是 undefined

Symbol(ES6新增):表示唯一的标识符。

引用类型 
  1. 对象(Object):表示复杂数据结构,可以包含多个属性和方法。
  2. 数组(Array):是一种特殊的对象,用于存储多个值。
  3. 函数(Function):是一种特殊的对象,可以被调用执行。
  4. 日期(Date):表示日期和时间。
  5. 正则表达式(RegExp):用于匹配字符串的模式。
  6. Map:用于存储键值对的集合,其中键可以是任何数据类型。
  7. Set:用于存储唯一值的集合,其中值可以是任何数据类型。

原始类型在赋值时是按值传递的,而引用类型在赋值时是按引用传递的,这意味着当你将一个原始类型的变量赋值给另一个变量时,实际上是将值复制给了新变量;而当你将一个引用类型的变量赋值给另一个变量时,两个变量实际上指向同一个对象,改变其中一个变量的值也会影响另一个变量。

运算符

算术运算符:+,-,*,/,%,++,

赋值运算符:=,+=,-=,*=,/=,%=
比较运算符:>,<,>=,<=,!=,==,==
逻辑运算符:&&,,!
三元运算符:条件表达式?true_value:false_value

 ==与===的区别

==会进行类型转换,===不会进行类型转换;

比如字符串:"10"与数字:10进行比较,==会先转换为相同类型,再进行比较,===不会进行转换,直接进行比较

var a = 10:
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10);//true

控制流程语句

与java基本一样

if...else if ...else...
switch
for
while
do ... while

 函数

介绍:函数(方法)是被设计为执行特定任务的代码块。

定义:JavaScript 函数通过 function 关键字进行定义,语法为:

function functionName(参数1,参数2..){
//要执行的代码
}

注意:

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型,可以在函数内部直接使用return返回即可

调用:函数名称(实际参数列表)

JS对象

Array

JavaScript 中 Array对象用于定义数组。

定义

var 变量名 =new Array(元素列表); //方式1

var 变量名 =[元素列表]; //方式2

var arr=new Array(1,2,3,4);//方式一var arr =[1,2,3,4];//方式二

 访问

arr[ 索引]= 值;

arr[10]= "hello";

注意事项

JavaScript 中的数组相当于Java 中集合,数组的长度是可变的,而JavaScript是弱类型,所以可以存储任意的类型的数据。

Array常用属性

length:设置或返回数组中元素的数量。

 Array常用方法

forEach():遍历数组中的每个有值的元素,并调用一次传入的函数

push():将新元素添加到数组的末尾,并返回新的长度。
 

splice():从数组中删除元案。

注意:

forEach()遍历是遍历有值的元素,而for循环是全部遍历

String

String字符串对象创建方式有两种:

var 变量名=new String("...”);//方式一

var str = new string("Hello string");

var 变量名 ="…";//方式二

var str ="Hello string"

 String常用属性

length:字符串的长度。

  String常用方法

charAt():返回在指定位置的字符。

indexof():检索字符串。
 

trim():去除字符串两边的空格
 

substring():提取字符串中两个指定的索引号之间的字符

JSON

Javascript自定义对象

定义格式:

var 对象名 ={
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3,
函数名称:function(形参列表){}
};

    //自定义对象var user = {name: "Tom",age: 10,gender: "male",// eat: function(){//     alert("用膳~");// }eat(){alert("用膳~");}}

 调用格式:

对象名.属性名;

对象名.函数名();

    alert(user.name);user.eat();
 JSON-基础语法

    //定义jsonvar jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';alert(jsonstr.name);//json字符串--js对象var obj = JSON.parse(jsonstr);alert(obj.name);//js对象--json字符串alert(JSON.stringify(obj));

 value 的数据类型为:

数字(整数或浮点数)

字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中)
对象(在花括号中)
nul

BOM

概念:

Browser Object Model 浏览器对象模型,允许]avaScript与浏览器对话,JavaScript 将浏览器的各个组成部分封装为对象。

组成:

Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象

 Window

 Location

DOM

 

HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。(Window可以省略)

Document对象中提供了以下获取Element元素对象的函数:

1.根据id属性值获取,返回单个Element对象
var hl = document.getElementById('h1');

2.根据标签名称获取,返回Element对象数组
var divs =document.getElementsByTagName('div');

3.根据name属性值获取,返回Element对象数组
var hobbys = document.getElementsByName('hobby');

4.根据class属性值获取,返回Element对象数组
var clss=document.getElementsByClassName('cls');

 事件绑定

方式一:通过 HTML标签中的事件属性进行绑定

<input type="button"
onclick="on()" value="按钮1">
<script>function on(){alert('我被点击了!);
</script>

方式二:通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>document.getElementById('btn').onclick=function(){alert('我被点击了!);
</script>

常见事件

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

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

相关文章

Matlab-熵权法

文章目录 熵权法一、模型简介二、例题1. 数据标准化2.指标的熵值和变异程度3.权重与评分4.代码实现 熵权法 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多…

英特尔LLM技术挑战记录

英特尔技术介绍&#xff1a; Flash Attention Flash Attention 是一种高效的注意力机制实现&#xff0c;旨在优化大规模 Transformer 模型中的自注意力计算。在深度学习和自然语言处理领域&#xff0c;自注意力是 Transformer 架构的核心组件&#xff0c;用于模型中不同输入元…

骆驼大赛

目录 一&#xff0c;主版图 二&#xff0c;骰子 三&#xff0c;初始设置 四&#xff0c;核心规则 五&#xff0c;结算 这是适合5-8人玩的一个概率推理类的回合制桌游。 一&#xff0c;主版图 赛道由16个格子组成&#xff0c;编号为1-16。 一共7个骆驼&#xff0c;其中正…

【面试八股总结】索引(二):B+树数据结构、索引使用场景、索引优化、索引失效

参考资料&#xff1a;小林coding、阿秀 一、为什么InnoDB采用B树作为索引数据结构&#xff1f; B 树是一个自平衡多路搜索树&#xff0c;每一个节点最多可以包括 M 个子节点&#xff0c;M 称为 B 树的阶&#xff0c;所以 B 树就是一个多叉树。 B 树与 B 树的差异&#xff1a;…

如何开启tomcat管理功能

1 、修改conf/tomcat-users.xml <role rolename"manager-gui"/> <user username"tomcat" password"tomcat" roles"manager-gui"/>2、修改webapps/manager/META-INF/context.xml <Valve className"org.apache.cata…

遇到了导师放养,该怎么坚持?

最近收到学生读者的留言&#xff0c;抱怨科研的困难。导师忙碌且学生众多&#xff0c;自己只是众多学生之一&#xff0c;常常处于放养状态。除了每周的组会外&#xff0c;几乎无法接触到导师。在这种状态下&#xff0c;缺乏方向和动力&#xff0c;非常担心无法顺利毕业&#xf…

JAVA面试题大全(十八)

1、说一下 jvm 的主要组成部分&#xff1f;及其作用&#xff1f; 类加载器&#xff08;ClassLoader&#xff09;运行时数据区&#xff08;Runtime Data Area&#xff09;执行引擎&#xff08;Execution Engine&#xff09;本地库接口&#xff08;Native Interface&#xff09;…

力扣:15. 三数之和

15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三…

在树莓派3B+中下载opencv(遇到的各种问题及解决)

目录 前言 1、删除原版本下新版本 2、python虚拟环境 3、python版本共存换链接——给版本降低 4、烧录之前版本的文件&#xff08;在清华源中可以找&#xff0c;不用官网的烧录文件就行&#xff1b; 比如&#xff1a;&#xff08;balenaEtcher&#xff09;重新烧录有问题…

上交提出TrustGAIN,提出6G网络中可信AIGC新模式!

月16日至18日&#xff0c;2024全球6G技术大会在南京召开。会上&#xff0c;全球移动通信标准制定组织3GPP&#xff08;第三代合作伙伴计划&#xff09;的3位联席主席分享了3GPP6G标准时间表&#xff1a; 2024年9月&#xff0c;启动6G业务需求研究&#xff1b; 2025年6月&…

PHP开发入门

PHP官网&#xff1a;PHP: Hypertext Preprocessor apache官网&#xff1a;https://httpd.apache.org/ 一、搭建PHP环境 下载apache 进入官网点击download 选择下载windows版本文件 点击进入下载界面 点击下载64位版本文件 下载后解压文件 解压文件后进入 D:\httpd-2.4.59-24…

一点连接千家银行,YonSuite让“企业付款”更便利

在快速变化的商业环境中&#xff0c;企业的运营效率直接决定了其市场竞争力。特别是对于财务团队来说&#xff0c;每一次付款的流畅与便捷&#xff0c;都是企业高效运作的关键。今天&#xff0c;我们为您带来一个先进性的解决方案——YonSuite&#xff0c;它以其独特的“一点连…

医学中脑机接口技术的未来

医学中脑机接口技术的未来 李升伟 编译 对非侵入性脑机接口&#xff08;而不是植入物&#xff09;日益增长的兴趣可能会提高患者的易使用性&#xff0c;但分辨率需要提高。 图片来源&#xff1a;Denis Pobytov / DigitalVision Vectors / Getty 全球范围内正在展开一场争夺利用…

使用 RT 矩阵进行 3D 点云变换详解(基于 PCL 和 Eigen 库)

在 3D 点云处理中&#xff0c;RT 矩阵是一个常用的工具&#xff0c;用于对点云进行旋转和平移操作。本文将详细介绍 RT 矩阵的概念&#xff0c;并通过一个示例程序演示如何基于 PCL 和 Eigen 库将一帧点云进行矩阵变换再输出。 本教程的示例代码和点云数据可在 GitHub 下载。 什…

多电压档hold扫尾

MMMC下STA收敛更为困难&#xff0c;setup通过DMSA可以很好的得到收敛&#xff1b;但是常规的时序修复工具很难通过工具得到最终clean的时序状态&#xff0c;本文介绍一种多模多角下hold的收敛方法。 该方法主要通过遍历hold路径上多电压setup的余量&#xff0c;支持从前往后和从…

【STM32嵌入式系统设计与开发---传感器拓展】——1_2_蓝牙主从模块_AT配置(HC-05)

一、主机蓝牙设置 # 1、重置模块 ATORGL # 2、设置名字&#xff0c;自己随便设置 ATNAMEMaster # 3、设置连接密码&#xff0c;要和从机一样&#xff0c;密码好像可以不加双引号 ATPSWD"1234" # 4、设置为主机 ROLE 1 为主机 ROLE 0为从机 ATROLE1 # 5、设置波特…

【OpenGL手册14】实例化

目录 一、说明 二、实例化 三、实例化数组 四、小行星带 五、完整代码 六、结论 一、说明 实例化渲染&#xff0c;是用少数数据做模板&#xff0c;实现海量物体渲染的手段方法。用实例化渲染&#xff0c;需要对每个实例产生一定描述数据。如何实现&#xff1f;请看本文下…

docker-compose 映射端口失败! docker端口映射失败 ,docker映射只能使用老端口,映射无法使用

1. 现象 使用docker-compose 启动项目&#xff0c;发现映射端口出现问题&#xff0c;不能映射端口&#xff01; 如图&#xff1a; 使用原来端口是可以使用的 2. 问题原因&#xff1a; 使用了docker-mode 为host模式&#xff0c;所以不能换端口&#xff0c;只能写为"8086:…

SpringBoot——基于Spring Task实现定时任务

目录 定时任务 项目总结 新建一个SpringBoot项目 pom.xml无需引入依赖 SpringTaskDemo SpringbootSpringtaskApplication启动类 定时任务 在日常的项目开发中&#xff0c;往往会涉及一些需要做到定时执行的代码&#xff0c;例如自动将超过24小时的未付款的订单改为取消状…

【调试笔记-20240522-Windows-WSL 修改已安装发行版名称】

调试笔记-系列文章目录 调试笔记-20240522-Windows-WSL 修改已安装发行版名称 文章目录 调试笔记-系列文章目录调试笔记-20240522-Windows-WSL 修改已安装发行版名称 前言一、调试环境操作系统&#xff1a;Windows 10 专业版调试环境调试目标 二、调试步骤方法一&#xff1a;修…