【JavaScript的基本使用】

文章目录

• • • JavaScript函数
    • • 函数定义:
      • 函数调用:
      • 1.无参函数
      • 2.有参函数
      • 3.返回值参数
      • 4.匿名函数
      • 5.箭头函数(drf中vue框架会再次接触)
    • JavaScript自定义对象
    • JavaScript内置对象
    • JavaScript作用域
    • • JavaScript 局部作用域
      • JavaScript 全局变量
      • 变量生命周期
    • Java运算符
    • JavaScript if语句
    • JavaScript Switch语句
    • JavaScript 循环
    • • for循环
      • while 循环
      • do/while 循环
    • JavaScript正则表达式
    • JavaScript JSON
    • JavaScript BOM
    • • 打开子页面
      • 关闭页面
      • 弹框系列
      • 计时器

JavaScript函数 函数定义:

function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function 定义函数的关键字 相当于python中的def
2.函数名的命名参考变量名 并且js推荐使用驼峰体(MyfuncMyFunc)
3.参数可写可不写
4.return返回值

函数调用:

函数名加括号 有参则传参即可!!!

“”"

1.无参函数

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

f1()

2.有参函数

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(‘传了多个参数’)
}
}

3.返回值参数

return不支持返回多个数据

4.匿名函数

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

5.箭头函数(drf中vue框架会再次接触)

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一致)

JavaScript自定义对象

自定义对象(相当于python里面的字典)
var d1 = {‘name’:‘jason’,‘age’:18}
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
取值操作
d1.name # jason
循环取值
for(var i in d1){
console.log(d1[i])
}

定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object() # 相当于生成了空字典

JavaScript内置对象

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

1.Date对象

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 ()	getFullYear ()
getYear ()	获取年
getHours ()	获取小时
getMinutes ()	获取分钟
getSeconds ()	获取秒
getMilliseconds ()	获取毫秒
getTime ()	返回累计毫秒数(从1970/1/1午夜)

JavaScript作用域

作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明，变量为局部变量，具有局部作用域。

局部变量：只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁

JavaScript 全局变量

变量在函数外定义，即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

以下实例中 carName 在函数内，但是为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
} 

变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

Java运算符

1.算术运算符

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

2.比较运算符
弱等于:自动转换类型

 '5' == 5  '结果是true js会自动转换成相同数据类型比较值是否一样'
 强等于:不转换类型
 '5' === 5  '结果是false'

3.逻辑运算符
python中使用 and、or、not
js中使用&&、||、!

JavaScript if语句

1.单if分支
  	if(条件){
      条件成立执行的分支代码块
    }
  2.if...else分支
  	if(条件){
      条件成立执行的分支代码块
    }else{
      条件不成立执行的分支代码块
    }
  3.if...else if...else分支
  	if(条件1){
      条件1成立执行的分支代码块
    }else if(条件2){
      条件1不成立条件2成立执行的分支代码块
    }else{
      条件1和2都不成立执行的分支代码块
    }

JavaScript Switch语句

switch 语句 - 使用该语句来选择多个代码块之一来执行

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

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

 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 循环

不同类型的循环
JavaScript 支持不同类型的循环：

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

for循环

for(初始值;循环条件;每次循环之后的操作){
循环体代码

}
循环打印0到9的数字

  for (var i=0;i<10;i++) {
    console.log(i);
  }
  ```
####  For/In 循环
JavaScript for/in 语句循环遍历对象的属性：
```python
var person={fname:"Bill",lname:"Gates",age:56}; 

for (x in person)  // x 为属性名
{
  txt=txt + person[x];
}

while 循环

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

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

do/while 循环

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

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

JavaScript正则表达式

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

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

3. 使用正则
   reg2.test(‘jason123’) true
   ‘’‘括号内什么都不写 就相当于写了undefined’‘’
   reg2.test() true
   “”"
   验证
   var reg3 = /undefined/
   reg3.test(‘jason666’) false
   reg3.test(‘undefined’) true
   reg3.test() true
   “”"

4. 全局匹配
   3.1 创建正则表达式的两种方式

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

5. 使用正则

reg2.test('jason123')   true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test() 						true
"""
验证
var reg3 = /undefined/
reg3.test('jason666')		false
reg3.test('undefined')	true
reg3.test()							true
"""

6. 全局匹配
   在正则表达式的最后添加一个字母g

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex
0
reg3.test('jason666')
true
reg3.lastIndex
8
reg3.test('jason666')
false

JavaScript JSON

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

JavaScript BOM

Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
window.open(‘https://www.baidu.com’,‘’,‘width=400,height=400’)

打开子页面

子页面的操作其实可以通过一些手段传递给父页面(父子联动)

关闭页面

window.close()  
 
window.navigator.appVersion
window.navigator.userAgent


window.history.forward()  # 前进一页
window.history.back()  # 后退一页


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

弹框系列

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

'''直接查找'''
#### 通过标签名查找标签
document.getElementsByTagName('div')  # 数组套标签对象
#### 通过class值查找标签
document.getElementsByClassName('c1')  # 数组套标签对象
#### 通过id值查找标签
```javascript
document.getElementById('d1')  # 标签对象本身

'''间接查找'''
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素