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-基础语法

    //定义json
    var 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>

常见事件

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

初学者必读：Midjourney AI创作工具的简易使用手册！

初学者必读：Midjourney AI创作工具的简易使用手册！

在数字化时代&#xff0c;AI的应用不断推动着各个领域的发展。在这些领域中&#xff0c;AI在艺术和设计方面的应用引起了广泛的关注。AI绘画软件作为今年的热门&#xff0c;Midjourney 通过其独特的原理和方便的使用方法&#xff0c;为创作者提供了一个全新的创作逼真绘画的平台…
阅读更多...
设计模式15——享元模式

设计模式15——享元模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 享元模式&#xff08;Flyweigh…
阅读更多...
Golang协程和通道

Golang协程和通道

文章目录 协程&#xff08;goroutine&#xff09;基本介绍GMP模型协程间共享变量 通道&#xff08;channel&#xff09;基本介绍channel的定义方式channel的读写channel的关闭channel的遍历方式只读/只写channelchannel最佳案例select语句 协程&#xff08;goroutine&#xff0…
阅读更多...
力扣62 不同路径 Java版本

力扣62 不同路径 Java版本

文章目录 题目描述代码 题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少…
阅读更多...
就说说Java初学者求职准备项目的正确方式

就说说Java初学者求职准备项目的正确方式

当下不少Java初学者也知道求职时项目的重要程度&#xff0c;但在简历上写项目和准备面试项目时&#xff0c;真有可能走弯路&#xff0c;这样的话&#xff0c;加重学习负担还是小事&#xff0c;还真有可能导致无法入职。 1 对于在校生和应届生来说&#xff0c;你去跑通个学习项…
阅读更多...
OrangePi AIpro (8T)使用体验，性能测试报告

OrangePi AIpro (8T)使用体验，性能测试报告

前言 这段时间收到了CSDN和香橙派的邀请&#xff0c;对OrangePi AIpro进行体验测评&#xff0c;在此感谢CSDN对我的信任&#xff0c;也感谢香橙派能做出如此优秀的开发板。 可喜可贺&#xff0c;周三晚上我收到了官方寄出的OrangePi AIpro。出于对国产芯片的好奇&#xff0c…
阅读更多...
5.29高通技术分享抢先看 | 2024高通边缘智能创新应用大赛公开课

5.29高通技术分享抢先看 | 2024高通边缘智能创新应用大赛公开课

火力全开&#xff01;2024高通边缘智能创新应用大赛首期公开课将在5月29日晚上8点炫酷启动&#xff01; 届时&#xff0c;来自大赛主办方高通技术公司的产品市场总监李骏捷和高级资深工程师李万俊将于云端聚首&#xff0c;带来一场关于边缘智能的前沿技术对话。 各位参赛者及…
阅读更多...
Java实现对PDF、纵向、横向页面添加自定义水印功能

Java实现对PDF、纵向、横向页面添加自定义水印功能

Java实现对PDF、纵向、横向页面添加自定义水印 效果图 -- 纵向 页面PDF使用到JAR Maven依赖版本效果图 -- 横向页面PDF 效果图 – 纵向 页面PDF 代码如下&#xff1a; 使用到JAR Maven依赖版本 <dependency><groupId>org.apache.pdfbox</groupId><artifa…
阅读更多...
基于SpringBoot的本科生考研率统计系统

基于SpringBoot的本科生考研率统计系统

基于SpringBoot的本科生考研率统计系统 一、开发技术二、功能模块三、代码结构四、数据库设计五、运行截图六、源码获取 一、开发技术 技术&#xff1a;SpringBoot、MyBatis-Plus、Redis、MySQL、Thymeleaf、Html、Vue、Element-ui。 框架&#xff1a;基于开源框架easy-admin开…
阅读更多...
【踩坑】编译opencv将python (for build) python2.7改为python3

【踩坑】编译opencv将python (for build) python2.7改为python3

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 出现问题 默认是2.7 解决方案 cmake时候添加&#xff1a; -D PYTHON_DEFAULT_EXECUTABLE$(which python3)
阅读更多...
Llama模型家族训练奖励模型Reward Model技术及代码实战（一）

