JavaScript学习笔记1 (历史与概述、执行过程、组成、书写位置、注释、输入输出语句、变量、数据类型)

文章目录

JavaScript历史和概述

  • 发明人和发明时间:网景公司的布兰登·艾奇在1995年用10天的时间完成了JavaScript的设计;
  • 命名由来:网景公司最初将这门编程语言命名为LiveScript,但是在与Sun公司合作后将其修改为JavaScript。需要注意的是,JavaScript和Java本身并没有直接关系。
  • 语言概述:世界上最流行的语言之一,是一种运行在客户端上的脚本语言。
  • 服务器端编程 :现在也可以基于Node.js技术进行服务器端的编程。
  • 语言简称:将JavaScript简称为JS。
  • 使用场景
    • 表单动态检验(JS最初的设计目的);
    • 网页特效制作;
    • 服务端开发(基于Node.js);
    • 桌面程序开发;
    • 手机APP开发;
    • 控制硬件操作;
    • 游戏开发(基于coco2d-js)。

浏览器执行JS的过程

  • 浏览器的组成 :包括渲染引擎和JS引擎两部分。
    • 渲染引擎:用来解析HTML和CSS,也就是浏览器内核。
    • JS引擎:也被称为JS解释器,用来读取网页中的JS代码,对其进行处理后运行,例如Chrome浏览器中的V8。

JS的组成

  • JS的组成 :JS可以分为ECMAScript(JS基本语法),DOM(页面文档对象模型)和BOM(浏览器对象模型)三部分。
    • ECMAScript:由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,是JS语言的一个子集。
    • DOM:W3C组织推荐的处理可扩展标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作。
    • BOM:提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转和获取分辨率等。

JS的书写位置

  • JS的书写位置可以分为行内式、内嵌式。
    • 行内式JS :设置某个HTML标签的的特定属性的值即可。例如,如果要设置某个标签的点击事件,则可以使用onclick属性;如果点击后会弹出一个警告框,则将属性值设置为alert()。该方式一般很少使用。
    • 内嵌式JS :在HTML代码中增加一对<script>标签,其中写入JS代码即可。
    • 外部式JS :新建一个后缀名为.js的文件,在其中写入JS代码;然后,在HTML代码界面中创建一对<script>标签,将该标签的scr属性的属性值设置为JS文件的路径。这种方式有利于HTM页面代码结构化,适合于JS代码量很大的情况。
  • 其他注意事项
    • 单引号和双引号的使用:在HTML中推荐使用双引号,在JS中推荐使用单引号。
    • 外部式JS引入注意事项:引入外部JS文件的<script>标签中不可以写入其他任何代码。

JS的注释

  • 单行注释 :使用 // 进行单行注释;
  • 多行注释 :使用 /* */进行多行注释。

JS中的输入输出语句

  • prompt函数
    • 基本作用:提示用户在浏览器弹出的对话框中进行输入,返回的内容是一个字符串;
    • 使用语法prompt(提示输入的字符串)
  • alert函数
    • 基本作用:在浏览器中通过上方对话框弹出指定的输出;
    • 使用语法alert(需要输出的字符串)
  • console函数
    • 基本作用:在控制台中进行输出;
    • 使用语法console.log(需要进行输出的内容)
    • 查看结果的位置 :打开Chrome的调试工具后,选择console一栏,即可看到控制台输出结果。

JS中的变量

  • 变量的使用
    • 基本步骤:首先要声明一个变量,声明之后才可以进行赋值和使用;
    • 声明语法var 变量名。如果一次性声明多个变量,只需要参照模板 var 变量1,变量2...即可。
    • 语法介绍var是JS中的一个关键字,用来声明变量。使用该关键字声明了变量之后,计算机会自动为该变量分配内存空间。
    • 注意事项
      • 声明变量的同时可以对变量进行赋值。
      • JS中变量可以不声明直接使用,但是不推荐这么做。
  • 变量命名规范
    • 变量区分大小写;
    • 变量不应该以数字开头;
    • 变量不能与关键字冲突;
    • 变量的命名需要有意义;
    • 尽量不要以name作为变量名。

JS中的数据类型

  • 变量的数据类型:JS是一种弱类型语言(也被称为动态语言),这表示不用在声明变量时指定变量的数据类型。变量的数据类型会在程序运行过程中进行自动确定。
  • 数据类型分类 :可以分为简单数据类型和复杂数据类型。
    • 简单数据类型 :包括数字型Number(默认值为0)、布尔型Boolean(默认值为false)、字符串型String(默认值为空串)、未定义类型Undefined和空值null。
      • 数字型Number :可以表示整数和小数,还可以表示八进制(数字前加上一个0表示八进制)、十六进制(数字前加上一个0x)。另外,数字型中还有几个特殊的值。
        • 数字型的最大值和最小值 :分别通过Number.MAX_VALUENumber.MIN_VALUE进行表示;
        • 无穷大和无穷小 :分别用Infinity-Infinity进行表示;
        • 非数值NaN。可以通过isNaN()函数来判定一个常量或变量是否是数字,返回一个布尔值。
      • 字符串型String : 用于表示字符串。
        • 获取字符串的长度 :只需要使用字符串的length属性即可。
        • 字符串的拼接 :使用 + 即可将两个字符串进行拼接。如果是一个字符串与非字符串类型的数据相加,则会自动将该数据转换为字符串,然后进行拼接。
      • 布尔型Boolean :表示逻辑值的真假。
        • 类型转换 :如果把truefalse作为运算数参与数值计算,则前者会转换为1,后者会转换为0
      • 未定义数据类型Undefined : 如果声明一个变量但是没有赋值,得到的结果就是一个Undefined。
        • 主动赋值 :可以主动给变量赋值undefined,表示该变量的类型不确定。
        • 数值计算:Undefined类型的变量与数值进行运算,得到的结果是NaN(非数)。
      • 空数据类型Null :表示该数据为空。
        • 主动赋值: 可以主动给变量赋值为null,表示该变量的值为空。
        • 数值计算:空值与数值进行运算,得到的结果仍然是原本的数值。
  • 检测变量的数据类型 :使用typeof函数即可。
    • 基本语法typeof(需要检测的变量)
  • 数据类型转换
    • 将数据转换为字符串
      • 使用变量名.toString()方法即可;
      • 使用String(变量名)进行强制转换;
    • 将数据转换为数字型
      • 将变量转换为整数parseInt(需要转换的字符串)
      • 将变量转换为浮点数parseFloat(需要转换的字符串)
      • 将变量转换为数值Number(需要转换的字符串)
      • 利用算术运算做隐式转换:如果字符串数字参与了减法、乘法或除法运算,则会自动转换为数值类型的数字。
    • 将数据转换为布尔型 :代表空的和否定的值(空字符串、0NaNundefinednull)都会转换为false,其他的数据都会转换为true
相关推荐
cuisidong19977 分钟前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
乌恩大侠9 分钟前
5G周边知识笔记
笔记·5g
南宫理的日知录15 分钟前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
别拿曾经看以后~41 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死44 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel