JavaScrip基础（一）：JS基础认知

JavaScript基础认知

定义：是一种运行于JavaScript解释器/引擎中的解释型脚本语言
什么是解释型？
运行之前不不需要编译的，运行之前不会检查错误，知道碰到错误为止。
解释型对应的是编译型，对源码进行编译还能检查语法错误，如C、C++。
运行环境

  • 独立安装的JS解释器（NodeJS）
  • 嵌入在「浏览器」内核中的JS解释器

JS组成

  1. 核心（ECMAScript）
  2. 文档对象模型（DOM）让JS有能力与网页进行对话，如鼠标点击操作
  3. 浏览器对象模型（BOM）让JS有能力与浏览器进行对话，如判断鼠标光标在浏览器中的位置

JS特点

  • 开发工具简单，记事本即可
  • 无需编辑，直接由JS引擎负责执行
  • 弱类型语言由数据来决定数据类型
  • 面向对象

JavaScript基本语法

浏览器内核的作用

负责页面内容的渲染。
内核主要由两部分组成：内容排版引擎解析HTML和CSS、脚本解释引擎解析JavaScript

JS运行

  • 直接在浏览器Console中输入并执行JS
  • 将JS脚本嵌入在HTML页面中执行

Chrome 浏览器中执行 JavaScript

Chrome 浏览器中执行 JavaScript

1.打开开发者工具，在 Console 窗口调试 JavaScript代码
2.在 > 符号后输入要执行的代码，按回车后执行。

Chrome snippets 小脚本
1.在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件
2.只需在右侧窗口输入代码，保存后，右击文件名，选择 "Run" 执行代码

将JS脚本嵌入在HTML页面中执行的步骤

  1. 行内，将JS代码嵌入在元素“事件”中
    onclick:当单击元素时所做的操作
<html>
    <body>
        <button onclick=""console.log('Hello World');"></button>
    </body>

</html>
  1. 内嵌，将JS代码嵌入在<script>标记中

<script></script>

允许出现网页的任意位置处

<html>
    <body>
       
        <script>
            document.write('<b>欢迎</b>');
            cosole.log('脚本执行结束了');
        </script>
     
    </body>

</html>
  1. 外部文件，将JS代码写在外部脚本文件中（xx.js）
    创建JS文件，并编写JS代码;在页面引入JS文件 <script src="JS文件路径"></script>

<html>
    <head>
       
        <script src="myscript.js"></script>
          
    </head>

</html>

注：外部文件引用的方式，script标签内，不能写其他代码

语法规范

1.语句

  • 使用分号来表示结束
  • 大小写敏感
  • 英文标点符号
  • 由表达式、关键字、运算符组成

2.注释

  • 单行注释：//
  • 多行注释：/* */
  • sublime text中Ctrl+/

变量

变量声明

使用 var 关键词来声明变量：
var carname;
变量声明之后，该变量是空的（它没有值）。

如需向变量赋值，使用等号：
carname="Volvo";

也可以在声明变量时对其赋值：
var carname="Volvo";
注意：声明过程中，尽量不要省略var关键字，否则声明的是“全局变量”

一次性声明多个变量并赋值

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个变量不可以同时赋同一个值:
var x,y,z=1;
x,y 为 undefined， z 为 1。

变量名 命令规范

1、不允许使用JS的关键字和保留关键字
2、由字母、数字、下划线已经以及$组成
3、不能以数字开头
4、变量名称对大小写敏感（y 和 Y 是不同的变量)
5、尽量见名知意
6、可以采用“驼峰命名法”

  • 如果只有一个单词作为变量名，全小写，如var age
  • 变量名为合成词时，第一个单词全小写，第二个单词首字母大写，如var stuName

数据类型

原始类型（基本类型）

  1. 数字(Number) ，整数、浮点数
  2. 字符串(String)
  3. 布尔(Boolean)
  4. 空 （Null），声明对象未赋值
  5. 未定以（Undefined），声明变量未赋值，访问对象不存在的属性
  6. Symbol，是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

引用类型

  1. 对象(Object)
  2. 数组(Array)
  3. 函数(Function)
  4. 正则（RegExp）
  5. 日期（Date）

数据类型转换

隐式转换

自动转换，由JS在运算过程中，自己进行转换的操作，不需要人为参与

显示转换（强制转换）

  1. toString()
    作用：将任意类型的数据转换为string类型
    语法：变量.toString()
  2. parseInt()
    作用：获取指定数据的整数部分
    语法：var result = parseInt(数据)
    注意：从左向右依次转换，碰到第一个非整数字符，则停止转换。如果第一个字符就是非整数字符的话，结果为NaN
  3. parseFloat()
    作用：将指定数据转换成小数
    语法：var result = parseFloat(数据)
  4. Number()
    作用：将一个字符串解析为number
    语法：var result = Number(数据)
    注意：如果包含非法字符，则返回NaN
posted @ 2022-12-19 14:38  是小鱼呀  阅读(47)  评论(0)  编辑  收藏  举报