JavaScript快速入门

JavaScript简介

JavaScript（简称：js）是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互。

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

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

ECMAScript6（ES6）是最新的JavaScript版本（发布于2015年）。

JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中

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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello js</title><script> alert("你好，js")</script>
</head>
<body></body>
</html>

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

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

<script>标签不能自闭合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello js</title><script src="./js/demo1.js"></script>
</head>
<body></body>
</html>
alert("你好，js");

JavaScript书写语法

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

每行结尾的分号可有可无

注释：单行注释：//注释内容

           多行注释：/*注释内容*/

大括号表示代码块

if (count==3) {alert(count);
}

JavaScript输出语句

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello js</title></head>
<body></body>
<script>window.alert("你好js")
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello js</title></head>
<body></body>
<script>document.write("你好js")
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello js</title></head>
<body></body>
<script>console.log("你好js")
</script>
</html>

 JavaScript变量

JavaScript中的var关键字（variable的缩写）来声明变量

JavaScript是一门弱类型语言，变量可以存放部同类型的值

变量名需要遵循如下规则：

       组成字符可以是任何字母、数字、下划线（_）或者美元符号（$）

       数字不能开头

       建议使用驼峰命名

特点：

1.作用域大，全局变量

2.可以重复定义

ECMAScript6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

ECMAScript6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变

 JavaScript数据类型

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

原始类型：

number：数字（整数，小数，NAN）

string：字符串，单双引皆可

boolean：布尔

null：对象为空

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

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

var a=20;
alert(typeof a);

JavaScript运算符

特殊：===

          ==与===

          ==会进行类型转换，===不会进行类型转换

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

类型转换：

字符串类型转为数字：

将字符串字面值转为数字，如果字面值不是数字，则转为NaN

其他类型转换为boolean：

Number：0和NaN为flase，其他均转为true

String：空字符为false，其他均转为true

Null和undefined：均转为false

JavaScript函数

介绍：函数是被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键字定义，语法为：

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

 注意：

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

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

调用：函数名称（实际参数列表）

//定义
function add(a,b){return a+b;
}
//调用
var result=add(10,20);
alert(result)

JavaScript对象

Array

JavaScript中Array对象用于定义数组

定义：var 变量名=new[元素列表]；

           var 变量名=[元素列表]；

访问

arr[索引]=值；

注意事项：JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据

属性

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

方法：forEach（）遍历数组中的每个有值的元素，并调用一次传入的函数

           push（）将新元素添加到数组的末尾，并返回新的长度

           splice（）从数组中删除元素

箭头函数（ES6）：是用来简化函数定义语法的，具体形式为：（...）=>{...},如果需要给箭头函数起名字：var xxx=（...）=>{...}

 String

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

var 变量名=new String（"..."）

var 变量名="..."

属性：

length：字符串的长度

方法：

charAt（）：返回在指定位置的字符

indexOf（）：检索字符串

trim（）：去除字符串中两边的字符

substring（）：提取字符串中两个指定的索引号之间的字符

javaScript自定义对象

定义格式：

var 对象名={

属性名1：属性值1，

函数名称：function（形参列表）{  }

}；

调用格式：

对象名.属性名；

对象名.函数名（）；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>var user={name:"tom",age:10,gender:"male",eat(){alert("用膳~");}}alert(user.name);user.eat();</script>
</html>

JSON-介绍

概念：JavaScript Object Notation，JavaScript对象标记法

           JSON是通过JavaScript对象标记法书写的文本

           由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输 

JSON-基础语法

定义

         var 变量名='{"key1":value1,"key2":value2}'

value的数据类型为：

                数字（整数或浮点数）

                字符串（在双引号中）

                逻辑值（true或false）

                数组（在方括号中）

                对象（在花括号中）

                null

JSON字符串转为JS对象

var jsObject=JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>var jsonstr='{"name":"tom","age":24,"addr":["南京","北京"]}';/*   alert(jsonstr.name); */var obj=JSON.parse(jsonstr);alert(obj.name);alert(JSON.stringify(obj)) ;</script>
</html>

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

组成：

                window：浏览器窗口对象

                Nanifaeor：浏览器对象

                Screen：屏幕对象

                History：历史记录对象

                Location：地址栏对象

Window

介绍：浏览器窗口对象

获取：直接使用window，其中window可以省略

