前端3js：原始类型，运算符，调试，页面加载，轮播图
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端3js：原始类型，运算符，调试，页面加载，轮播图相关的知识，希望对你有一定的参考价值。
文章目录
1.js两种引入：js语言, 最终要引入到html在浏览器中运行
<!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>
<!--111111111111111111111111111111111111111111111111111111111111111111111-->
<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>
<!--
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五大原始类型：undefined
<!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的运算符和流程控制：js不支持单&和单|性能低
判断用户是否输入内容：java如下，js中直接写if(a)
<!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乘法表：Sources调试
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>
<!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<!-- <table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<td></td>
</tr>
</table>
-->
</body>
</html>
Sources 》打断点》右击重新加载 》watch右边点+号 并输入想看的变量 》如下鼠标所指的下一步
5.函数的基本语法：function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* java :
* public static void main(String[] args){
* 方法体
* }
* 修饰符 返回值类型 方法名(参数列表) {方法体}
*
* js :
* function 函数名(参数列表){ 函数体}
*
* 注意点:
* 1. 参数列表不写var
* 2. 如果有返回值,直接return
* 3. 调用函数时,传入的参数个数不限制
* 4. 函数内部有个默认参数, arguments (本质数组 : 调用此函数传入的所有参数)
*/
function method01() {
console.log("控制台输出")
}
method01()
//111111111111111111111111111111111111111111111111111111111111111111111111111111
function method02(a,b) {
// return a + b;
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i]
}
return sum;
}
var result = method02(1) //return a + b;为NaN （因为b undefined） //如上arguments输出为1
var result = method02(1,2,3) //return a + b;为3 //如上arguments输出为6
console.log(result)
</script>
</head>
<body>
</body>
</html>
6.函数的两种变量和两种定义：全局/局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a = 1; //全局，外面隐含var c;
function method01() {
var b = 2; //局部
c = 3; // 没有写var为全局变量
document.writeln("内部:" + a)
document.writeln("内部:" + b)
document.writeln("内部:" + c)
}
method01()
document.writeln("外部:" + a)
document.writeln("外部:" + c)
// document.writeln("外部:" + b) //访问不到
</script>
<!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
document.writeln("另一个script:" + a) //可访问到，等价于上面document.writeln("外部:" + a)
</script>
<!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
/*
* 两种定义:
* 1. 命名函数
* function 函数名(参数列表){
* }
* 2. 匿名函数
* 变量名 = function(参数列表) { }
*/
document.writeln("<hr>")
function method02() {
document.writeln("2")
}
method02()
//如下没有函数名
var m = function (a,b) {
return a + b;
}
var result = m(1,2)
document.writeln(result)
</script>
<!--111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
function method03(xx) { //xx=匿名函数 ，函数回调(callback)：xx()
xx()
}
method03( function(){document.writeln("哈哈")} ) //最终打印 哈哈
</script>
</head>
<body>
</body>
</html>
7.事件的两种注册：js事件驱动语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 事件 (event，实现和用户的交互): 发生在html元素上的事：1.用户输入的行为
* 2.浏览器自己的行为
*
* 事件A : onclick (单击事件 : 当用户单击鼠标左键的时候触发)
*
* 事件绑定函数(事件注册)
* 1. 命名注册
* 1. 首先声明一个命名函数
* 2. 每个标签都有事件属性：onclick = "method01()"，当单击事件被触发的时候,method01执行。
* 2. 匿名注册
* 1. 先找到html标签, 生成对象
* 2. 给对象的事件属性 赋值一个匿名函数
*/
function method01() {
console.log("xx")
}
</script>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="命名注册" onclick="method01()"> <br><br>
<input type="button" value="匿名注册" id="myid">
</body>
</html>
<!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
//1. 如下先找到html标签, 生成对象 (id选择器)
var btn = document.getElementById("myid");
//2. 如下给对象的事件属性 赋值一个匿名函数，不用上面的method01()
btn.onclick = function (ev) { // 回调函数 (一个函数是我们定义的,但不是我们调用,但最终还是执行的)
console.log("yy")
}
</script>
8.页面加载事件：当浏览器加载完整个html页面时才触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script分别用css3JS实现图片简单的无缝轮播功效