javascript-基础知识点总结

news2025/11/4 18:31:14

目录

（一）基础语法

1、javaScript引入方式

2、变量与常量

3、数据类型

typeof操作符

4、运算符

5、输出函数

6、类型转化

7、转移字符

8、注释

（二）流程控制

1、选择结构

switch

2、循环结构

for

（三）函数

1、函数的定义

2、函数的调用

（四）字符串操作

（五）数组操作

（六）时间对象:Date

1、实例化对象

2、操作年、月、日

3、 操作时、分、秒

4、获取星期

（七）数学对象

1、Math对象的属性:

 2、Math对象的方法

（一）基础语法

1、javaScript引入方式

JavaScript的3种引入方式：

  • 外部JavaScript
  • 内部JavaScript
  • 元素事件JavaScript

外部JavaScript：指的是把HTML代码和JavaScript代码单独放在不同的文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1.在head中引入-->
    <script src=”index.js”></script>
</head>
<body>
    <!--2.在body中引入-->
    <script src="index.js"></script>
</body>
</html>

内部JavaScript：指的是把HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在<script></script>标签对内

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1.在head中引入-->
    <script>
          ……
    </script>
</head>
<body>
    <!--2.在body中引入-->
    <script>
          ……
    </script>
</body>
</html>

元素事件JavaScript：指的是在元素的“事件属性”中直接编写JavaScript或调用函数

2、变量与常量

变量：

在JavaScript中，如果想要使用一个变量，我们一般需要两步：

  • 第1步：变量的声明
  • 第2步：变量的赋值

变量命名，我们需要遵循以下2个方面的原则:

  • 变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$
  • 变量不能是系统关键字和保留字
var 变量名=值；

常量：定下来的，不能随便改变的数

var DEBUG = 1

 

3、数据类型

js有5大数据类型：

关键字说明
number数值型：包括整数和浮点数
boolean布尔类型：true / false
string字符串：包含字符和字符串。可以使用双引号或单引号
object对象类型：JS内置对象或自定义对象
undefined未初始化，未知类型

js是弱类型语言，定义一个变量可以赋值为不同的数据类型

java与js数据类型对比
数据类型Java中定义变量JS中定义变量
整数int i = 5;var i = 5;
浮点数float f = 3.14; 或 double d=3.14;var f = 3.14; 或 var d=3.14;
布尔boolean b = true;var b = true;
字符char c = ‘a’;var c = ‘a’;
字符串String str = “abc”;var str = “abc”;

typeof操作符

typeof用于判断某个变量数据类型，返回这种数据类型的名字

写法一：
typeof 变量名 
写法二
typeof(变量名)

4、运算符

5、输出函数

document.write("输出内容")

6、类型转化

在JavaScript中，共有两种类型转换。隐式类型转换。显式类型转换。在JavaScript中，共有两种类型转换

  • 隐式类型转换：自动进行的类型转换
  • 显式类型转换：需要手动用代码强制进行的类型转换

7、转移字符

8、注释

语言注释语法
HTML<!-- 注释 -->
CSS/* 注释 */
JavaScript// 单行注释 /* 多行注释 */

（二）流程控制

1、选择结构

if语句

1、单向选择
if（条件）
{
     ……
}
2、双向选择：
if（条件）
{
     ……
}
else
{
     ……
}

3、多向选择
if（条件1）
{
     //当条件1为true时执行的代码
}
else if（条件2）
{
     //当条件2为true时执行的代码
}
else
{
     //当条件1和条件2都为false时执行的代码
}

switch

switch（判断值）
{
    case 取值1:
         语块1;break;
    case 取值2:
         语块2;break;
  ……
  case 取值n:
        语块n;break;
  default:
        语句块n+1;
}

2、循环结构

while

while（条件）
{
    //当条件为true时，循环执行
}

do...while

do
{
     ……
}while（条件）;

for

for（初始化表达式；条件表达式；循环后操作）
{
     ……
}

（三）函数

1、函数的定义

function 函数名（参数1 ,参数2 ,...,参数n）
{
     ……
}

2、函数的调用

JavaScript的函数调用方式有很多，常见的有以下4种

  • 直接调用
  • 在表达式中调用
  • 在超链接中调用
  • 在事件中调用

直接调用

函数名（实参1，实参2,...，实参n）;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         //定义函数
         function getMes（　）
         {
             document.write（"愿你眼里长着太阳，笑容全是坦荡。"）;
         }
         //调用函数
         getMes（　）;
    </script>
</head>
<body>
</body>
</html>

