javascript-基础知识点总结

目录

（一）基础语法

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.mfbz.cn/a/21554.html

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

相关文章

neovim下window的快捷切换

neovim下window的快捷切换

neovim下window的快捷切换 在使用emacs的时候&#xff0c;喜欢加插件window-numbering。 这样在分屏之后的emacs里&#xff0c;通过配置快捷键leaderwnumber 跳转到对应的windows, 而且该软件会在对应底部显示数字提示&#xff0c;非常方便。 另外:为什么不用快捷键leadernumb…
阅读更多...
【Linux系统】Linux进程信号详解

【Linux系统】Linux进程信号详解

Linux进程信号 0 引言1 认识信号1.1 什么是信号1.2 发送信号的本质1.3 信号的处理 2 信号的产生2.1 键盘产生2.2 调用系统函数向进程发送信号2.3 由软件条件产生信号2.4 硬件异常产生信号 3 信号的保存4 信号的处理5 总结 0 引言 本篇文章会从Linux信号的产生到信号的保存&…
阅读更多...
Linux上开启coredump

Linux上开启coredump

Linux上开启core dump Core dump&#xff08;核心转储&#xff09;是在程序崩溃时生成的一种文件&#xff0c;其中包含了程序在崩溃时的内存状态信息。它可以帮助程序员在调试程序时快速定位问题&#xff0c;并且是一种非常有用的调试工具。core dump的作用如下&#xff1a; 帮…
阅读更多...
【KD-Tree】基于k-d树的KNN算法实现

【KD-Tree】基于k-d树的KNN算法实现

文章目录 一、什么是KD-Tree&#xff1f;二、k-d树的结构三、k-d树的创建四、k-d树的应用五、KD-Tree的优缺点 例题JZPFAR 一、什么是KD-Tree&#xff1f; KD-Tree&#xff0c;又称&#xff08;k-dimensional tree&#xff09;&#xff0c;是一种基于二叉树的数据结构。它可以…
阅读更多...
机器学习项目实战-能源利用率 Part-2（探索性数据分析）

机器学习项目实战-能源利用率 Part-2（探索性数据分析）

Part-1部分的博客可见下&#xff1a; 机器学习项目实战-能源利用率 Part-1&#xff08;数据清洗&#xff09; 这部分进行的是探索性数据分析。 探索性数据分析 Exploratory Data Analysis 简单的说&#xff0c;就是画图来分析数据。 分析标签数据 data data.rename(colum…
阅读更多...
平抑风电波动的电-氢混合储能容量优化配置（Matlab代码实现）

平抑风电波动的电-氢混合储能容量优化配置（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Redis缓存架构详解

Redis缓存架构详解

文章目录 Redis缓存结构详解前言Redis 缓存架构redis 和db数据一致性先写db还是写redis如果是先写db,再删除缓存呢&#xff1f;延迟双删 简单的缓存,并发不高,没啥流量简单的缓存,并发高,但是存在redis和 Db 双写不一致,读写并发不一致问题解决方案 1解决方案 2解决方案 3读写锁…
阅读更多...
更高效便捷的开发体验——Cloud Studio 编辑器命令行工具

更高效便捷的开发体验——Cloud Studio 编辑器命令行工具

Cloud Studio 是一个云端在线开发平台&#xff0c;在 Cloud Studio 的控制台页面中&#xff0c;可以方便快捷创建或者打开一个工作空间。工作空间提供了在线编辑器给大家访问远端开发环境。大部分开发时间都与这个在线编辑器打交道&#xff0c;在线编辑器效果如下图所示&#x…
阅读更多...
由浅入深Netty简易实现RPC框架

由浅入深Netty简易实现RPC框架

目录 1 准备工作2 服务器 handler3 客户端代码第一版4 客户端 handler 第一版5 客户端代码 第二版6 客户端 handler 第二版 1 准备工作 这些代码可以认为是现成的&#xff0c;无需从头编写练习 为了简化起见&#xff0c;在原来聊天项目的基础上新增 Rpc 请求和响应消息 Data …
阅读更多...
chatgpt赋能Python-pythonendswith

chatgpt赋能Python-pythonendswith

Python endswith方法&#xff1a;介绍、用法和示例 在编程中&#xff0c;经常需要查找字符串是否以特定字符结尾。Python提供了一个方便易用的方法——endswith()。 什么是Python endswith()方法&#xff1f; Python endswith()方法是用于检查字符串是否以特定子字符串结尾的…
阅读更多...
【经验分享】一种高内聚低耦合的消息分发模块的设计与实现

【经验分享】一种高内聚低耦合的消息分发模块的设计与实现

