JavaScript_python

最新推荐文章于 2022-09-27 18:39:04 发布

~小火苗

最新推荐文章于 2022-09-27 18:39:04 发布

阅读量393

点赞数

分类专栏： python 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_54183294/article/details/125441083

版权

python 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

JavaScript

注释

#  js的注释:
	//     单行注释
	/**/  多行注释

#  js的引入方式:

1. script内部书写
2. script	src属性引入外部js文件

# 结束：
	js是用分号作为语句的结束但是你不写基本也没问题

常量和变量

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
在 ES6 之前，JavaScript 只有两种作用域：全局变量与函数内的局部变量。

""" 
var只有两种作用域： 全局变量 与 函数内的局部变量
let 声明的变量只在 let 命令所在的代码块       { }	内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
"""
# var :
在函数外声明的变量作用域是全局的：全局变量在 JavaScript 程序的任何地方都可以访问。在块中重新声明变量也会重新声明块外的变量：

在函数内声明的变量作用域是局部的（函数内）：函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。
# let:
let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量
------------------------------------------------------------------------------------------------
{ 
    let x = 2;
}
// 这里不能使用 x 变量
------------------------------------------------------------------------------------------------
var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2
------------------------------------------------------------------------------------------------
var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

变量名的命名规范

js变量的命名规范
            1.变量名只能是
            	数字，字母，下划线，$
            2.变量名命名规范(不遵循也可以)
            1. js中推荐使用驼峰式命名
                    userName
                    dataOfDb
            2. python推荐使用下划线的方式
                    user_ name
                    data _of_ db
            3.不能用关键字作为变量名
            	不需要记忆
            	
js代码的书写位置
        1.可以单独开设js文件书写
        
        2.还可以直接在浏览器提供的console界面书写
        	在用浏览器书写js的时候左上方的清空按钮只是清空当前页面代码其实还在
        	如果你想要重新来最好重新开设-个页面
        (在使用浏览器书写你自己的js代码的时候推荐你在自己的htm1页面打开)

数据类型

js / python 是一门拥有动态类型

name =‘j ason
name=123
name = [1,2,3,4]
# name可以指向任意的数据类型
#但是有一些语言中，变量名之内指向一种后续不能更改


vara=11;
var b = 11.11;
//如何查看当前数据类型
typeof a;

var	a=11;
var  b = 11.11;
typeof a;
typeof b;
// "number"


//   特殊的NaN:数值类型表示的意思是“不是一 个数字” NOT A NUMBER
//   类型转换
        parseInt( )
        parseFloat()

parseInt( '12312312')
12312312
parseFloat('11.11' )
11.11
parseInt('11.11')
11
parseInt( '123sdasdajs2312dasd' )    只要字符串的开头有数字就行
123
parseInt( ' asdasdadl23sdasdajs2312dasd )
NaN

字符串类型

var s = ' jason'
undefined
typeof s
"string"
var s1 = "jason "
undefined
typeof s1;
"string"
var s2 = '''egon'''   //不支持三引号
VM665:1 Uncaught SyntaxError: Unexpected string

//模版字符串
var s3 =`
asdkajsd
sdjkladj
asdjlajdkl
`

typeof s3
"string
//模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
var name =' jason

var age = 18

var sss =`
my name is ${name} and my age is ${age}
`
sss
"
	my name is jason and my age is 18
"

//	字符串的拼接
//	在python中不推荐你使用+做拼接，推荐使用  join
//	在js中推荐你直接使用+做拼接
name  +  age

方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzOPmFza-1656038230772)(C:\Users\宋增\Pictures\联想锁屏壁纸\QQ截图20210820211914.png)]

布尔值

"""
1.  在python中布尔值是首字母大写的
    True
    False
2.  但是在js中布尔值是全小写的
    true
    false
#  布尔值是false的有哪些
    空字符串、0、null、undef ined、NaN
"""

null和undefined

"""
null
        表示值为空一般都是指定或者清空一个变量时使用
                name =' jason'
                name = null
undef ined
	表示声明了一个变量但是没有做初始化操作(没有给值)
"""

对象

数组（类似python里面的列表）

var k = [11,  22,  33,  44,  55]

typeof   k
"object"
var kk = [11,   'sdasd' ,  11.11,   true]

kk[1]
"sdasd"
kk[-1] # 不支持负数索引

自定义对象（类似python里面的字典）{}

#  定义：
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

# 访问对象属性
   person.lastName;
   
   person["lastName"];
    