在表达式中调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         //定义函数
         function addSum（a,b）
         {
             var sum=a+b;
             return sum;
         }
         //调用函数
         var n=addSum（1,2）+100;
         document.write（n）;
    </script>
</head>
<body>
</body>
</html>

在超链接中调用

<a href="javascript：函数名"></a>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         function expressMes（　）
         {
             alert（"我在学习js"）;
         }
    </script>
</head>
<body>
    <a href="javascript:expressMes（　）">点击学习</a>
</body>
</html>

在事件中调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         function alertMes（　）
         {
             alert（"我在学习js"）;
         }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes（　）" value="提交" />
</body>
</html>

（四）字符串操作

  • 获取字符串长度：字符串名.length
  • 大写转换小写：字符串名.toLowerCase()
  • 小写转换大写：字符串名.toUpperCase()
  •  获取某一个字符：字符串名.charAt（n）
  • 截取字符串：字符串名.substring（start,end）
  •  替换字符串： 字符串名.replace（原字符串，替换字符串）
  • 分割字符串：字符串名.split（"分割符"）
  • 检索字符串首次的位置：字符串名.indexOf（指定字符串）
  • 检索字符串最后一次出现的位置：字符串名.lastIndexOf（指定字符串）

（五）数组操作

1、数组的创建

var 数组名=new Array（元素1,元素2,……,元素n）;　　//完整形式
var 数组名=[元素1,元素2,……,元素n];　　　　　　　//简写形式

2、数组的获取 ：数组名[索引值]

3、数组的赋值：数组名[索引值]=值

4、获取数组长度：数组名.length

5、截取数组某部分：数组名.slice（start,end）

6、添加数组元素：

  • 赋值方式
  • 在数组开头添加元素：unshift（ ） 
    数组名.unshift（新元素1，新元素2,……，新元素n）
  •  在数组结尾添加元素：push（ ） 
    数组名.push（新元素1，新元素2,……，新元素n）

7、删除数组元素

  • 后面元素依次覆盖
  • 删除数组中第一个元素：shift（ ）
  • 删除数组最后一个元素：pop（ ）

8、比较数组大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         //定义一个升序函数
         function up（a,b）
         {
             return a-b;
         }
         //定义一个降序函数
         function down（a,b）
         {
             return b-a;
         }
         //定义数组
         var arr=[3,9,1,12,50,21];
         arr.sort（up）;
         document.write（"升序："+arr.join（"、"）+"<br/>"）;
         arr.sort（down）;
         document.write（"降序："+arr.join（"、"））;
    </script>
</head>
<body>
</body>
</html>

（六）时间对象:Date

1、实例化对象

var日期对象名=new Date（）;

2、操作年、月、日

获取年、月、日：

 设置年、月、日：

  • 设置年月日：时间对象.setFullYear（year,month,day）;
  • 设置月日：时间对象.setMonth（month,day）;
  • 设置日：时间对象.setDate（day）;

3、 操作时、分、秒

 获取时、分、秒

 设置时、分、秒

  • 设置时、分、秒、毫秒：时间对象.setHours（hour,min,sec,millisec）;
  • 设置分、秒、毫秒：时间对象.setMinutes（min,sec,millisec）;
  • 设置秒、毫秒：时间对象.setSeconds（sec,millisec）;

4、获取星期

时间对象.getDay();

（七）数学对象

1、Math对象的属性:

 2、Math对象的方法