【经验分享】一种高内聚低耦合的消息分发模块的设计与实现 又到了每天的open话题&#xff1a;【代码面对面】时刻&#xff0c;让我们一起在摸鱼中学习技术吧。今天的话题是嵌入式的消息分发模块&#xff0c;你会怎么设计和实现&#xff1f; 1 写在前面 老套路&#xff0c;我先…
阅读更多...
GitHub Copilot：神一样的代码助手

GitHub Copilot：神一样的代码助手

我肝肯定&#xff0c;很多很多小伙伴还不了解 Copilot 是什么&#xff0c;尤其是初学计算机的小伙伴&#xff0c;我这里普及一下吧&#xff01; GitHub Copilot 是一个基于 AI 的代码自动完成工具&#xff0c;由 GitHub 和 OpenAI 共同开发。 GitHub 和 OpenAI 想必大家都很清楚…
阅读更多...
从零制作操作系统——环境搭建以及HelloWorld

从零制作操作系统——环境搭建以及HelloWorld

从零制作操作系统——环境搭建以及HelloWorld 起因 最近在学习操作系统&#xff0c;尝试自己照着书搓一个出来。 环境搭建 基础环境 我们的操作系统在x86平台的Linux下进行编写和运行。编辑器用的VIM。 我的系统是Fedora 36&#xff0c;当然你也可以使用Ubuntu或者其他Li…
阅读更多...
IBM 创新方案+SNP数据转型助一汽大众实现数据平稳、高效迁移

IBM 创新方案+SNP数据转型助一汽大众实现数据平稳、高效迁移

近日&#xff0c;IBM 采用基于SNP Bluefield技术迁移的IBM Rapid Move创新数据迁移方案, 成功为一汽-大众实施了企业运营数据系统从 ECC 到 S/4 的升级项目。该项目系统切换耗时仅三天&#xff0c;不仅助客户高效、平稳迁移了系统数据&#xff0c;升级了数据底座&#xff0c;还…
阅读更多...
SpringBoot项目打包部署到Nginx【无需配置Nginx】

SpringBoot项目打包部署到Nginx【无需配置Nginx】

0.前置知识 springboot打包的项目共分为jar和war两种类型 jar包 jar类型项目使用SpringBoot打包插件打包时&#xff0c;会在打成的jar中 内置一个tomcat 的jar 所以我们可以使用jdk直接运行&#xff0c;将功能代码放到其内置的tomcat中运行。 war包 在打包时需要将 内置的tom…
阅读更多...
关于单目视觉 SLAM 的空间感知定位技术的讨论

关于单目视觉 SLAM 的空间感知定位技术的讨论

尝试关于单目视觉 SLAM 的空间感知定位技术的学习&#xff0c;做以调查。SLAM算法最早在机器人领域中提出&#xff0c;视觉SLAM又可以分为单目、双目和深度相机三种传感器模式&#xff0c;在AR应用中通常使用轻便、价格低廉的单目相机设备。仅使用一个摄像头作为传感器完成同步…
阅读更多...
prettier 使用详细介绍

prettier 使用详细介绍

prettier 使用详细介绍 prettier是一个代码格式化工具&#xff0c;可以通过自定义规则来重新规范项目中的代码&#xff0c;去掉原始的代码风格&#xff0c;确保团队的代码使用统一相同的格式。 安装 npm i prettier -Dyarn add prettier --dev创建一个prettierrc.*配置文件&…
阅读更多...
六级备考28天｜CET-6｜听力第二讲｜长对话满分技巧｜听写技巧｜2022年6月考题｜14:30~16:00

六级备考28天｜CET-6｜听力第二讲｜长对话满分技巧｜听写技巧｜2022年6月考题｜14:30~16:00

目录 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 (6)第六小题 (7)第七小题 (8)第八小题 扩展业务 expand business 4. 重点词汇 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 our guest is Molly Sundas, a university stud…
阅读更多...
learn C++ NO.5 ——类和对象（3）

learn C++ NO.5 ——类和对象（3）

日期类的实现 在前面类和对象的学习中&#xff0c;由于知识多比较多和碎&#xff0c;需要一个能够将之前所学知识融会贯通的东西。下面就通过实现日期类来对类和对象已经所学的知识进行巩固。 日期类的基本功能&#xff08;.h文件&#xff09; //Date.h//头文件内容 #includ…
阅读更多...
【数据结构】广度优先遍历（BFS）模板及其讲解

【数据结构】广度优先遍历（BFS）模板及其讲解

&#x1f38a;专栏【数据结构】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【勋章】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; 目录 &#x1f381;定义 &#x1f381;遍历方法 &#x1f381;根…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站