JavaScript (2)

目录

• JS
  • 运算符
    • 算术运算符
      • 例
      • 自增
    • 比较运算符
    • 逻辑运算符
  • 条件语句
    • if 判断语句
      • 语法
      • 例
    • if...else 语句
      • 语法
      • 例
    • if...else if...else 语句
      • 语法
      • 例
    • switch 语句
      • 语法
      • 例
      • default 关键词
      • 例1
      • 例2
  • 不同类型的循环
    • for循环
      • 语法
      • 例
        • 小分析总结
      • 其他例子
    • For/In 循环
      • 语法
      • 例
    • while循环
      • 语法
      • 例
    • do/while 循环
      • 语法
      • 例
    • 比较 for 和 while
      • 使用 for 循环来显示 cars 数组中的所有值
      • 使用 while 循环来显示 cars 数组中的所有值
    • 三元运算符
      • python中的三元运算
      • js中的三元运算
  • 函数
    • 函数声明的语法
    • 无参函数
    • 有参函数
    • 返回值参数
      • 语法
    • 匿名函数
    • 箭头函数
      • 语法
      • 例
      • 更多例子
  • 对象
    • 自定义对象
    • 内置对象
      • Date对象
        • 例
        • 常用方法
        • 小练习:
    • JSON对象
      • JSON 语法规则
      • 相关函数
      • 序列化反序列
    • 正则对象
      • 什么是正则表达式？
      • 语法
        • 例
      • 创建正则表达式的两种方式
      • 使用正则
      • 全局匹配
  • BOM和DOM
    • BOM操作
    • BOM对象
    • window对象常用的方法
      • 例
      • 弹框系列
      • 计时器
        • 单次定时
        • 循环定时
    • location对象
    • navigator对象
    • screen对象
    • history对象
    • HTML DOM 树
    • DOM操作
      • 直接查找
      • 间接查找
    • 补充说明

JS

运算符

运算符 = 用于给 JavaScript 变量赋值。。

运算符 + 用于把值加起来。

算术运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

例

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
// What a verynice day

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
// What a very nice day

或者把空格插入表达式中：

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
// What a very nice day

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串

x=5+5;  // 10
y="5"+5;  // 55
z="Hello"+5;  // Hello5

自增

var x=10;
var res1=x++;  // '先赋值后自增1'
var res2=++x;  // '先自增1后赋值'

//自减也同样

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

弱等于:自动转换类型

 '5' == 5  // true
// 结果是true js会自动转换成相同数据类型比较值是否一样

强等于:不转换类型

'5' === 5  // false

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

python中使用 and、or、not
# js中使用&&、||、!

条件语句

条件语句用于基于不同的条件来执行不同的动作。

在 JavaScript 中，我们可使用以下条件语句：

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

if 判断语句

只有当指定条件为 true 时，该语句才会执行代码。

语法

if (condition)
{
    当条件为 true 时执行的代码
}

需使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

例

当时间小于 20:00 时，生成问候 "Good day"

if (time<20)
{
    x="Good day";
}

在这个语法中，没有 ..else..。也就是说，告诉了浏览器只有在指定条件为 true 时才执行代码。

if...else 语句

使用 if....else 语句在条件为 true 时执行if下子代码，在条件为 false 时执行其他代码。

语法

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

例

当时间小于 20:00 时，生成问候 "Good day"，否则生成问候 "Good evening"。

if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}

if...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

语法

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

例

如果时间小于 10:00，则生成问候 "Good morning"，如果时间大于 10:00 小于 20:00，则生成问候 "Good day"，否则生成问候 "Good evening"

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

switch 语句

使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

例

显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等

var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}

default 关键词

使用 default 关键词来规定匹配不存在时做的事情

例1

如果今天不是星期六或星期日，则会输出默认的消息

var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;

例2

var n1 = 1;
switch (n1) 
{
    case 0:
    console.log("干饭");
    break;  // 如果不加break会基于当前位置一直往下运行
    case 1:
    console.log("睡觉");
    break;
    case 2:
    console.log("玩耍")
    default:  // 没有对应条件统一执行default子代码
    console.log("无所事事!!!")
}

