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之间的随机整数

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

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

相关文章

neovim下window的快捷切换

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

【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上开启core dump Core dump&#xff08;核心转储&#xff09;是在程序崩溃时生成的一种文件&#xff0c;其中包含了程序在崩溃时的内存状态信息。它可以帮助程序员在调试程序时快速定位问题&#xff0c;并且是一种非常有用的调试工具。core dump的作用如下&#xff1a; 帮…

【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-1部分的博客可见下&#xff1a; 机器学习项目实战-能源利用率 Part-1&#xff08;数据清洗&#xff09; 这部分进行的是探索性数据分析。 探索性数据分析 Exploratory Data Analysis 简单的说&#xff0c;就是画图来分析数据。 分析标签数据 data data.rename(colum…

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

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

Redis缓存架构详解

文章目录 Redis缓存结构详解前言Redis 缓存架构redis 和db数据一致性先写db还是写redis如果是先写db,再删除缓存呢&#xff1f;延迟双删 简单的缓存,并发不高,没啥流量简单的缓存,并发高,但是存在redis和 Db 双写不一致,读写并发不一致问题解决方案 1解决方案 2解决方案 3读写锁…

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

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

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

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

chatgpt赋能Python-pythonendswith

Python endswith方法&#xff1a;介绍、用法和示例 在编程中&#xff0c;经常需要查找字符串是否以特定字符结尾。Python提供了一个方便易用的方法——endswith()。 什么是Python endswith()方法&#xff1f; Python endswith()方法是用于检查字符串是否以特定子字符串结尾的…

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

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

GitHub Copilot:神一样的代码助手

我肝肯定&#xff0c;很多很多小伙伴还不了解 Copilot 是什么&#xff0c;尤其是初学计算机的小伙伴&#xff0c;我这里普及一下吧&#xff01; GitHub Copilot 是一个基于 AI 的代码自动完成工具&#xff0c;由 GitHub 和 OpenAI 共同开发。 GitHub 和 OpenAI 想必大家都很清楚…

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

从零制作操作系统——环境搭建以及HelloWorld 起因 最近在学习操作系统&#xff0c;尝试自己照着书搓一个出来。 环境搭建 基础环境 我们的操作系统在x86平台的Linux下进行编写和运行。编辑器用的VIM。 我的系统是Fedora 36&#xff0c;当然你也可以使用Ubuntu或者其他Li…

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

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

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

0.前置知识 springboot打包的项目共分为jar和war两种类型 jar包 jar类型项目使用SpringBoot打包插件打包时&#xff0c;会在打成的jar中 内置一个tomcat 的jar 所以我们可以使用jdk直接运行&#xff0c;将功能代码放到其内置的tomcat中运行。 war包 在打包时需要将 内置的tom…

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

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

prettier 使用详细介绍

prettier 使用详细介绍 prettier是一个代码格式化工具&#xff0c;可以通过自定义规则来重新规范项目中的代码&#xff0c;去掉原始的代码风格&#xff0c;确保团队的代码使用统一相同的格式。 安装 npm i prettier -Dyarn add prettier --dev创建一个prettierrc.*配置文件&…

六级备考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)

日期类的实现 在前面类和对象的学习中&#xff0c;由于知识多比较多和碎&#xff0c;需要一个能够将之前所学知识融会贯通的东西。下面就通过实现日期类来对类和对象已经所学的知识进行巩固。 日期类的基本功能&#xff08;.h文件&#xff09; //Date.h//头文件内容 #includ…

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

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