JS介绍,基本理解

本文介绍了JavaScript的基本概念,包括它是一种客户端脚本语言,主要用于表单校验、网页特效、服务器端编程等场景。JavaScript由ECMAScript、DOM和BOM三部分组成。文中还涉及了JavaScript的变量、数据类型、运算符和输入输出方法,强调了变量命名规范和简单的数据类型如Number和String,并概述了算术和递增/递减运算符的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.1 JavaScript 是什么

  • JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)

  • 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行

  • 现在也可以基于 Node.js 技术进行服务器端编程

1.2 JavaScript的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )

  • 网页特效

  • 服务端开发(Node.js)

  • 桌面程序(Electron)

  • App(Cordova)

  • 控制硬件-物联网(Ruff)

  • 游戏开发(cocos2d-js)

1.3 浏览器执行 JS 简介

浏览器分成两部分:渲染引擎和 JS 引擎

1.4 JS 的组成

  1. ECMAScript

    ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。

    ECMAScript:规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

  2. DOM——文档对象模型

    文档对象模型(DocumentObject Model,简称DOM),是W1C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
  3. BOM——浏览器对象模型

    浏览器对象模型(Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

1. JS 初体验

js 有3种书写位置,分别为行内、内嵌和外部。
  1. 行内式

    <input type="button" value="点我试试" onclick="alert('Hello World')" />
    • 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick

    • 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

    • 可读性差, 在html中编写JS大量代码时,不方便阅读;

    • 引号易错,引号多层嵌套匹配时,非常容易弄混;

    • 特殊情况下使用

  2. 内嵌式

    <script>
        alert('Hello  World~!');
    </script>
    • 可以将多行JS代码写到 script 标签中

    • 内嵌 JS 是学习时常用的方式

  3. 外部JS文件/外部样式

    <script src="index.js"></script>
    • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用

    • 引用外部 JS文件的 script 标签中间不可以写代码

    • 适合于JS 代码量比较大的情况

2 - JavaScript输入输出语句

为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info)浏览器弹出输入框,用户可以输入浏览器
  • 注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。

3 - 变量的使用

变量命名规范

规则:

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name

  • 严格区分大小写。var app; 和 var App; 是两个变量

  • 不能 以数字开头。 18age 是错误的

  • 不能 是关键字、保留字。例如:var、for、while

  • 变量名必须有意义。 MMD BBD nl → age

  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName

4- 简单数据类型

简单数据类型(基本数据类型)

JavaScript 中的简单数据类型及其说明如下:

      4.1  数字型 Number

                JavaScript 数字类型既可以保存整数,也可以保存小数(浮点数)

  1. 数字型三个特殊值

    • Infinity ,代表无穷大,大于任何数值

    • -Infinity ,代表无穷小,小于任何数值

    • NaN ,Not a number,代表一个非数值

  2. isNaN

    用来判断一个变量是否为非数字的类型,返回 true 或者 false

       4.2字符串型 String

                字符串型可以是引号中的任意文本,其语法为 双引号 "" 和 单引号''

        1.字符串引号嵌套

        JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)

var num1 = '复习"js"语言';   // 可以用''包含""
var num2 = "复习'js'语言";  // 也可以用"" 包含''
//  常见错误
var num3 = '复习js语言"; // 报错,不能 单双引号搭配

       2.字符串转义符

        类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。

        转义符都是 \ 开头的,常用的转义符及其说明如下:

转义符解释说明
\n换行符,n 是 newline 的意思
\ \斜杠 \
'' 单引号
"”双引号
\ttab 缩进
\b空格 ,b 是 blank 的意思

        3.布尔型Boolean

        布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。

        布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

        4.Undefined

        一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时,注意结果)

var num;
console.log(num);           // undefined
console.log('你好' + num);  // 你好undefined
console.log(11 + num);     // NaN
console.log(true + num);   //  NaN

        5.null

        一个声明变量给 null 值,里面存的值为空

var num1 = null;
console.log('你好' + num1);  // 你好null
console.log(11 + num1);     // 11
console.log(true + num1);   //  1

5-运算符

运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有:

  • 算数运算符

  • 递增和递减运算符

  • 比较运算符

  • 逻辑运算符

  • 赋值运算符

5.1 算数运算符

  • 表达式和返回值

    表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

    简单理解:是由数字、运算符、变量等组成的式子

    表达式最终都会有一个结果,返回给开发者,称为返回值

5.2 递增和递减运算符

  • 递增和递减运算符概述

    如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( -- )运算符来完成。
    ​
    在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
    ​
    注意:递增和递减运算符必须和变量配合使用。 
  • 递增运算符

    • 前置递增运算符

      ++num 前置递增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。

      使用口诀:先自加,后返回值

    var  num = 10;
    alert(++num + 10);   // 21
    • 后置递增运算符

      num++ 后置递增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单。

      使用口诀:先返回原值,后自加

    var  num = 10;
    alert(10 + num++);  // 20

    5.3 比较运算符

  • 比较运算符概述

    概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。

等号比较:

5.4 逻辑运算符

逻辑与&&

两边都是 true才返回 true,否则返回 false

逻辑或 ||

两边都是 true才返回 true,否则返回 false

逻辑非 !

逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false

5.5 赋值运算符

5.6 运算符优先级

  • 一元运算符里面的逻辑非优先级很高

  • 逻辑与比逻辑或优先级高

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值