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)
练习:输入两个数,计算两者之和,打印到页面中
练习:用户订单信息案例