Llama模型家族训练奖励模型Reward Model技术及代码实战（一）

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…
阅读更多...
2024-5-28 石群电路-16

2024-5-28 石群电路-16

2024-5-28&#xff0c;星期二&#xff0c;20:14&#xff0c;天气&#xff1a;晴&#xff0c;心情&#xff1a;晴。今天没有什么特别的事情发生&#xff0c;不过返校假期已经开始啦&#xff0c;和女朋友逛了街&#xff0c;吃了好吃的&#xff0c;学习也当然不能落下啦&#xff0…
阅读更多...
JQuery 入门

JQuery 入门

一、jQuery 概述 1、JavaScript 库 仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找就可以 JavaScript 库&#xff1a;即library&#xff0c;是一个封装好的特定的集合&#xff08;方法和函数&#xff09;。从封装一大堆函数的角度理解库&#xff0c;就是在…
阅读更多...
[nextjs]推荐几个很好看的模板网站

[nextjs]推荐几个很好看的模板网站

最近在做网站,折腾了 vue 框架,然后发现了 nextjs 框架,感觉这个做出来的网站配色很好看,然后又开始研究这个 网站配色好看是因为用的 tailwindcss,找网站过程中,发现了几个很好看的模板网站,在这里推荐下,或许你也能用得上 推荐第一个网站是: https://tailspark.co/ 有组件,也…
阅读更多...
广场舞团|基于SprinBoot+vue的广场舞团系统(源码+数据库+文档)

广场舞团|基于SprinBoot+vue的广场舞团系统(源码+数据库+文档)

广场舞团系统 目录 基于SprinBootvue的广场舞团系统 一、前言 二、系统设计 三、系统功能设计 1 系统功能模块 2 后台登录模块 5.2.1管理员功能模块 5.2.2社团功能模块 5.2.3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推…
阅读更多...
3步骤找回丢失文件！EasyRecovery让你轻松应对数据灾难！

3步骤找回丢失文件！EasyRecovery让你轻松应对数据灾难！

EasyRecovery&#xff1a;数据丢失的终结者&#xff0c;您的数字世界守护神 在数字化时代&#xff0c;数据已经成为我们生活的一部分。无论是个人照片、重要文件还是企业资料&#xff0c;数据都扮演着重要的角色。然而&#xff0c;意外删除、格式化、系统崩溃或病毒攻击等原因导…
阅读更多...
Discourse 使用 DiscourseConnect 来进行用户数据同步

Discourse 使用 DiscourseConnect 来进行用户数据同步

我们都知道 Discourse 的用户管理和设置都高度依赖电子邮件。 如果 Discourse 没有设置电子邮件 SMTP 的话&#xff0c;作为管理员是没有办法对用户邮箱进行修改并且通过验证的。 可以采取的办法是通过 Discourse 的 DiscourseConnect 来进行用户同步。 根据官方的说法&…
阅读更多...
【MySQL精通之路】InnoDB(4)-架构图

【MySQL精通之路】InnoDB(4)-架构图

下图显示了构成InnoDB存储引擎体系结构的内存和磁盘结构。有关每个结构的信息 请参阅“内存中的InnoDB结构”和“磁盘上的InnoDB结构”。
阅读更多...
C++ 常量和变量

C++ 常量和变量

1 常量 具体把数据写出来 2,3&#xff0c;4&#xff1b;1.2 1.3;“Hello world!”,“C” cout<<2015 常量&#xff1a;不能改变的量。 字面常量&#xff08;字面量、直接常量&#xff09;:直接写出的数据。 符号常量&#xff1a;用符号表示数据&#xff0c;但它一旦确定…
阅读更多...
TIM输出比较

TIM输出比较

一、OC&#xff08;Output Compare&#xff09;输出比较 1、输出比较可以通过比较CNT&#xff08;计数器&#xff09;与CCR&#xff08;捕获/比较寄存器&#xff09;寄存器值的关系&#xff0c;来对输出电平进行置1、置0或翻转的操作&#xff0c;用于输出一定频率和占空比的PW…
阅读更多...
最新文章

Copyright @ 2022~2023