JavaScript基础学习--day1

JavaScript学习--day1

JavaScript权威网站：JavaScript | MDN

一、简介

JavaScript是一种运行在浏览器（客户端）的编程语言，实现人机交互效果

作用：网页特效、表单验证（合法性验证）、数据交互（前后端数据交互）、服务端编程（node.js--可实现后端的事）

组成：

ECMAScrpit（JavaScript语言基础）+Web APIs（DOM--页面文档对象模型+BOM--浏览器对象模型）

ECMAScript：变量、分支语句、循环语句、对象等等

Web APIs：

DOM 操作文档，页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，页面弹窗，检测窗口宽度、存储数据到浏览器等等

二、书写位置

内联:(vue框架中会使用)

内部：

写在</body>标签上面（也就是body盒子的最后）

原因：代码是从上向下加载的。

外部：（标签中不要写内容，会被忽略）

写在</body>标签上面用script标签引入

三、注释和结束符（和less相同）

（一）注释

单行注释（//）：

快捷键：ctrl+/

块注释（/* */）

快捷键：shift+alt+a

（二）结束符

分号；（可写也可不写）

四、输入输出语法

输出语法：

1.document.write('输出内容')----作用：向body内输出内容

输出内容：可写文字也可写html标签

2.alert('弹出内容')--作用：页面弹出警告对话框

3.console.log('控制台打印')--作用：程序员调试（查看控制台结果输出情况）

输入语法：

prompt('输入内容')--作用：显示对话框，提示语句提示用户输入内容

代码执行顺序：

从上向下执行（顺序执行）

alert（）和prompt（）会跳过页面渲染先被执行

字面量理解：100-数字字面量；‘大使馆’-字符串字面量； [] 数组字面量； {}对象字面量

五、变量（存储数据的容器）

1.声明变量（关键字let）

关键字：有特殊含义的字符，JavaScript内置的一些英语词汇。

语法：

let 变量名 例：let age

2.给变量赋值

例:age=18

3.变量初始化：

let age=18

4.更新变量

let不允许重复声明同一变量。

可以通过直接给变量赋一个新值实现更新变量

声明多个变量：（变量之间用逗号连接--不推荐）

为更好的可读性，一行声明一个更好

注：定义名字变量的时候不要用name，因也被弃用，可用uname

练习：输出用户名案例

步骤：1.用户输入用户名，2.用变量存储用户名，3.输出用户名

交换变量的值案例

5.变量命名规则（必须遵守）与规范（建议）

1.命名规则

（1）不能用关键字

关键字：JavaScript中内置的，具有特殊含义的词语，如let，for，if等

（2）只能用下划线、字母、数字、$组成，且数字不能开头

（3）字母严格区分大小写（html超文本标记语言不区分大小写）

2.规范

（1）起名要有意义

（2）遵循小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写（userName）

练习：输出用户信息

6.变量拓展-数组（Array）

单个变量存入多个数据

一次存入多个具有某种共同属性的字面量（可以是数字、字符。。也可混）

（1）声明语法（不同字面量用逗号隔开）

let 数组名=[数据1,数据2,....,数据n ]--这些数据被称为数组元素

数组是按顺序保存，下标（索引）从0 开始

用length属性能获得数组的长度

六、常量

（一）声明常量（命名规则与变量相同）

const 常量名=必须赋值

七、数据类型

（一）分类

基本数据类型

number数字型、string字符型、boolean布尔型、underfined未定义型、null空类型

引用数据类型

object对象

（二）基本数据类型

1.number：整数、小数、正数、负数

算术运算符：+， -， *， /， %（取模--取余数）

优先级：

练习：计算圆的面积案例

特殊词：NaN(not a number）

2.string：通过单引号‘ ’、双引号“ ”或反引号``包裹的数据都叫字符串（推荐单引号）

注：1.变量不能加引号2.当字符串中的内容需要引号时，应与包裹的引号区分开来

（一般为外单内双，内单外双，必要时可以使用转义符\，输出单引号或双引号）

字符串拼接：

模板字符串

使用场景：拼接字符串和变量

语法：``（反引号），内容拼接变量时，用${}包住变量

练习：页面输出用户信息案例

3.boolean（true/false）

4.undefined（声明一个变量未赋值就是undefined）

5.null（赋值了但内容为空）

检测数据类型：

通过typeof关键字检测数据类型

语法形式：

1.作为运算符：typeof x（常用）

2.函数形式：typeof(x)

6.类型转换

（1）隐式转换（不明确，靠经验）

当某些运算符被执行时，系统内部自动将数据类型进行转换

规则:

+号两边只有一个是字符串，都会把另一个转为字符串

-*/等会将数据转化成数字类型

小技巧：

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

（2）显示转换

（2.1）转换为数字类型：Number()

注：如果字符串内容里有非数字，转换失败时结果为NaN，即不是一个数字

NaN也是number类型，代表非数字

parselnt（数据）

只保留整数（int）

parseFloat（数据）

可保留小数（float）

练习：输入两个数，计算两者之和，打印到页面中

练习：用户订单信息案例