首页 > 其他分享 >05前端开发js

05前端开发js

时间:2023-10-26 23:34:00浏览次数:33  
标签:function console log 05 标签 js var 前端开发 d1

运算符

# 1.算术运算符
var x=10;
var res1=x++;  '先赋值后自增1'  x先赋值给res1,让res变成10,x变成12
var res2=++x;  '先自增1后赋值'   x还是10,x加了2次后赋值给res2,res2变成12

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

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

流程控制

# 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都不成立执行的分支代码块
    }
     4.switch语法(一般不用,直接用if更加方便)
      var n1 = 1;
    switch (n1) {
      case 0:
      console.log("干饭");
      break;  # 如果不加break会基于当前位置一直往下运行
      case 1:
      console.log("睡觉");
      break;
      case 2:
      console.log("玩耍")
    default:  # 没有对应条件统一执行default子代码
      console.log("无所事事!!!")
    }  #case里面是条件   console.log是满足条件执行的代码块
 
# 2.while循环
    while(循环条件){
    循环体代码
  }

# 3.for循环
    for(初始值;循环条件;每次循环之后的操作){
    循环体代码
  }
  循环打印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])
    }
"""

三元运算符

python中的三元运算
    res = 11 if 1 > 2 else 22
  '''if后面的条件成立则使用if前面的值 不成立则使用else后面的值'''
js中的三元运算
    res = 1 > 2 ? 11 : 22
     '''问号前面的条件成立则使用冒号左边的值 否则使用冒号右边的值'''
# 三元运算一般情况下都不推荐嵌套使用!

函数

"""
函数定义:
  function 函数名(参数1,参数2){
    函数体代码
    return 返回值
  }
  1.function 定义函数的关键字 相当于python中的def
  2.函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
  3.参数可写可不写
  4.return返回值
函数调用:
    函数名加括号 有参则传参即可!!!
"""
# 1.无参函数
    function f1(){console.log(111)}
  f1()
# 2.有参函数
    function f2(a, b){console.log(a,b)}
  f2()  # 可以调用 相当于传了两个undefined
  f2(1)  # 可以调用 相当于传了一个1和一个undefined
  f2(1,2)  # 可以调用  1,2
  f2(1,2,3,4,5)  # 可以调用  仅接收前面两个  1,2
  
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''  #argument可以看成计数器,里面有几个关键字就返回几数字
  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 (){   #相当于function后面没有函数名了,但是还是需要一个东西接收,所以前面写了ff=
    console.log(123)
    }
# 5.箭头函数(drf中vue框架会再次接触)
    var f = v => v;
  // 等同于#(箭头左边是形参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':'jason','age':18}
python字典取值操作js中的自定义对象都有 并且自定义对象还可以直接通过句点符取值 更像一个对象
取值操作
    d1.name  # jason
循环取值
    for(var i in d1){
    console.log(d1[i])
  }
 
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d2 = new Object()  # 相当于生成了空字典

"""自行查阅往期笔记 实现字典句点符取值"""
用setattr

内置对象

# 内置对象可以看成是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 ()            获取完整年份
//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对象

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

正则对象

# 创建正则表达式的两种方式
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('jason123')   true
'''括号内什么都不写 就相当于写了undefined'''
reg2.test()                         true
"""
验证
var reg3 = /undefined/
reg3.test('undefined')            true
reg3.test()            true  
"""

# 全局匹配
在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex  #0表示从头开始取值
0
reg3.test('jason666')
true
reg3.lastIndex  #8表示正好到达jason666的尾部
8
reg3.test('jason666')
false   #可以看出js的匹配不是很好,同样的东西,一会ture,一会false,了解即可哈

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,这里的9000是以毫秒为单位
    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)

补充说明

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

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

DOM操作

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

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

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

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

'''间接查找'''
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素
# 方法得出的标签对象还可以继续点击上述方法

 

标签:function,console,log,05,标签,js,var,前端开发,d1
From: https://www.cnblogs.com/Milk1/p/17785871.html

相关文章

  • JS加密/解密之那些不为人知的基础逻辑运算符
    不多说,直接上干货使用逻辑非运算符!和双重逻辑非运算符!!:例如![]、!![]、!0、!!0和!""、!!""。空字符串的转换:!""和!!""。数组和对象的类型转换:[]+[]、[]-[]、{}+[]和[]+{}。对象和原始值的自动拆箱:例如({valueOf:()=>5})+3。减法运算符的字符串转换:例如......
  • JS异步任务的并行、串行,以及二者结合
    让多个异步任务按照我们的想法执行,是开发中常见的需求。今天我们就来捋一下,如何让多个异步任务并行,串行,以及并行串行相结合。 一、并行并行是使用最多的方式,多个相互间没有依赖关系的异步任务,并行执行能够提高效率。我们最经常用的,是Promise.all()。functionf1(){......
  • Fabric.js 图案笔刷
    本文简介带尬猴,我是德育处主任Fabric.js有图案画笔功能,这个功能可以简单理解成“刮刮卡”效果。如果只是看Fabric.js文档可能还不太明白图案画笔PatternBrush是如何使用。本文将讲解如何配置这款画笔的基础属性。图案画笔(笔刷)PatternBrush先看看效果使用图案画......
  • P4678 [BalticOI 2005] Bus Trip 题解
    P4678[BalticOI2005]BusTrip题解(RE:题解再改造!!)贴码#include<bits/stdc++.h>#defineMAXN500010usingnamespacestd;//ifstreamis("trip.in",ios::in);//ofstreamos("trip.out",ios::out);//#definecinis//#definecoutosintn,m,p,t,tote......
  • Codeforces Round#905 解题报告
    按理来说最近开始了一天一套div2计划,第一天做了一套Div1,第二天做了hustfc,第三天因为要赶latex期末考试,所以什么也没做。明天写一下hustfc比较牛的几题。A暴力怎么做,是不是加加加,然后判断。B本质上是让长度为\(i\)的后缀全是\(0\)那么找到最短的有\(i\)个\(0\)......
  • js HmacSHA256 改python
      uu.HmacSHA256(JSON.stringify(e),t).toString(uu.enc.Base64)    defdemo2(t,account,password,rsaKey):importhmacimporthashlibimportbase64aaa=f'{{"account":"{account}","password":&qu......
  • 什么是yaml格式与json格式
    什么是yaml格式与json格式yaml格式:文件名格式以.yml.yaml为后缀,用空格缩进表示字段的层级关系,可读性高,易于人类管理yaml格式布尔值类型:只有在是true/false时为真,假的意识例:debug:true 布尔值类型debug:"true"字符串类型​debug:false  布尔值类型debu......
  • JS中的4个for循环
    JS中的4个for循环介绍在ECMAScript5(简称ES5)中,有三个循环。在2015年6月发布的ECMAScript6(简称ES6)中,新增了一种循环类型。他们是:forforinforeachforof一起来看看这4个for循环。1、简单的for循环最常见的写法:constarr=[1,2,3];for(leti=0;i<arr.l......
  • 「题解」Codeforces Round 905 (Div. 3)
    before终于有一篇题解是一次性更所有题的了。A.MorningProblemA.MorningSol&Code根据题意模拟即可。#include<bits/stdc++.h>typedeflonglongll;intmin(inta,intb){returna<b?a:b;}intmax(inta,intb){returna>b?a:b;}intT;int......
  • Three.js 材质的 blending
    Three.js材质的blending//blendingmodesexporttypeBlending=|typeofNoBlending|typeofNormalBlending|typeofAdditiveBlending|typeofSubtractiveBlending|typeofMultiplyBlending|typeofCustomBlending;//customblendin......