JavaScript
介绍
JavaScript是一门作用在浏览器端的基于对象和事件驱动的高级的脚本语言,JavaScript主要解决了前端和用户交互的问题,包括使用交互,数据交互,当前学习的目的是为了给前端页面做功能。
HTML 负责页面内容
CSS 负责页面内容的样式
JS 负责页面内容的功能
使用环境
JavaScript和python的一个很大的区别就是JavaScript需要浏览器解释执行,是一种客户端的脚本语言,通常被嵌入到HTML当中使用。
js需要浏览器解释执行,所以不需要安装和配置环境变量的步骤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("Hello World")
</script>
</body>
</html>
JS和CSS一样可以有三种方法对HTML进行修饰:
行内式
在html标签当中,通过事件属性进行触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="alert('hello world')">
这是一个div
</div>
</body>
</html>
内嵌式
在HTML当中,使用script标签,在标签内部编写JS内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("Hello World")
</script>
</body>
</html>
script放在HTML的任何位置都可以,但是,通常一个完整的页面在顶部加载CSS,而JS通常在页面的底部进行加载也编写。
外链式
就是使用script标签的src属性指定外部的JS文件修饰HTML标签,script标签一旦有了src属性,就不可以在标签之间再次编写JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="JS/js_base.js"></script>
<script>
</script>
</body>
</html>
基本语法
注释
单行 //
多行 /**/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// JS的注释
/*
* 作者:老舍
* 脚本功能:测试。
* */
</script>
</body>
</html>
JS的代码以分号结束,不需要和python一样严谨缩进。
输出
document.write 是将内容写在页面上,可以编写HTML格式的内容。
alert是将内容作为弹窗内容展示出来,直接。
console.log 是将内容输出到浏览器的调试面板(控制台)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write("document.write: hello world");
alert("alert: hello world");
console.log("console.log: hello world")
</script>
</body>
</html>
变量
JS 和 python一样,都是弱变量语言,变量即用即生成,变量的类型由值决定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var number = 1;
var number = hello = 1;
console.log(number);
console.log(hello);
var number = 1,hello = 2;
console.log(number);
console.log(hello);
</script>
</body>
</html>
1、变量的内容必须是数字,字母,下划线,$
2、首字母不可以是数字
3、严格区分大小写
4、变量命名,见名知意,(大小驼峰命名规则)
5、不能使用关键字
数据类型
认识数据类型
number(数字)
boolean (布尔)
string (字符串)
object (对象)
null (null类型)
undifined (未定义)
返回数据类型
typeof() 返回值的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 数据类型
console.log(1);
console.log(1.1);
console.log(false);
console.log("1234");
console.log(null);
console.log(undefined);
console.log("+++++++++++++++++++++++++++++++++++++++++");
// typeof
console.log(typeof(1));
console.log(typeof(1.1));
console.log(typeof(false));
console.log(typeof("1234"));
console.log(typeof(null));
console.log(typeof(undefined));
</script>
</body>
</html>
数据类型的转换
运算转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(1+1.0); // 2
console.log(1+"a"); // 1a
console.log(1+false); // 1
console.log("a"+false); // afalse
</script>
</body>
</html>
方法转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//转字符串
// var number = 1;
// console.log(typeof(String(number))); // string
// console.log(typeof(number.toString())); // string
// var boolean = false;
// console.log(typeof(String(boolean))); // string
// console.log(typeof(boolean.toString())); // string
//转数字
// var string = "123";
// console.log(typeof(Number(string))); // number
// console.log(typeof(parseInt(string))); // number
// console.log(typeof(parseFloat(string))); // number
// console.log(parseFloat(string)); // number
//转布尔
var string = "";
console.log(typeof(Boolean(string))); // boolean
console.log(Boolean(string)); // false
</script>
</body>
</html>
运算
比较运算
运算符 | 描述 |
---|---|
> | |
< | |
>= | |
<= | |
!= | |
== | |
=== | |
!== | |
in |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(2 > 1);
console.log(2 < 1);
console.log(2 >= 1);
console.log(2 <= 1);
console.log(1.0 == 1);
console.log(1.0 != 1);
console.log(1.0 === 1);
console.log(1.0 !== 1);
console.log(true == 1);
console.log(true === 1);
</script>
</body>
</html>
逻辑运算
或(or)||
且 (and) &&
非 (not) !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//and &&
// console.log(true && true);
// console.log(true && false);
// console.log(false && true);
// console.log(false && false);
//or ||
// console.log(true || true);
// console.log(true || false);
// console.log(false || true);
// console.log(false || false);
// not !
console.log(!true);
console.log(!false);
</script>
</body>
</html>
js逻辑运算的优先级和python:
not > and > or
算术运算
运算符 | 描述 |
---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
++ | 自增 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 数学运算
console.log(1+2);
console.log(4-2);
console.log(3*2);
console.log(4/2);
console.log(3/2);
console.log(parseInt(3/2));
//自增
var a = 1;
a += 1;
a++;
++a;
console.log(a)
</script>
</body>
</html>
三目运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 三目运算
var number = 5>6?3:2;
// number是一个变量
// 等于号后面是一个条件
// 问号后面的是结果,结果以冒号分隔,
// 如果前面的条件成立,结果为冒号前面的值
// 如果前面的条件不成立,结果为冒号后面的值
console.log(number)
</script>
</body>
</html>
流程控制
在js当中,流程控制在形式上和python有区别
流程控制语句
判断
if判断
js当中if判断的关键词有:
if
else if
else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//if 判断
var number = 3.141592653;
if(number > 2){
console.log("这个数比2大!")
}else if(number > 3){
console.log("这个数比3大!")
}else {
console.log("holle world")
}
</script>
</body>
</html>
if判断需要有以下注意点:
1、if判断分为两种,第一种是一个判断,多个分支,另外一种是多个判断,每个判断单个分支。
第一种一个判断,多个分支,每次只会一个分支,当前面分支执行成功,后面分支不在执行。
第二种多个分支,另外一种是多个判断,每个判断单个分支,每个判断都会被执行。
2、判断必须把范围小的条件优先编写判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//if判断分为两种,第一种是一个判断,多个分支,另外一种是多个判断,每个判断单个分支。
var number = 3.141592653;
if(number > 2){
console.log("这个数比2大!")
}
if(number > 3){
console.log("这个数比3大!")
}else {
console.log("Holle ")
}
//判断必须把范围小的条件优先编写判断
var number = 3.141592653;
if(number > 3){
console.log("这个数比3大!")
}else if(number > 2){
console.log("这个数比2大!")
}else {
console.log("world!")
}
</script>
</body>
</html>
js还有一种特殊的判断语句,switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = 3; // 声明变量值为3
switch (a){ // 声明判断的条件是 a
case 1: // 如果a = 1执行
console.log("1");
break;
case 2: // 如果 a = 2执行
console.log("2");
break;
case 3:// 如果 a = 3执行
console.log("3");
break;
case 4:// 如果 a = 4执行
console.log("4");
break;
case 5:// 如果 a = 5执行
console.log("5");
break;
case 6:// 如果 a = 6执行
console.log("6");
break;
}
</script>
</body>
</html>
switch必须结合break进行使用,如果没有break,成立之后的所有条件都会执行。
并且循环条件必须以小括号包围,循环体必须以大括号包围。