不同类型的循环

JavaScript 支持不同类型的循环：

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块

for循环

循环可以让代码块执行指定的次数。

语法

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
/*
    语句 1 （代码块）开始前执行
    语句 2 定义运行循环（代码块）的条件
    语句 3 在循环（代码块）已被执行之后执行
*/

例

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

/*
    语句1 在循环开始之前设置变量 (var i=0)。
    语句2 定义循环运行的条件（i 必须小于 5）。
    语句3 在每次代码块已被执行后增加一个值 (i++)。
*/

小分析总结

通常会使用语句 1 初始化循环中所用的变量 (var i=0)。可以在语句 1 中初始化任意（或者多个）值。也可以省略语句 1（比如在循环开始前已经设置了值时）。

通常语句 2 用于评估初始变量的条件。语句 2 同样是可选的。如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
# 如果省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。

通常语句 3 会增加初始变量的。语句 3 也是可选的。语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。语句 3 也可以省略（比如当循环内部有相应的代码时）

其他例子

// 循环打印0到9的数字
for (var i=0;i<10;i++) {
	console.log(i);
}


// 使用for循环打印出数组内所有的元素
var l1 = [11, 22, 33, 44, 55]
for(var i=0;i<l1.length;i++){
	console.log(l1[i])
}

For/In 循环

for/in 语句循环遍历对象的属性

语法

for (属性名 in 对象名)
{
    被执行的代码块
}

例

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

while循环

只要指定条件为 true，循环就可以一直执行代码块。

语法

while (条件)
{
    需要执行的代码
}

例

只要变量 i 小于 5，循环将继续运行

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

如果忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

do
{
    需要执行的代码
}
while (条件);

例

使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

比较 for 和 while

使用 for 循环来显示 cars 数组中的所有值

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
    document.write(cars[i] + "<br>");
    i++;
}

使用 while 循环来显示 cars 数组中的所有值

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
    document.write(cars[i] + "<br>");
    i++;
}

三元运算符

python中的三元运算

# if后面的条件成立则使用if前面的值,不成立则使用else后面的值
res = 11 if 1 > 2 else 22

js中的三元运算

// 问号前面的条件成立则使用冒号左边的值,否则使用冒号右边的值
res = 1 > 2 ? 11 : 22

三元运算一般情况下都不推荐嵌套使用

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

函数声明的语法

function 函数名(参数1,参数2){
    函数体代码
    return 返回值
  }

1.function 定义函数的关键字,相当于python中的def
2.函数名的命名参考变量名,并且js推荐使用驼峰体(Myfunc\MyFunc)
3.参数可写可不写
4.return返回值
// 函数调用:
	函数名加括号 有参则传参即可

函数声明后不会立即执行，会在我们需要的时候调用到。

分号是用来分隔可执行JavaScript语句。
# 由于函数声明不是一个可执行语句，所以不以分号结束。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。

无参函数

function f1(){
    console.log(111)
}
f1()

有参函数

在调用函数时，您可以向其传递值，这些值被称为参数。

可以有任意多的参数，由逗号 (,) 分隔

myFunction(参数1,参数2)

