一、概述
发展历史:https://www.w3school.com.cn/js/pro_js_history.asp
10天开发出的脚本语言,代码严谨性不高,许多地方不会报错。
Javascript的引入:内部标签与外部引入
内部标签:在body里输入
<script>//内部标签
alert("hellw world");
</script>
外部引入:通常置于head或body底部
<script src="xxx.js"></script> //外部引入
JS文件中
alert("hello")
注意:在script标签中,单行注释为 // ,多行注释为 /* */ ,与java相同。若不同引入方式在同一文件中,则里面的alert按顺序依次弹出。
二、浏览器控制台如何使用
运用JavaScript可实现流程控制,例如:
<script>
var score=59;//定义变量:变量类型 变量名=值
if(score>60&&score<70){
alert("60-70");
}else if(score>70&&score<80){
alert("70-80");
}else{
alert("other");
}
</script>
则弹出弹窗内容为"other"
想进一步观察流程控制途中每一步的运行结果,可将文件从编辑器运行到浏览器后,可通过右键-检查(审查元素)/Ctrl+Shift+I来打开控制页面,其内容如下:
上图为初始界面,其中:
Element:分析HTML和CSS代码。
Console(控制台):写JavaScript代码,并且输出。
常见命令——在浏览器的控制台打印变量:console.log();与Java的System.out.println();相似。以下便是打印script中的变量score所显示的结果。
Sources:当前的源码目录。
右侧的调试工具中有监视工具,有打断点的功能,打了断点刷新网页就可以跳转至断点处。半圆形箭头加点(Step over next)是执行到结束,下箭头加点(Step into next)往下走一步,上箭头加点(Step out of current)是往上走一步。用于调试一步一步找错误。
Network:网络请求。
Application:相当于web里的数据库,将一些简单的数据保存在网页里。
①Local Storage:本地存储,在H5里用的比较多,但现在不怎么用,在VUE里要使用它,如状态管理。
②Session Storage:存Session的。
③Cookies:后面可能用的最多的。
三、数据类型介绍
变量:变量类型 变量名=变量值
变量名命名:
首位:字母,$,_
内容:数字,其余同上
注意:关键字不可命名,中文尽量不用来命名。
number:整数(不区分整数小数),浮点数(存在精度问题,尽量不用来计算),科学计数法,负数,NaN(not a number),infinity(无限大)
字符串:单引号括起
null:空
undefined:未定义
逻辑运算:&&,||,!
比较运算符:=赋值
表示等于:==(等号两边数据类型可以不一样,值一样则为true)
===(等号两边数据类型必须一样,值一样为true)
注意:判断NaN不能用比较运算符,可以用isNaN(),如图:
数组:一般用中括号,数组中元素可为不同属性。
var arr = [1,null,'1',true];//可读性更高
new Array(1,null,'1',true);
对象:一般用大括号,每个属性间用逗号隔开。
var person={
name:"lywl",
age:"19",
tags:['html','css','js']
}
可通过person.直接取其值。
五、严格检查模式
例如定义如下变量:
i=1;//全局变量(默认),未定义
let j=2;//定义局部变量,一般用于ES6
为了使Javascript更严谨,避免产生一些错误,可用
‘use strict’
必须放在script标签中第一行,使i不被定义为变量,从而报错。所以日常写代码时,要记得在前面先定义好变量。
注意:IDEA需要设置支持ES6语法。