属性：

                history：对History对象的只读引用

                location：用于窗口或框架的Location对象

                navigation：对Navigation对象的只读引用

方法：

                alert（）：显示有一段消息和一个确认按钮的警告框

                confirm（）：显示带有消息以及确认按钮和取消按钮的对话框

                setlnteval（）：按照指定的周期来调用函数或计算表达式

                setTimeout（）：在指定的毫秒数后调用或计算表达式

Location

介绍：地址栏对象

获取：使用window.location获取，其中window，可以省略

属性：href：设置或返回完整的URL

DOM

概念：Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

JavaScript通过DDM，就能够对HTML进行操作：

改变HTML元素的内容

改变HTML元素的样式

对HTML DOM事件做出反应

添加和删除HTML元素

DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1.Core DOM-所以文档类型的标准模型

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2.XML DOM－XML文档的标准模型

3.HTML DOM-HTML文档的标准模型

        image：<img>

        Button：<input type='button'>

HTML中Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

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

        1.根据id属性值获取，返回单个Element对象

        var h1=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');

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="h1" src="https://www.toopic.cn/public/uploads/small/163756299623163756299625.png" ><br><br><div class="cls">计算机教育</div><br><div class="cls">java教育</div><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏</body>
<script>// 获取元素// 第一种var img= document.getElementById('h1');alert(img);
//    第二种document.getElementsByTagName('div');for (let i = 0; i < div.length; i++) {alert(div[i]);}// 第三种var ins= document.getElementsByTagName('hobby');for (let i = 0; i < ins.length; i++) {alert(ins[i]);        }// 第四种var ins= document.getElementsByClassName('cls');;for (let i = 0; i < ins.length; i++) {alert(ins[i]);        }</script>
</html>

DOM案例：

1.切换图片

2.所以div标签后加good

3.所以复选框为选中状态

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="h1" src="https://www.toopic.cn/public/uploads/small/163756299623163756299625.png" ><br><br>;<div class="cls">计算机教育</div><br>;<div class="cls">java教育</div><br>;<input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏</body>
<script>var img= document.getElementById('h1');img.src="https://pic1.zhimg.com/v2-36d4626179b21ede507f08593329aa22_r.jpg?source=1940ef5c";var divs= document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML+="<Font color='red'>good</Font>";}var ins= document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {const check = ins[i];check.checked=true;}
</script>
</html>

js事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：

        按钮被点击

        鼠标移动到元素上

        按下键盘按钮

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body>
<script>function on(){alert("1被点了");}document.getElementById('btn2').onclick=function(){alert("2也被点了");}</script>
</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>
</head>
<body><img id="light" src="https://picx.zhimg.com/80/v2-b442793f521ca651ca2afe7a312a29ef_1440w.webp?source=1940ef5c" width="600"><br><input type="button" value="变身" onclick="on()"><input type="button" value="恢复" onclick="off()"><br><br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br><br><input type="checkbox" name="hobby" >电影<input type="checkbox" name="hobby" >游戏<input type="checkbox" name="hobby" >旅游<br><input type="button" value="全选" onclick="checkAll()"><input type="button" value="反选" onclick="reverse()">
</body><script>function on(){var img= document.getElementById("light");img.src="https://picx.zhimg.com/80/v2-ed1f03a985265001cff73c27f0bb5a7d_1440w.webp?source=1940ef5c"}function off(){var img= document.getElementById("light");img.src="https://picx.zhimg.com/80/v2-b442793f521ca651ca2afe7a312a29ef_1440w.webp?source=1940ef5c"}function lower(){var input= document.getElementById("name");input.value=input.value.toLowerCase();}function upper(){var input= document.getElementById("name");input.value=input.value.toUpperCase();}function checkAll(){var ins= document.getElementsByName("hobby")for (let i = 0; i < ins.length; i++) {const element = ins[i];element.checked=true}}function reverse(){var ins= document.getElementsByName("hobby")for (let i = 0; i < ins.length; i++) {const element = ins[i];element.checked=false}}</script>
</html>

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

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

相关文章

深度学习6：自然语言处理-Natural language processing | NLP

深度学习6：自然语言处理-Natural language processing | NLP

目录 NLP 为什么重要&#xff1f; 什么是自然语言处理 – NLP NLP 的2大核心任务 自然语言理解 – NLU|NLI 自然语言生成 – NLG NLP(自然语言处理) 的5个难点 NLP 的4个典型应用 NLP 的 2 种途径、3 个核心步骤 总结 自然语言处理 NLP 为什么重要&#xff1f; “语言…
阅读更多...
stm32之USART(总结)