//当声明函数时，把参数作为变量来声明
function myFunction(var1,var2)
{
代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

function f2(a, b){
    console.log(a,b)}

f2()  // 可以调用 相当于传了两个undefined
f2(1)  // 可以调用 
f2(1,2)  // 可以调用
f2(1,2,3,4,5)  // 可以调用 

js中的函数提供了有个内置关键字arguments:接收所有参数

function f2(){
	console.log(arguments)
	if (arguments.length === 0){
		console.log('什么参数都没传')
	}else if(arguments.length === 1){
		console.log('传了一个参数')
	}else{
		console.log('传了多个参数')
	}
}

返回值参数

使用 return 语句就可以让函数将值返回调用它的地方

在使用 return 语句时，函数会停止执行，并返回指定的值。

return不支持返回多个数据

语法

function myFunction()
{
    var x=5;
    return x;
}
// 函数会返回值 5

匿名函数

(函数没有名称)

var ff = function (){
    console.log(123)
}

函数表达式可以存储在变量中

var x = function (a, b) {return a * b};

在函数表达式存储在变量后，变量也可作为一个函数使用

var x = function (a, b) {return a * b};
var z = x(4, 3);

箭头函数

箭头函数表达式的语法比普通函数表达式更简洁。

语法

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的

(单一参数) => {函数声明}
单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号

() => {函数声明}

例

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

更多例子

var f = v => v;
// 等同于(箭头左边是形参右边是返回值)
var f = function(v){
	return v;
}


var f = () => 5;
// 等同于
var f = function(){return 5};


var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
	return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

js的作用域与python一致

对象

自定义对象

# 自定义对象(相当于python里面的字典)
var d1 = {'name':'jojo','age':18}
python字典取值操作js中的自定义对象都有，并且自定义对象还可以直接通过句点符取值，更像一个对象

# 取值操作
	d1.name  # jojo
    
# 循环取值
	for(var i in d1){
    console.log(d1[i])
  }
 
# 定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object()  # 相当于生成了空字典

内置对象

内置对象可以看成是python中的内置方法 内置模块等提前写好直接调用

Date对象

Date 对象用于处理日期与时间。

创建 Date 对象： new Date()

以下四种方法同样可以创建 Date 对象:

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

例

var d1 = new Date()
d1.toLocaleString()			'2022/4/28 10:47:01'
d1.toLocaleDateString()	'2022/4/28'
d1.toLocaleTimeString()	'10:47:01'

常用方法

getDate()				// 获取日

getDay ()				// 获取星期

getMonth ()				// 获取月（0-11）

getFullYear ()			// 获取完整年份

getYear ()				// 获取年

getHours ()				// 获取小时

getMinutes ()			// 获取分钟

getSeconds ()			// 获取秒

getMilliseconds ()		// 获取毫秒

getTime ()				// 返回累计毫秒数(从1970/1/1午夜)

小练习:

2017-12-27 11:11 星期三

const WEEKMAP = {
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定义一个数字与星期的对应关系对象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

JSON对象

JSON 英文全称 JavaScript Object Notation

JSON是独立的语言

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

JSON 语法规则

·数据为 键/值 对。 # "name":"jojo"
·数据由逗号分隔。
·大括号保存对象  # {"name":"bilibili", "url":"www.bilibili.com"}
·方括号保存数组(数组可以包含对象)
'''
 "sites":[
    {"name":"bilibili", "url":"www.bilibili.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]
'''
# 上面的对象 "sites" 是一个数组，包含了三个对象。

相关函数

序列化反序列

# python中如何序列化反序列
	import json
  json.dumps()
  json.loads()
# js中如何序列化反序列化
	JSON.stringify()
  JSON.parse()

正则对象

什么是正则表达式？

·正则表达式是由一个字符序列形成的搜索模式。

·当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

·正则表达式可以是一个简单的字符，或一个更复杂的模式。

·正则表达式可用于所有文本搜索和文本替换的操作。

语法

/正则表达式主体/修饰符(可选)

例

var patt = /runoob/i

/*
/runoob/i  是一个正则表达式。
runoob  是一个正则表达式主体 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)。
*/

创建正则表达式的两种方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)

使用正则

reg2.test('jojo123')  // true

// 括号内什么都不写 就相当于写了undefined
reg2.test()  // true

// 验证:
var reg3 = /undefined/
reg3.test('jojo666')  // false
reg3.test('undefined')  // true
reg3.test()  // true

全局匹配

// 在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex
// 0
reg3.test('jojo666')
// true
reg3.lastIndex
// 8
reg3.test('jojo666')
// false

BOM和DOM

BOM操作

Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”

BOM对象

// window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性:
  document 对象，文档对象；
  location 对象，浏览器当前URL信息；
  navigator 对象，浏览器本身信息；
  screen 对象，客户端屏幕信息；
  history 对象，浏览器访问历史信息；

window对象常用的方法

//  弹框类的方法。前面省略window

alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址"，“打开的方式（可以是-self或-black）”，“新窗口的大小”） // 注：如果url为空，则默认打开一个空白页面，如果打开方式为空，则默认为新窗口方式打开页面。返回值为：返回新打开窗口的window对象
  window.open('https://www.baidu.com','','width=400,height=400')
close()  关闭当前的网页。 注：存在兼容性问题  FF：禁止设置关闭浏览器的代码
                                        Chrome：默认直接关闭
                                        IE：询问用户

window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸


// 定时器，清除定时器。

setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行

clearTimeout/clearInterval(定时器名称) 清除定时器

例

window.open('https://www.baidu.com','','width=400,height=400')
# 打开子页面 
	子页面的操作其实可以通过一些手段传递给父页面(父子联动)
# 关闭页面
	window.close()  

弹框系列

alert("你看到了吗？")		// 警告

confirm('要不要吃点好吃的')		// 确认
	获取用户是点击取消还是确认 返回false和true
    
prompt('你还有什么要交代的吗')		// 提示
	获取用户输入的内容 也可以通过第二个参数添加默认内容

计时器

单次定时

var t = setTimeout(showMsg,9000)  // 9秒钟之后自动执行showMsg
clearTimeout(t)  // 取消定时器

循环定时

var s = setInterval(showMsg,3000)  // 每隔3秒执行一次
clearInterval(s)  // 取消定时器
  
function showMsg() {
	alert(123)
}
var t = setInterval(showMsg,3000)
function clearMsg() {
	clearInterval(t)
}
setTimeout(clearMsg, 9000)

location对象

// window.location对象：用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

window.location.href // 获取页面的url地址
window.location.href = url  // 跳转到指定页面
window.location.reload()  // 刷新页面
/* window可以省略不写 */



hash  // 返回#号后面的字符串，不包含散列，则返回空字符串。

host  // 返回服务器名称和端口号

pathname  //返回目录和文件名。 /project/test.html

search  // 返回？号后面的所有值。

port  // 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串

portocol  // 返回页面使用的协议。 http:或https:

navigator对象

// window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

navigator.platform  // 操作系统类型；

navigator.userAgent  // 浏览器设定的User-Agent字符串。

navigator.appName  // 浏览器名称；

navigator.appVersion  // 浏览器版本；

navigator.language  // 浏览器设置的语言；

// userAgent是最常用的属性，用来完成浏览器判断。

screen对象

// window.screen 对象包含有关用户屏幕的信息。

screen.availWidth  // 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。   
screen.availHeight  // 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

history对象

// window.history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

history.back() - 加载历史列表中的前一个 URL。返回上一页。
history.forward() - 加载历史列表中的下一个 URL。返回下一页。   
history.go(“参数”) -1表示上一页，1表示下一页。

window.history.forward()   // 返回下一页
window.history.back()   // 返回上一页
window.history.go(-1/1)   // 返回上一页或下一页、
window.history.go("www.baidu.com")；

HTML DOM 树

HTML DOM 模型被构造为对象的树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

·JavaScript 能够改变页面中的所有 HTML 元素
·JavaScript 能够改变页面中的所有 HTML 属性
·JavaScript 能够改变页面中的所有 CSS 样式
·JavaScript 能够对页面中的所有事件做出反应

DOM操作

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)

直接查找

// 通过标签名查找标签
document.getElementsByTagName('div')  // 数组套标签对象

// 通过class值查找标签
document.getElementsByClassName('c1')  // 数组套标签对象

// 通过id值查找标签
document.getElementById('d1')  // 标签对象本身

间接查找

parentElement			// 父节点标签元素

children			// 所有子标签

firstElementChild		// 第一个子标签元素

lastElementChild		// 最后一个子标签元素

nextElementSibling		// 下一个兄弟标签元素

previousElementSibling		// 上一个兄弟标签元素

// 方法得出的标签对象还可以继续点击上述方法

补充说明

由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕 

解决的措施之一:
  	将script标签写在body内最下方