JavaScripts笔记I(基础)

2024-01-17 20:28
文章标签 java 基础 笔记 scripts

本文主要是介绍JavaScripts笔记I(基础),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JavaScripts基础

js是一门编程语言,可以实现很多的网页交互效果。

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。 [4]不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担,而与此同时也带来另一个问题,安全性。

而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖JavaScript在客户端进行支持。

js书写位置

  • 内部 js

​ 直接写在html中,用scripts标签包住 ,一般scripts标签写在body上面

  • 外部js

    在html文件外部创建一个js文件,然后再在html文件中通过scripts标签调用;scripts标签中无需再写代码,否则会被忽视

  • 行内js

    代码写在标签内部 多用于vue框架

js注释

  • 单行注释
    • 符号 ://
    • 快捷键 ctrl+/
  • 块注释
    • 符号 :/* */
    • 快捷键:shift+alt+a

注意点:结束符号是" ; " 结束符号可以省略不写

输入输出语句

输出语句

  • 语句1

    document.write(“hello world”)

作用:向body内输出内容

  • 语句2 ***

    alert(“hello world”)

作用:页面弹出警告对话框

  • 语句3

    console.log(‘控制台打印’)

作用:控制台输出语法,程序员调试使用

输入语句

  • 语句1 ***

    prompt(‘please write you name?’)

作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字

执行顺序:

  • 按html文档流顺序执行js代码
  • alert()和prompt()他们会跳过页面渲染先被执行

变量

抽象:存储数据的容器

语法:

let 变量名

let 是关键字(允许、许可、让、要),所谓关键字就是系统提供专门用来声明变量的词语

变量赋值初始化:let num =20

注意:声明变量统一使用let

var声明变量缺点:

  • 可以先使用再声明
  • var声明过的变量可以重复声明
  • 变量提升,全局变量,没有块级作用域等等

数组

声明语法


let  array = ['a','b','c']
//同样通过下标索引获取元素

常量

概念:使用const声明的变量称为常量

使用场景:当某个变量永远不会改变的时候就可以使用const来声明,而不是使用let

命名规范和变量一致

常量使用:

声明:

const G = 10010
console.log(G)

注意:常量不允许重新赋值 ,声明常量的时候必须初始化(赋值)

不需要重新赋值的数据可以使用常量const

数据类型

js是弱类型语言,变量属于哪种数据类型,只有赋值之后我们才能确认;

不同于java强类型语言

  • 基本数据类型

    • Number 数字型

      • 整数、小数、负数、正数

        let age = 18 //整数
        let num = 3.14 //小数
        
      • 算数运算符 与java相同

      • NaN

        • 代表计算错误,它是一个不正确或者一个未定义的数学操作所得到的结果。 NaN是粘性的,任何对NaN的操作都会返回NaN。

          console.log("你好" - 2) //返回NaN
          console.log(NaN - 2) //返回NaN
          
    • String 字符串型

      • 在js中 无论是 单引号、双引号、反引号 包裹的数据都叫字符串

      • 字符串拼接一样使用+号

      • 模板字符串

        • 使用场景:

          • 拼接字符串和变量

          • 拼接变量较多比较麻烦

          • 语法:

            • 字符串使用反引号包裹
            • 变量使用${变量}
            let age =18
            document.write(`今年我${age}岁了`)
            
    • boolean 布尔型

      • 表示肯定或者否定时在计算机中对应的是布尔类型,他只有两个固定的值true和flase,表示真或者假
    • undefined 未定义型

      • 比较特殊的类型 只有一个值undefined

      • 只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少直接为某个变量赋值为undefined

        let age //为声明变量
        document.write('age') //输出undefined
        
    • null 空类型

      • js中的null 仅表示一个代表"无"、”空“、”值未知“的特殊值

      • null 一般作为尚未创建的对象

        let age =null 
        console.log(age) //输出结果为null
        typeof  age //输出结果的数据类型为对象
        
  • 引用数据类型

    • object 对象
  • 通过typeof关键字可以检测数据类型

    1. 作为运算符 typeof age
    2. 函数形式 typeof(age)

    一般都是用第一种形式

类型准换

JavaScript是一种动态类型的编程语言,它的变量不需要在声明时指定类型,可以根据变量的值自动推断类型。JavaScript中有许多数据类型,包括基本数据类型和复杂数据类型。

通俗的来讲:就是把一种数据类型的变量转换成我们所需要的数据类型