stm32之USART(总结)

串行通信 UART串口内部结构示意图 普中科技的详细介绍 中断知识补充 代码 #ifndef __USART_H #define __USART_H #include "stdio.h" #include "stm32f10x_usart.h" #define USART1_REC_LEN 200 //定义最大接收字节数 200extern u8 USART1_RX_BUF[US…
阅读更多...
Moonbeam生态跨链互操作项目汇总

Moonbeam生态跨链互操作项目汇总

立秋已过&#xff0c;今年的夏天已经接近尾声&#xff0c;即将迎来凉爽的秋天。Moonbeam生态一同以往持续成长&#xff0c;在8月也举办了不少活动、完成集成合作以及协议更新。让我们一同快速了解Moonbeam生态项目近期发生的大小事件吧&#xff01; Moonwell Moonwell是一个建…
阅读更多...
UE4如何连接dmx---摇头矩阵灯具的创建

UE4如何连接dmx---摇头矩阵灯具的创建

UE4如何连接dmx---摇头矩阵灯具的创建 开始创建库&#xff01; 然后我们开始创建多少个灯珠&#xff08;注意了&#xff1a;这是矩阵灯&#xff0c;是看灯珠的&#xff09; 那么这里我们创建6X6灯珠 下面设置灯珠的属性&#xff0c;灯珠有什么属性呢&#xff0c;只有颜色属性&…
阅读更多...
解除用户账户控制提醒

解除用户账户控制提醒

解决用户账户控制提醒 1. 前言2. 解决用户账户控制提醒2.1 控制面板2.2 注册表2.3 UAC服务 结束语 1. 前言 当我们使用电脑时&#xff0c;有时进行安装应用或者打开应用时&#xff0c;总会弹出一个提示框&#xff0c;要选择点击是否允许程序运行&#xff1b; 系统经常弹出用户…
阅读更多...
软考A计划-系统集成项目管理工程师-小抄手册(共25章节)-上

软考A计划-系统集成项目管理工程师-小抄手册(共25章节)-上

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…
阅读更多...
Cocos独立游戏开发框架中的事件管理器

Cocos独立游戏开发框架中的事件管理器

引言 本系列是《8年主程手把手打造Cocos独立游戏开发框架》&#xff0c;欢迎大家关注分享收藏订阅。在独立游戏开发中&#xff0c;事件管理器是一个不可或缺的组件。它为开发者提供了一种灵活的方式来处理游戏内部各种状态变化和用户交互&#xff0c;实现模块之间的解耦和通信…
阅读更多...
RabbitMQ---订阅模型-Direct

RabbitMQ---订阅模型-Direct

1、 订阅模型-Direct • 有选择性的接收消息 • 在订阅模式中&#xff0c;生产者发布消息&#xff0c;所有消费者都可以获取所有消息。 • 在路由模式中&#xff0c;我们将添加一个功能 - 我们将只能订阅一部分消息。 例如&#xff0c;我们只能将重要的错误消息引导到日志文件…
阅读更多...
数据结构（Java实现）-优先级队列(堆)

数据结构（Java实现）-优先级队列(堆)

队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队 列在这种情况下&#xff0c;数据结构应该提供两个最基本的操作&#xff0c;一个是返回最高优先级对象&#xff0c;一个是添加新的对象。 这种数据结构就…
阅读更多...
微信小程序发布迭代版本后如何提示用户强制更新新版本

微信小程序发布迭代版本后如何提示用户强制更新新版本

在点击小程序发布的时候选择&#xff0c;升级选项 之前用户使用过的再打开小程序页面就会弹出升级弹窗modal
阅读更多...
常见的移动端布局

常见的移动端布局

流式布局&#xff08;百分比布局&#xff09; 使用百分比、相对单位&#xff08;如 em、rem&#xff09;等来设置元素的宽度&#xff0c;使页面元素根据视口大小的变化进行调整。这种方法可以实现基本的自适应效果&#xff0c;但可能在不同设备上显示不一致。 <!DOCTYPE ht…
阅读更多...
日志系统——性能测试

日志系统——性能测试

