JavaScript (是什么?)
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
作用(做什么?)
网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
JavaScript的组成(有什么?)
ECMAScript:
规定了js基础语法核心知识。
比如:变量、分支语句、循环语句、对象等等
Web APIs :
DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
注意 DOM属于BOM
内部 JavaScript
直接写在html文件里,用script标签包住
规范:script标签写在上面
注意事项:我们将
代码写在以.js结尾的文件里
语法:通过script标签,引入到html页面中。
内联 JavaScript
代码写在标签内部
语法:
注意: 此处作为了解即可,我们并不推荐,但是后面vue中会看到这种使用模式
注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释或提示,能提高程序代码的可读性。注释只是为了提高可读性,不会被计算机编译
单行注释
符号://
作用://右边这一行的代码会被忽略
快捷键:ctrl + /
块注释
符号:/* /
作用:在/ 和 */ 之间的所有内容都会被忽略
结束符
代表语句结束
英文分号 ;
可写可不写(现在不写结束符的程序员越来越多)
换行符(回车)会被识别成结束符 ,所以一个完整的语句,不要手动换行
因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符
但为了风格统一,要写结束符就每句都写,要么每句都不写(按照团队要求.)
输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。
常见的几种输出语法:
向body内输出内容
如果输出的内容写的是标签,也会被解析成网页元素
页面弹出警告对话框
控制台输出语法,程序员调试使用
输入和输出 输入:prompt prompt(“请输入收货地址”);
输出:三种方式
用来装数据的容器
变量:
1.白话:变量就是一个装东西的盒子。
2.通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。
1创建变量
2 给变量赋值
要想使用变量,首先需要创建变量(专业说法: 声明变量)
age=18
定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值。
*** 如果变量没有赋值 默认值为 undefined
掌握变量的声明方式
变量赋值后,还可以通过简单地给它一个不同的值来更新它。
通俗来说:所谓更新变量就是为变量重新赋值 代码如下:
<script>
let age="23";
document.write("我的年龄是",age)
age="24"
document.write("我的年龄是",age)
script>
注意:在let声明变量中不能重复定义,一个结构中不能使用let声明同名变量
例如:
如何同时声明多个变量且赋值
let name= '张三' ,age=20
console.log(name,age)
案例1:
<body>
<script>
// 实际变量的意义就是存储数据的
// 首先需要定义变量去接收用户输入的姓名
// 然后需要用prompt 去接收这个姓名 ,最后再输出这个数据
let userName=prompt("请输入您的姓名:")
document.write(userName)
script>
body>
案例2:
<body>
<script>
// 先创建一个新的变量 然后将num1的值 赋值到tt上 这时候tt就等于10了
// 此时再把num2的值赋值给num1 这时候 num1就等与20了
// 最后把tt的数值 赋值给num2 最终再输出num1和num2 顺序就调换guoll
let num1="10",num2=20 ,tt;
tt=num1;num1=num2 ;
num2=tt;
document.write(num1 ,num2)
script>
body>
计算机世界中的万事万物都是数据
给数据分类 是为了 1: 更加充分和高效的利用内存
2:也更加方便程序员的使用数据
: number 数字型
:string 字符串型
:boolean 布尔型
:undefined 未定义型
:null 空类型
2:单引号、双引号都可以互相嵌套,但是不可以包裹自己(口诀:外单内双或者是内双外单)
3:必须使用时可以使用转义符 \ 输出单引号或双引号
boolean 布尔型 :在计算机中,表示真假值用:true、false 以后一般作为条件
undefined 未定义型 表示没有赋值 一般情况下 只声明变量不赋值的情况下,变量的值默认为undefined,一般很少用
代码示例如下
<body>
<script>
let age=10 // 数字类型
let name='小怪兽' //带引号的是字符串
let boy='true' //注意此 也为字符串
let girl=false //boolean:trus/fales 此为布尔型
let iphone //一个变量没有给它赋值的话 ,那它默认就是 undefined型
let apple=null //主动赋值为null
script>
body>
模板字符串
作用:拼接字符串和变量
<body>
<script>
let userName=prompt('请输入您的姓名')
let age=prompt('请输入您的年龄')
document.write(`我的姓名是:${userName},我的年龄是:${age}`);
script>
body>
通过 typeof 关键字检测数据类型
代码示例如下:
<body>
<script>
let userName='小怪兽' //字符串
let age=99 //number
let boy=true //布尔类型
let girl //undefined
let goodboy=null //object
//typeof 检测当前数据的类型
console.log(typeof userName)
console.log(typeof age)
console.log(typeof boy)
console.log(typeof girl)
console.log(typeof null)
script>
body>
为什么要类型转换
此时需要转换变量的数据类型。
通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。
补充:以后从页面中获取用户数据,基本上都是字符串
隐式类型转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
+ 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
&&&小技巧写法
、、if()中表示式也会进行隐式转换:隐式转换为fales 的有:' ' " " 0 undefined null!
显示类型转换
编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。
为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。
概念:
自己写代码告诉系统该转成什么类型
转换为数字型
Number(数据)
转换成数字类型
如果转换字符串内容里有非数字,转换失败时结果为NaN (Not a Number) 表示不是一个数字 NaN不能与任何数值计算
NaN也是number类型的数据,代表非数字
写法如下:
2.parseInt(数据)
只保留整数
```html
let nmu1=prompt('请输入数字1')
let num2=prompt('请输入数字2')
let max= parseInt(nmu1)+parseInt(num2)
document.write(max)
```
总结:当运用到parseInt 包裹变量 系统只会把数字部分做处理 进行运算
.parseFloat(数据)
可以保留小数
let nmu1=prompt('请输入数字1')
let num2=prompt('请输入数字2')
let max= parseFloat(nmu1)+parseFloat(num2)
document.write(max)
总结 :parseFloat 基本特性和parseInt一样,但是他会保留小数
补充图:
转换为字符型:
String(数据)
变量.toString(进制)
本章学习的 思维导图:http://assets.processon.com/chart_image/623db9e90e3e74078d4b4fef.png