for  (   let   i   in   d  ){
	console.1og(i,d[i])    #支持for循环暴露给外界可以直接获取的也是键
) 
    
"""
第二种创建自定义对象的方式需要使用关键字 new
"""
var d2  =  new object()         # {}
    
d2.name = " jason"
{name:” jason"}
 
d2[ 'age' ] = 18
{name:" jason", age: 18)

运算符

#算术运算符
varx=10;
var res1 = x++;
var res2 = ++X;
res1 10
res2 12
++表示自增1类似于+=1
加号在前先加后赋值加号在后先赋值后加


#比较运算符
1 ==' 1'        弱等于内部自动转换成相同的数据类型比较了
true


1 === '1' 	强等于内部不做类型转换
false

#逻辑运算符
# 	python  中   and    or     not
#             js中       &&     ||       !

5    &&    '5'
'5'


0  ||  1
1

15 && '5'
5
"""
-一定要注意到底	什么时候返回的是布尔值		什么是返回的是数据
"""


#赋值运算符
=   +=   -=   *=  ..........

流程控制

# if判断
var age=28;
# if(条件){条件成立之后指向的代码块}
if (age>18){
	console.log('来响来啊')
}

# if-else
if (age>18){
    	console. log('来啊来啊' )
}else{
    console.1og('没钱滾蛋')
}

	
# if-else if else
if (age<18){
	console. log("培养- -下")
}else if (age<24){ 
	console. log( '小姐姐你好我是你的粉丝‘)
}else {
	console. log( '你是个好人')
}
"""
在js代码中是没有缩进的
"""
                 
var nun = 2;
switch( num) {
case 0:
            console.log(   '喝酒'  );
            break;
case 1 :
             console.log(  '唱歌'  );
            break;
default : 
	    console. log( '条件都没有匹配上默认走的流程");
}
                     
                     
                     
                     
#  for循环
#  打印0-9数字
for( let i=0;  i<10;  i++){
	console.1og(i)
}
                     
#  题目1 循环打印出数组里面的每一 个元素
var ll = [111,  222,  333,  444555,   666]
for(1et i=0;   i < ll.length;   i++){
	console.log(ll[i])
)
    
# while循环
vari=0
while(i<100){
	console. log(1 )
	i++;
)

    
#  三元运算符
#  python中三元运算符    res = 1  if  1 > 2  else  3
#  JS中三元运算res   =  1  >  2  ?  1  :  3
条件成立取问好后面的1不成立取冒号后面的3

函数

#  在python定 义函数需要用到关键字  def
#  在js中定义函数需要用到关键字  function

#  格式
function   函数名(形参1,  形参2,  形参3...  ){  函数体代码  }

#  无参函数
function func1(){
	console.log( 'hello world')
}

func1（） # 调用加括调用跟python是一 样的

#有参函数
function  func2 ( a , b ) {
	console.1og(a,b)
}

func2（a , b）


func2   (1,  2,  3,  4,  5,  6,  7,  8,  9)	   # 多了没关系只要对应的数据
VM3610:2   1 2
undefined

func2(1) 	# 少了也没关系
VM3610:2   1 undefined
    
#  关键字arguments
function func2(a,b) {
	console. log  ( arguments )         # 能够获取到函数接受到的所有的参数
	console.log  (a,  b)
}

#函数的返回值使用的也是 关键字return
function index(){
	return 666
}

function index( ){
	return 666,777, 888,999
}
res = index( );
999
res
999  # 只能拿到最后一个


function index( ){
	return [ 666,777,888,999]
)
# js不支持解压赋值
    
#匿名函数 就是没有名字
function( ) {
	console. log( '哈哈哈')
}
var res = function(){
	console. log( "哈哈哈')
 }
                 
#  箭头函数(要了解一 下)
var    func1  =  v  =>   v;       """ 箭头左边的是形参右边的是返回值"""
等价于
var func1  =  function(v){
	return V
}
    
                 
var    func2 =  (arg1,arg2)  = a rg1+arg2
等价于
var funcl = function(arg1,arg2){
	return  arg1+arg2
}

日期对象

let d3 =  new Date( )
Pri May 15 2020 14:41:06 GMT+0800 ( 中国标准时间)
        
d3. toLocaleString( )
" 2020/5/15下午2:41:06 "

#也支持自己手动输入时间
let d4 = new Date( ' 2200/11/11 11:11:11')
d4.toLocaleString( )
let d5 = new Date(1111,11,11,11,11,11)
d5. toLocalestring()     #月份从0开始  0-11月
“1111/12/11   上午11:11:11"

#时间对象具体方法
let d6 = new Date() ;
d6.getDate()	   获取日
d6.getDay()		  获取星期

d6.getMonth( ）     获取月份(0-11 )

d6.getFullYear( )	获取完整的年份

d6.getHours ( I	      获取小时

d6.getMinutes( )      获取分钟

d6.getSeconds( )      获取秒

d6.getMilliseconds()  获取毫秒
d6.getTime()	      时间戳

JSON对象

"""
1：持久保存状态
2：跨平台数据交互
"""
在python中序列化反序列化
	dumps     序列化
	loads        反序列化


在js中也有序列化反序列化
JSON. stringify( )			dumps

JSON.parse ()			    loads

let  d7  =  {'name':"jason', 'age' :18)
let  res666  =  JSON.stringify(d7)
"(" name":"jason",”age":18}"

JSON. parse(res666)
{name:"jason", age: 18)

RegExp对象

"""
在python中如果需要使用正则需要借助于re模块
在js中需要你创建正则对象
"""
#  第一种有点麻烦
let reg1 = new RegExp('"[a-ZA-Z][a-2A-20-9]{5,11}')
#  第二种个人推荐
let reg2 = /^[a-zA-2][a-2A-20-9]{5,11}/

#匹配内容
reg1.test(‘egondsb' )
reg2.test( 'egondsb' )
          
#题目获取字符串里面所有的字母s
let  sss =  'egondsb dsb dsb'
sss.match  (  /s/  )        # 拿到一个就停止了
sss.match  ( /s/g  )           #全局匹配g就表示全局模式
          
sss .match(/s/)
["s"，index: 5，input: "egondsb dsb dsb" ，groups: undefined ]
sss .match(  /s/g  )
(3) ["s", "s"，"s"]

 #全局匹配模式吐槽点
let reg3  = /^[a-2A-Z][a-2A- 20-9](5,11}/g
reg2. test( 'egondsb' )
reg3. test( 'egondsb')       # 全局模式有-个lastIndex属性
true
reg3. test( ' egondsb' )
false
reg3.test( 'egondsb' )
true
reg3. test( 'egondsb' )
false
                                   
reg3.last Index
 0
reg3. test( 'egondsb' )
true
reg3.lastIndex
7
                                   
#  吐槽点二
let reg4 = /^[a-zA-Z][a-ZA-20-9]{5,11}/
reg4.test( )
reg4.test()     # 什么都不传默认传的是undef ined
true
reg4.test( )
true
                                   
reg4. test ( undef ined)
true
let reg5  =  /undefined/
undef ined
reg5.test('jason' )
false
reg5. test( )
true

BOM与DOM操作

"""
BOM
浏览器对象模型		Browser object Model
	js代码操作浏览器

DOM
文档对象模型		Document object Model
	js代码操作标签
"""

BOM操作

#   window对象
window对象指代的就是浏览器窗口 

window. innerHeight	  浏览器窗口的高度
900
window. innerWidth	浏览器窗口的宽度
1680

window. open( 'https:/ /www . mzitu.com/','' ,'height=400px, width= 400px, top=40
0px, left=400px')
#   新建窗口打开页面第二个参数写空即可第三个参数写新建的窗口的大小和位置
#   扩展父子页面通信window . opener()   了解
             
window. close()	   关闭当前页面

window子对象

window. navigator . appName
"Netscape "

window . navigator . appVersion
"5.0 (Macintosh; Intel Mac OS X 10_ 14_ 6) AppleWebKit/537.36 (KHTML， like
Gecko) Chrome/81.0.4044. 138 Safari/537.36"

window. navigator . userAgent           掌握       #      用来表示当前是否是一个浏览器
"Moz illa/5.0 (Macintosh; Intel Mac OS X 10_ _14_ 6) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

扩展:仿爬措施
        1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
                userAgent
                user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_ 14_ _6)
          AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138
          Safari/537.36
        如何破解该措施
        	在你的代码中加上上面的user- agent配置即可
            
 window. navigator. platform
"MacIntel"

#    如果是window的子对象 那么window可以省略不写

history对象

window.history 对象包含浏览器的历史。

window. history . back( )		回退到上一页

window. history . forward( )	  前进到下一页
#对应的就是你浏览器左上方的两个的箭头

location对象（掌握）

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window. location. href		#获取当前页面的url

window. location.href = url	  #跳转到指定的url

window. location. reload()      # 属性页面	 浏览器左上方的小圆圈

弹出框

警告框
确认框
提示框

alert ('你不要过来啊! ! ! ')
undefined
confirm( '你确定真的要这么做吗?能不能有其他方式能够满足你...')
false 
confirm( '你确定真的要这么做吗?能不能有其他方式能够满足你...')
true
prompt( '手牌号给我看- -下' ,'22号消费888')
'来宾三位'

计时器相关

过一段时间之后触发(一次)|
每隔一段时间触发一次(循环)

<script>
            function func1()
    	{
           	      alert (123)
            }
            Let t = setTimeout(func1, 3000);	 //毫秒为单位3秒之后自动执行func1函数
    
            cLearTimeout(t)
            //取消定时任务 如果你想要清除定时任务需要日前用变量指代定时任务
    
            function func2() 
            {
            	aLert(123)
            }
    
            function show()
    	{
           		   Let t = setInterval(func2,3000);	 // 每隔3秒执行- -次
            
                        function inner()
               		 { 
                        	cLearIntervaL(t)       	       // 清除定时器
                  	     }
            
                        setTimeout(inner, 9000) 	// 9秒中之后触发
      	  }
            show( )
</script>

DOM操作

"""
DOM树的概念

所有的标签都可以称之为是节点

JavaScript可以通过DOM创建动态的HTML:
    
JavaScript能够改变页面中的所有HTML元素
JevaScript能够改变页面中的所有HTNL 属性
JavaSeript能够改变页面中的所有css样式
JavaScript能够对页面中的所有事件做出反应


DOM操作操作的是标签而一个htm1页面上的标签有很多
1.先学如何查找标签
2.再学DOM操作标签
""''

DOM操作需要用关键字document起手

查找标签

<body>
    
    <div id = "d1">div
        <div>  div>div</div>
        <p class = "c1">div>p
            	<span>div>p>span</span>
        </p>
        <p>div>p</p>
    </div>
    
    <div>div>p</div>
    
</body>

直接查找(必须要掌握)

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

"""
id查找
类查找
标签查找
#注意三个方法的返回值是不一样的
"""
document. getElementById( 'd1')
<div id=*"d1">*...*</div>*
------------------------------------------------------------------------------------------------
document. getElementsByClassName( 'c1')
HTMLCollection  [p.c1]
            0 :   p.c1
            length:  1
            _ proto__ :   HTMLCollection
-------------------------------------------------------------------------------------------------            
document. getElementsByTagName( 'div') 
HTMLCollection(3)    [div#d1， div#d1,   div,    d1 :   div#d1 ]
		   0 :   div#d1
		   1 :   div
		   2 :   div
           		 length:  3
           	      d1 :   div#d1
                    _ proto__ :   HTMLCollection

-------------------------------------------------------------------------------------------------
let  divEle  =  docunent .getElementsByTagName ( 'div' ) [1]
divBle
<div> *div>div.</div>.
"""
当你用变量名指代标签对象的时候- -般情况下都推荐你书写成
xxxEle 
        divEle
        aEle 
        pEle
"""

间接查找(熟悉)

let   pEle =  document . getElementsByClassName('c1')[0]
#注意是否需要索引取值

pEle . parentElement     #拿父节点

pEle. parentElement . parentElement   
# <body>
pEle.parentElement. parentElement. parentElement
#<html>

1et divEle = document . getEl ementById( 'd1')
divEle. children     # 获取所有的子标签

divEle . children[0] 

divEle. firstElementChild	 # 第一个子标签元素

divEle. lastlementChild		# 最后一个子标签元素

divEle. nextElementSibling        #同级别下面第一个

divEle. previousElementsibling   # 同级别上面第一个

节点操作

"""
通过DOM操作动态的创建img标签
并且给标签加属性
最后将标签添加到文本中
"""
let  imgEle  =   document . createElement( 'img')      # 创建标签

imgEle.src = ' 111.png'     # 给标签设置默认的属性
"111. png"
imgEle

imgEle. username = 'jason'    # 自定义的属性没办法点的方式直接设置
"jason"
imgEle
<img src="111 .png">

imgEle. setAttribute( 'username'，'jason')   # 既可以设置自定义的属性也可以置默认的书写
undef ined
imgEle
<img src="111. png" username=. "jason">.

imgEle. setAttribute( 'title','- -张图片')
imgEle
<img src=*"111. png" username="jason" title="- -张图片">

let divEle = document . getElementById('d1')
undefined
divEle. appendChild( imgEle)     # 标签内部添加元素(尾部追加)
<img src=*"111. png" username="jason" title=."- -张图片">.

------------------------------------------------------------------------------------------------

"""
设置文本
添加到标签内部
	添加到指定的标签的上面
"""

let aEle = document . createElement( 'a')

aEle 
<a>.</a>. 
aEle.href = 'https: / /www . mzitu . com/ '
"https: / /www .mzitu. com/"
aEle
<a href="https://www . mzitu.com/"></a>

aEle. innerText =、点我有你好看!’ # 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www. mzitu .com/">点我有你好看!</a>

let divEle = document. getElementById('d1')
undefined
let pEle = document . getElementById( 'd2' )
undefined

divEle. insertBefore (aEle,pEle)   #   添加标签内容指定位置添加
<a href=o"https:o//www. mz itu.com/*">.点我有你好看!.</a>


"""
额外补充
    appendChild( )
        removeChild()
            replaceChild( )
                
    setAttr ibute( )	设置属性
   	    getAttribute( )		获取属性
   		 removeAttribute()    移除属性
"""

------------------------------------------------------------------------------------------------

#  innerText与innerHTML

divEle. innerText	 # 获取标签内部所有的文本
divEle. innerHTML       # 内部文本和标签都拿到

    
divEle. innerText =' heiheihei'
"heiheihei"
divEle. innerHTML = ' hahahaha
"hahahaha"

divEle. innerText = '<hl>heiheihei</h1>'        # 不识别htm1标签
"<h1>heiheihei</h1> "
divEle. innerHTML = ' <h1>hahahaha</h1>'   # 识别htm1标签
"<h1>hahahaha</h1>"

获取值的操作

#     获取用户数据标签内部的数据

let   seEle = document . getElementById( 'd2' )
seEle . valilue
”111"
seEle. value
"333”

let inputEle = document . getElementById('d1' )
inputEle . value
" "

#   如何获取用户上传的文件数据
let  fileEle  =  document . getElementById('d3' )
fileEle.value     # 无法获取到文件数据
"C: \fakepath\02_测试路由. png"

fileEle. files
FileList   {0: File, length: 1}0: File {name:"02_测试路由. png",
lastModified: 1557043082000， lastModifiedDate: Sun May 05 2019
15:58:02 GMT+0800 ( 中国标准时间)，webkitRelativePath: ""， size: 29580,
..}length: 1_ proto__ : FileList
            
fileEle.files[  0  ]     	# 获取文件数据
File {name: "02_ 测试路由.png", lastModified: 1557043082000,
lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 ( 中国标准时间)，
webki tRelativePath:  " ",  size:  29580，..}

class，css操作

let divEle = document. getElementById( 'd1')
undef ined

divEle.classList       #获取标签所有的类属性

divEle. classList. remove( 'bg_ red' )   #移除某个类属性
undef ined

divEle. classList.add('bg_ red')     # 添加类属性
undefined

divEle. classList.contains('c1')    # 验证是否包含某个类属性
true

divEle. classList. toggle('bg_ red') ///# 有则删除无则添加
false



# DOM操作操作标签样式统- -先用style起手

let pEle = document.getElementsByTagName('p')[0]
unde f ined

pEle.style.color = ' red'
"red"

pEle.style. fontSize =‘28px'
"28px"

pEle . style. backgroundColor = ' yellow
' yellow"

pEle. style.border =' 3px solid red'
'3px solid red"

事件

"""
达到某个事先设定的条件自动触发的动作
"""
#绑定事件的两种方式
<button onclick=" func1( )">点我</button>
<button id="d1 ">点我< /button>
<script>
             //   第一种绑定事件的方式
            function func1() {
            	alert(111)
            }
        
            //	第二种
            let btnEle = document .getElementById('d1' );
            btnEle. onclick = function () {
            	alert(222)
            }
</ script>



"""
script标签既可以放在head内也可以放在body内
但是通常情况下都是放在body内的最底部

#	等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
                             //   第一种绑定事件的方式
                            function func1()  {
                                alert(111)
                            }

                            //	第二种
                            let   btnEle = document .getElementById('d1' );
                            btnEle. onclick = function ()  {
                                alert(222)
                            }
                }

"""
事件示例：