日志系统项目已经编写完成&#xff0c;在本节完成性能测试之后就正式结束了 测试代码如下 #include "../logs/mjwlog.h" #include <vector> #include <thread>//参数&#xff1a;日志器名称&#xff0c;线程数量&#xff0c;输出日志条数&#xff0c;单…
阅读更多...
SpringBoot+mybatis+pgsql多个数据源配置

SpringBoot+mybatis+pgsql多个数据源配置

一、配置文件 jdk环境&#xff1a;1.8 配置了双数据源springbootdruidpgsql&#xff0c;application.properties配置修改如下&#xff1a; #当前入库主数据库 spring.primary.datasource.typecom.alibaba.druid.pool.DruidDataSource spring.primary.datasource.driver-class…
阅读更多...
1.Flink源码编译

1.Flink源码编译

目录 1.环境版本 1.1 jdk 1.2.maven 1.3.node 1.4.scala 2.下载flink源码 3.编译源码 4.idea打开flink源码 5.运行wordcount 1.环境版本 软件地址 链接&#xff1a;https://pan.baidu.com/s/1ZxYydR8rBfpLCcIdaOzxVg 提取码&#xff1a;12xq 1.1 jdk 1.2 maven 1.…
阅读更多...
基于Red Hat Enterprise Linux 7操作系统的PostgresSql15的备份恢复（实践笔记）

基于Red Hat Enterprise Linux 7操作系统的PostgresSql15的备份恢复（实践笔记）

零、前言 本文是基于阿里云ECS服务器进行的实践操作&#xff0c;操作系统版本&#xff1a;Red Hat Enterprise Linux 7 PG数据库版本&#xff1a;PostgresSql 15 PG安装方式&#xff1a;yum 由于本人新接触pg数据&#xff0c;本次也是出于好奇&#xff0c;就对pg数据库的pg_du…
阅读更多...
MTK6833_MT6833核心板_天玑700安卓5G核心板规格性能介绍

MTK6833_MT6833核心板_天玑700安卓5G核心板规格性能介绍

MTK6833安卓核心板采用台积电 7nm 制程的5G SoC&#xff0c;2*Cortex-A766*Cortex-A55架构&#xff0c;搭载Android12.0操作系统&#xff0c;主频最高达2.2GHz 。内置 5G 双载波聚合技术&#xff08;2CC&#xff09;及双 5G SIM 卡功能&#xff0c;实现优异的功耗表现及实时连网…
阅读更多...
Elasticsearch(十四)搜索---搜索匹配功能⑤--全文搜索

Elasticsearch(十四)搜索---搜索匹配功能⑤--全文搜索

一、前言 不同于之前的term。terms等结构化查询&#xff0c;全文搜索首先对查询词进行分析&#xff0c;然后根据查询词的分词结果构建查询。这里所说的全文指的是文本类型数据&#xff08;text类型&#xff09;,默认的数据形式是人类的自然语言&#xff0c;如对话内容、图书名…
阅读更多...
VictoriaLogs：一款超低占用的 ElasticSearch 替代方案

VictoriaLogs：一款超低占用的 ElasticSearch 替代方案

image.png 背景 前段时间我们想实现 Pulsar 消息的追踪流程&#xff0c;追踪实现的效果图如下&#xff1a; 实现其实比较简单&#xff0c;其中最重要的就是如何存储消息。 消息的读取我们是通过 Pulsar 自带的 BrokerInterceptor 实现的&#xff0c;对这个感兴趣的朋友后面会单…
阅读更多...
用大白话来讲讲多线程的知识架构

用大白话来讲讲多线程的知识架构

感觉多线程的知识又多又杂&#xff0c;自从接触java&#xff0c;就在一遍一遍捋脉络和深入学习。现在将这次的学习成果展示如下。 什么是多线程&#xff1f; 操作系统运行一个程序&#xff0c;就是一个线程。同时运行多个程序&#xff0c;就是多线程。即在同一时间&#xff0…
阅读更多...
python爬虫的js逆向入门到进阶教程文章分享汇总~持续更新

python爬虫的js逆向入门到进阶教程文章分享汇总~持续更新

目录 一、内容介绍二 、专栏内容-持续更新1、JS逆向入门2、Js逆向进阶3、爬虫基础知识4、工具与安装5、漫星内容分享 三、星球使用四、b站up主视频推荐 一、内容介绍 二 、专栏内容-持续更新 1、JS逆向入门 2023-08-25》11.常见加密>xx音乐RSA加密 https://articles.zsxq.c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023