1.JS两种引入和语法注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
JavaScript 作用: 主要是 与用户进行交互
1. java : 网景 (liveScript) <-> 微软 (浏览器 IE) 付费
2. script 脚本 (文本保存, 往往直接解释运行,不需要编译)
-->
<script>
function method01() {
var result = confirm("你满18岁了吗?")
}
</script>
</head>
<body>
<form action="#">
<input type="text" name="user" placeholder="请输入用户名"> <br>
<input type="submit">
</form>
<hr>
<input type="button" value="按钮:跳转" onclick="method01()" >
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
js是一门编程语言, 最终还是要引入到html,在浏览器中运行
1. 内部
1. 在html中编写一个script标签
a. head标签中 (阅读性好)
b. body标签之后 (比较方便)
2. 然后内部写js代码
2. 外部
1. 在外部编写一个js文件(js代码)
2. 然后用script标签src属性导入
注意: 1. 一个html中允许多个script标签(从上到下)
2. 一个script标签只允许做一件事(要么写,要么导)
-->
<script>
document.writeln("hello"); //DOM : 在网页中输出
</script>
<!-- 111111111111111111111111111111111111111111111111111111111111111111111 -->
<script src="../js/my.js">
//中间不能写
</script>
<!-- 111111111111111111111111111111111111111111111111111111111111111111111 -->
<script>
/*
* 1. 一行代码后面可以不加 ;
* 2. js弱类型语言 (有类型,但是不强调)，所有类型都赋值给var (variable 变量)
* 3. var可写可不写
*/
document.writeln("<br>")
document.writeln("a")
var a = 1; //数字 不用int a =1
// a = "abc" // 字符串
b = 2;
document.writeln(a + b)
var c = 1; //定义: 初次声明并赋值
var c = 2; // 赋值
</script>
</head>
<body>
内容
</body>
</html>
2.js五大原始类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* js的类型
* 1. 原始类型
* 2. 引用类型： a. object
* b. function
*
* 原始类型
* 1. number : 数字：整数/小数
*
* 2. string : 字符串：单引/双引
*
* 3. boolean：true/false
*
* 4. null (值)：表示引用类型变量为null
*
* 5. undefined : 未定义
* 定义: 变量初次声明并赋值
* 未定义: 变量只声明不赋值
*
* java: int a; //定义
* a = 1; // 赋值
*
* js : var a = 1; //定义
* var b; //未定义
*
* 运算符 : 变量的类型 = typeof 变量 。 返回变量类型 像java中instance of
*/
var a = 1.1;
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var a = 'abc'; //赋值
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var a = true;
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var a = null; //任意引用类型继承object
var type = typeof a
document.writeln(a + "->" + type)
document.writeln("<br>")
var b;
var type = typeof b
document.writeln(b + "->" + type)
document.writeln("<br>")
</script>
</head>
<body>
</body>
</html>
3.js的运算符和流程控制
判断用户是否输入内容：java如下，js中直接写if(a)
js都不支持单&和单|了，单…性能低。双&&，左边为false，右边不计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 在js中,任意类型的表达式或者变量都可以作为判断条件
* 1. number : 非0为true , 0为false
* 2. string : 非空串为true，空串为false(比较重要)。可以用来判断用户是否输入内容
* 3. null : false
* 4. undefined : false
*/
var a = "用户输入的内容"
if(a){
document.writeln("true") //true
}else{
document.writeln("false")
}
document.writeln("<hr>")
</script>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
var result = 1 > false? "嘻嘻" : 10 //三元运算，java中问号后面必须同类型，js可不同
document.writeln(result) //嘻嘻 ，因为false运算时转为数字0
document.writeln("<hr>")
</script>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
/*
* == : 等等: 只比较字面值, 不比较类型。常用
*
* === : 恒等：不仅比较字面值, 比较类型。不常用，在js中判断类型意义不大，因为js弱类型。
*/
var a = "200"
var b = 200
document.writeln(a == b) // true //网页输入都是字符串
document.writeln(a === b)// false
document.writeln("<hr>")
</script>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
/*
* 运算规则: 任意类型都可运算
* 以+为例:
* 1. 任意类型+string=string
* 2. 除string之外+ number = number / NaN
* 1. boolean : true=1,false=0
* 2. null : 0
* 3. undefined : NaN(not a number)
*/
// var a = "abc"
// var b = 100
// document.writeln(a + b) // abc100
// var a = "abc"
// var b = true
// document.writeln(a + b) // abctrue
var a = "abc"
var b
document.writeln(a + b) // abcundefined
//111111111111111111111111111111111111111111111111111111111111
// var a = 100
// var b = true
// document.writeln(a + b) // 101
// var a = 100
// var b = null
// document.writeln(a + b) // 100
// var a = 100
// var b
// document.writeln(a + b) // NaN
</script>
</head>
<body>
</body>
</html>
4.案例_99乘法表
i：1到9。
j：列数=行序号，1到i。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse : collapse;
}
</style>
<!--11111111111111111111111111111111111111111111如上collapse:折叠：去除表外边框的上右线-->
<script>
document.writeln("<table border='1px' cellpadding=\"5px\" cellspacing='0px'>")
for (var i = 1; i <= 9; i++) {
document.writeln("<tr>")
for (var j = 1; j <= i; j++) {
document.writeln("<td>")
document.writeln(j + "x" + i + "=" + i * j)
document.writeln("</td>") //如下成对
}
document.writeln("</tr>")
}
document.writeln("</table>")
</script>
</head>
<body>
<!-- <table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<td></td>
</tr>
</table>
-->
</body>
</html>
Sources 》打断点》右击重新加载 》watch右边点+号 并输入想看的变量 》如下鼠标所指的下一步
B站/知乎/微信公众号：码农编程录