random（ ）方法来生成0～1的一个随机数。random，就是“随机”的意思。需要注意的是，这里的0～1包含0但不包含1，也就是[0, 1）

随机生成某个范围内的“任意数”：

  • （1）Math.random（ ）*m表示生成0～m的随机数，如“Math.random（ ）*10”表示生成0～10的随机数。
  • （2）Math.random（ ）*m+n表示生成n～m+n的随机数，如“Math.random（ ）*10+8”表示生成8～18的随机数。
  • （3）Math.random（ ）*m-n表示生成-n～m-n的随机数，如“Math.random（ ）*10-8”表示生成-8～2的随机数。
  • （4）Math.random（ ）*m-m表示生成-m～0的随机数，如“Math.random（ ）*10-10”表示生成-10～0的随机数。

随机生成某个范围内的“整数”：

  • Math.floor（Math.random（　）*（m+1））：生成0到m之间的随机整数
  • Math.floor（Math.random（　）*m）+1：生成1到m之间的随机整数
  • Math.floor（Math.random（　）*（m-n+1））+n：生成n到m之间的随机整数

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

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

相关文章

简单网络管理协议 SNMP

简单网络管理协议 SNMP

文章目录 1 概述1.1 结构1.2 操作 2 SNMP2.1 报文格式2.2 五大报文类型 3 扩展3.1 网工软考真题 1 概述 #mermaid-svg-95KMV1m3prKJgwv1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-95KMV1m3prKJgwv1 .error-ico…
阅读更多...
【云原生】K8sYaml文件详细

【云原生】K8sYaml文件详细

K8sYaml文件详细 一、Kubernetes支持的文件格式1、yaml和json的主要区别2、yaml语言格式 二、YAML操作1、查看API资源版本标签2、编写资源配置清单3、创建资源对象4、查看创建的pod5、创建service服务对外提供访问并测试6、创建资源对象7、测试访问 三、Kubernetes中的Port四、…
阅读更多...
chatgpt赋能Python-new_init_python

chatgpt赋能Python-new_init_python

新版Python中的__new__和__init__方法 Python作为一种高级编程语言&#xff0c;具有简单易学、代码可读性高和编写效率高等特点&#xff0c;因此越来越受到程序员们的青睐。其中&#xff0c;__new__和__init__方法是Python中的两个非常重要的方法&#xff0c;它们在实例化一个…
阅读更多...
chatgpt赋能Python-matplotlib绘制雷达图

chatgpt赋能Python-matplotlib绘制雷达图

Matplotlib 绘制雷达图 在数据分析和可视化领域&#xff0c;雷达图是一种常用的图表类型。Matplotlib 是一个用于绘制 2D 图形的 Python 库&#xff0c;也可以用于绘制雷达图。本文将介绍如何使用 Matplotlib 绘制雷达图&#xff0c;包括数据准备、绘图方式和样式设置。 数据…
阅读更多...
改进YOLOv5 | 在 C3 模块中添加【SE】【CBAM】【 ECA 】【CA】注意力机制 | 附详细结构图

改进YOLOv5 | 在 C3 模块中添加【SE】【CBAM】【 ECA 】【CA】注意力机制 | 附详细结构图

文章目录 1. SE 注意力模块1.1 原理1.2 C3_SE 代码2. CBAM 注意力模块2.1 原理2.2 C3_CBAM 代码3. CA 注意力模块3.1 原理3.2 C3_CA 代码4. ECA 注意力模块4.1 原理4.2 C3_ECA 代码5. 添加方式💡6. C3_Attention 结构图 🍀7. 相关推荐🍀
阅读更多...
Ada语言学习（1）Basic Knowledge

Ada语言学习（1）Basic Knowledge

文章目录 说在前头命名注释数字变量变量类型signed integersEnumerationsFloating Points 类型重用&#xff08;继承&#xff09;类型转换 运算符属性&#xff08;Attributes&#xff09;练习 说在前头 本系列教程将会通过提问的方式来完成整个学习过程&#xff0c;因为当你能…
阅读更多...
瑞吉外卖 - 公共字段自动填充功能（10）

瑞吉外卖 - 公共字段自动填充功能（10）

某马瑞吉外卖单体架构项目完整开发文档&#xff0c;基于 Spring Boot 2.7.11 JDK 11。预计 5 月 20 日前更新完成&#xff0c;有需要的胖友记得一键三连&#xff0c;关注主页 “瑞吉外卖” 专栏获取最新文章。 相关资料&#xff1a;https://pan.baidu.com/s/1rO1Vytcp67mcw-PD…
阅读更多...
每日一练 | 网络工程师软考真题 Day3

每日一练 | 网络工程师软考真题 Day3

1、以下图的两种编码方案分别是 。 A&#xff0e;①差分曼彻斯特编码&#xff0c;②双相码 B&#xff0e;①NRZ编码&#xff0c;②差分曼彻斯特编码 C&#xff0e;①NRZ-I编码&#xff0c;②曼彻斯特编码 D&#xff0e;①极性码&#xff0c;②双极性码 2、假设模拟…
阅读更多...
windows下安装emsdk

windows下安装emsdk

先从github上下载emsdk工程&#xff1a; # Get the emsdk repo git clone https://github.com/emscripten-core/emsdk.git# Enter that directory cd emsdkgit pull 更新到最新代码 clone 工程可以在 git bash here 命令行下&#xff1a; 执行下面的指令用cmd命令行&#xf…
阅读更多...
chatgpt赋能Python-numpy_加速

chatgpt赋能Python-numpy_加速

介绍 NumPy是Python编程语言的数值计算扩展库。它包括一个强大的N维数组对象和用于处理这些数组的函数。NumPy是一个基于Python的免费开源软件项目&#xff0c;由社区驱动。这个库提供了一种高效的存储和处理大型矩阵数据的方式&#xff0c;同时也提供了非常高效的处理大量数据…
阅读更多...
chatgpt赋能Python-jinja_python

chatgpt赋能Python-jinja_python

Jinja Python介绍及SEO优化 Jinja是一个流行的Python模板引擎&#xff0c;它允许开发人员使用简单的语法来生成动态内容。在本文中&#xff0c;我们将介绍Jinja的基础知识&#xff0c;并探讨如何将其应用于搜索引擎优化。 Jinja Python介绍 Jinja是Python语言的一种模板引擎…
阅读更多...
Java面向对象程序设计实验报告（实验一 面向对象基础练习）

Java面向对象程序设计实验报告（实验一 面向对象基础练习）

✨作者&#xff1a;命运之光 ✨ 专栏&#xff1a;Java面向对象程序设计实验报告 目录 ✨一、需求分析 ✨二、概要设计 ✨三、详细设计 ✨四、调试分析 ✨附录&#xff1a;源代码&#xff08;带注释&#xff09; 实验一 面向对象基础练习 实验环境&#xff1a;EclipseJDK …
阅读更多...
MindFusion.JavaScript Pack 2023 crack

MindFusion.JavaScript Pack 2023 crack

MindFusion.JavaScript Pack 2023 crack 径向树布局-添加了新的类&#xff0c;它将树级别排列在围绕根的同心圆中。 套索缩放工具-控件现在支持使用套索工具进行缩放的几种方法&#xff1a; 可以将行为属性设置为“缩放”以始终绘制缩放套索。 用户可以使用修改键和鼠标左键绘制…
阅读更多...
如何用Nginx快速搭建个人下载站？

如何用Nginx快速搭建个人下载站？

1.开篇 我们在下载Nginx的时候&#xff0c;发现其下载地址遵循一定的规则。 发现其下载地址为&#xff1a;https://nginx.org/download/nginx-1.24.0.tar.gz&#xff0c; 可以猜测出其下载的主页为&#xff1a;https://nginx.org/download 果然&#xff0c;该页面提供了各个版…
阅读更多...
chatgpt赋能Python-num_python

chatgpt赋能Python-num_python

NumPy简介&#xff1a;为什么它对数据科学如此重要&#xff1f; 什么是NumPy&#xff1f; NumPy是一种Python库&#xff0c;帮助程序员在Python中进行高度优化的科学计算。NumPy提供了许多独特的工具&#xff0c;以帮助数据科学家和工程师进行线性代数、离散傅立叶变换和其他…
阅读更多...
三十七、微服务保护

三十七、微服务保护

1、初识Sentinel 1.1雪崩问题 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。 解决雪崩问题的常见方式有四种&#xff1a; 超时处理&#xff1a;设定超时时间&#xff0c;请求超过一定时间没有响应就返回错误信息&am…
阅读更多...
DEJA_VU3D - Cesium功能集 之 109-三角形（标绘+编辑）

DEJA_VU3D - Cesium功能集 之 109-三角形（标绘+编辑）

前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有差不多实现小140个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（每篇博文都会奉上完整demo的源代码…
阅读更多...
HTTP第15讲——HTTP的连接管理

HTTP第15讲——HTTP的连接管理

短连接 HTTP 协议最初&#xff08;0.9/1.0&#xff09;是个非常简单的协议&#xff0c;通信过程也采用了简单的“请求 - 应答”方式。 它底层的数据传输基于 TCP/IP&#xff0c;每次发送请求前需要先与服务器建立连接&#xff0c;收到响应报文后会立即关闭连接。 因为客户端与…
阅读更多...
chatgpt赋能Python-numpy_数据归一化

chatgpt赋能Python-numpy_数据归一化

Numpy 数据归一化&#xff1a;介绍和原理 随着大数据和机器学习的发展&#xff0c;数据预处理变得越来越重要。对于数据进行标准化和归一化是其中的一项常见操作。本文将介绍numpy中的数据归一化&#xff0c;包括其原理和实现方法。 什么是数据归一化&#xff1f; 在数据处理…
阅读更多...
Spring AOP的概念和使用

Spring AOP的概念和使用

什么是AOP AOP是一种思想&#xff0c;它叫做面向切面编程&#xff0c;简单的来说就是对某一类事请做集中处理。比如说&#xff1a;登录效验功能&#xff0c;在使用AOP之前&#xff0c;我们进行登录效验需要在每个方法中写一遍登录效验的代码&#xff1b;使用AOP后&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023