隐式转换

JS中的隐式转换指的是在进行运算或比较时自动将数据类型从原始值(如字符串、布尔值等)转换为其他数据类型。而显式转换则需要通过特定的函数来手动进行转换。

以下是常用的隐式转换示例及对应的结果:

  1. 当两个不同类型的操作数相加时,会先将其中一个操作数转换成与另一个操作数相同的类型再进行计算。

    示例:let result = "5" + 3; // 输出结果为 “53”

  2. 当使用乘法运算符 * 连接两个字符串时,会将第二个操作数视为重复次数并返回新的字符串。

    示例:let result = "hello" * 3; // 输出结果为 “hellohellohello”

  3. 当使用关系运算符 <, >, <=, >=, ==, !=, ===, !== 进行比较时,会根据操作数的类型进行隐式转换后再进行比较。

    示例:console.log(true == 1); // 输出结果为 true

  4. 当调用内置函数 parseInt()parseFloat() 时,可以将字符串转换为整数或浮点数。

    示例:let numStr = "10"; let numInt = parseInt(numStr); console.log(typeof numInt); // 输出结果为 number

  • 规则:
    • +号两边只要有一个是string,都会把另一个数据转换成string类型
    • 除了+以外的算术运算符 比如 - * / 等都会把数据转换成数字类型

注意当当+号作为正号是会将数据转换成数字类型

//+号做拼接
console.log("2"+"2") //输出为22
//+号做正号 加号
console.log(2+"2") //输出为22
console.log(+"2"+"2") //输出为22

缺点是转换类型不明确

显式转换

以下是常用的显式转换示例及对应的结果:

  1. 使用全局函数 Number() 将任意类型的变量转换为数字类型。

    示例:let strNum = "10"; let num = Number(strNum); // 输出结果为 10 (number)

  2. 使用全局函数 String() 将任意类型的变量转换为字符串类型。

    示例:let boolValue = false; let strBool = String(boolValue); // 输出结果为 “false” (string)

  3. 使用全局函数 Boolean() 将任意类型的变量转换为布尔类型。

    示例:let zero = 0; let isZero = Boolean(zero); // 输出结果为 false (boolean)

例如转换成数字类型

  • Number(数据)
    • 如果转换时String中有非数字,转换失败时显示结果为NaN即不是一个数字
    • NaN也是Number类型的数据,代表非数字
  • parselnt(数据)
    • 只保留整数
  • parseFloat(数据)
    • 保留整数和小数

这篇关于JavaScripts笔记I(基础)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/617117

相关文章

Java中对象的创建和销毁过程详析

《Java中对象的创建和销毁过程详析》:本文主要介绍Java中对象的创建和销毁过程,对象的创建过程包括类加载检查、内存分配、初始化零值内存、设置对象头和执行init方法,对象的销毁过程由垃圾回收机... 目录前言对象的创建过程1. 类加载检查2China编程. 分配内存3. 初始化零值4. 设置对象头5. 执行

SpringBoot整合easy-es的详细过程

《SpringBoot整合easy-es的详细过程》本文介绍了EasyES,一个基于Elasticsearch的ORM框架,旨在简化开发流程并提高效率,EasyES支持SpringBoot框架,并提供... 目录一、easy-es简介二、实现基于Spring Boot框架的应用程序代码1.添加相关依赖2.添

通俗易懂的Java常见限流算法具体实现

《通俗易懂的Java常见限流算法具体实现》:本文主要介绍Java常见限流算法具体实现的相关资料,包括漏桶算法、令牌桶算法、Nginx限流和Redis+Lua限流的实现原理和具体步骤,并比较了它们的... 目录一、漏桶算法1.漏桶算法的思想和原理2.具体实现二、令牌桶算法1.令牌桶算法流程:2.具体实现2.1

SpringBoot中整合RabbitMQ(测试+部署上线最新完整)的过程

《SpringBoot中整合RabbitMQ(测试+部署上线最新完整)的过程》本文详细介绍了如何在虚拟机和宝塔面板中安装RabbitMQ,并使用Java代码实现消息的发送和接收,通过异步通讯,可以优化... 目录一、RabbitMQ安装二、启动RabbitMQ三、javascript编写Java代码1、引入

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1:定义时间段类步骤2:添加时间段步骤3:检查时间段是否有重合步骤4:输出结果示例代码结语作

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下:需要在