0107 JavaScript
创始人
2025-05-28 10:55:39
0

1.JavaScript

JavaScript语言诞生主要是完成页面的数据验证,因此它运行在客户端,需要浏览器来解析执行JavaScript代码。

JS是弱类型(var,类型可变),Java是强类型(int,double...类型不可变)

特点:

1.交互性(信息动态交互)

2.安全性(不允许直接访问本地硬盘)

3.跨平台性(只要是可以解释JS的浏览器都可执行)

1.JavaScript和HTML结合的方式

1.在head标签或body标签中,使用script标签来书写JavaScript代码


2.使用script标签引入单独的JavaScript代码文件

script标签可以用来定义js代码,也可引入,但两个功能不能同时使用


2.变量 

变量是可以存放某些值的内存的命名

JavaScript的变量类型:

数值类型:number        (byte,int,float,double....)

字符串类型:string

对象类型:object

布尔类型:boolean

函数类型:function

JavaScript里的特殊值:

undefined:未定义,所有js变量未赋初始值时,默认为undefined

null:空值

NAN:非数值,not a number

JavaScript中的定义变量格式:

var 变量名;

var 变量名 = 值;

JavaScript中的关系(比较)运算:

等于:== 

等于是简单的做字面值比较

全等于:===

除了做字面值比较,还会比较两个变量的数据类型

其他与Java相同

JavaScript中的逻辑运算:

在JavaScript中,所有变量都可以作为一个Boolean类型的变量去使用

0、null、undefined、“”(空串)都认为是false

且运算:&&

        1.当表达式全为真时,返回最后一个表达式的值

        2.当表达式中有一个为假时,返回第一个为假的表达式的值

或运算:||

        1.当表达式全为假时,返回最后一个表达式的值

        2.只要有一个表达式为真,返回第一个为真的表达式的值

&&且运算与||运算有短路,即运算有结果后,不再执行后面的表达式

取反运算:!


3.数组 

格式:

var 数组名 = [];//空数组

var 数组名 = [1,'abc',true];//定义数组的同时赋值元素

JavaScript中的数组,只要我们通过数组下标赋值,最大的下标值就会自动的给数组做扩容操作

 遍历数组


4.函数

函数的两种定义方式:

1.使用function关键字来定义函数

        function 函数名(形参列表){

                        函数体

        }

如何定义带有返回值的函数?

直接使用return语句返回值即可

2.使用var定义函数

var 函数名 = function(形参列表){函数体}

注:在Java中函数允许重载,但在JS中函数的重载会覆盖掉上一次的定义

 3.隐形参数arguments(只在function函数内)

隐形参数就是在function函数中不需定义,但却可以直接用来获取所有参数的变量。

类似Java的可变长参数 public void fun(Object...args);

可变长参数其实是一个数组,JS中隐形参数也跟Java可变长参数一样,操作类似数组

如:编写一个函数,用于计算所有参数相加的和并返回


5.JS中自定义对象

1.object形式的自定义对象

1.对象的定义:

var 变量名 = new Object();//对象实例(空对象)

变量名.属性名 = 值;//定义一个属性

变量名.函数名 = function(){} //定义一个函数

2.对象的访问

变量名.属性名/函数名();

2.花括号形式的自定义对象 

var 变量名 = {};//空对象

var 变量名 = {

        属性名:值,//定义一个属性

        属性名:值,

        函数名:function(){} //定义一个函数

}


6.JS中的事件 

事件是电脑输入设备与页面进行交互的响应

常用事件

onload 加载完成事件,常用于做页面JS代码初始化操作

onclick 单击事件,常用于按钮的点击响应操作

onblur 失去焦点事件,常用于输入框失去焦点后,验证其输入内容是否合法

onchange 内容发生改变事件,常用于下拉列表和输入框内容发送改变后的操作

onsubmit 表单提交事件,常用于表单提交时,验证所有表单项是否合法


事件的注册

事件的注册(绑定)就是告诉浏览器,当事件响应后要执行哪些操作代码

1.静态注册事件

通过HTML标签的事件属性直接赋予事件响应后的代码,称为静态注册

2.动态注册事件

先通过JS代码得到标签的dom对象,然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码,称为动态注册

步骤:

        1.获取标签对象

        2.标签对象.事件名 = function(){}


onload加载完成事件

onload事件是浏览器解析完页面后,就自动触发的事件

静态注册:

 动态注册:

window.onload = function(){}


onclick单击事件 

动态注册:

window.onload = function(){

        1.获取标签对象

        document.getElementById("");

        //document是JS提供的一个对象(文档)

        //getElementById 通过ID属性获取标签对象

        2.通过标签对象.事件名=function(){}

}


onblur失去焦点事件


 onchange 内容发生改变事件


onsubmit表单提交事件 


7.DOM模型

全称Document Object Model 文档对象模型

就是把文档中的标签,属性,文本转换成对象来管理

1.document对象

理解:

1.document它管理了所有HTML文档内容

2.document它是一种树结构的文档,有层级关系

3.把所有标签都对象化

4.可以通过document访问所有的标签对象 

2.document对象中的方法

document.getElementById(elementId)

通过标签的id属性查找标签dom对象

document.getElementsByName(elementName)

通过标签的name属性查找标签dom对象

document.getElementsByTagName(tagName)

通过标签名属性查找标签dom对象

document.createElement(tagName) 

通过给定的标签名,创建一个标签对象


document.getElementById(elementId)

如:验证用户名是否有效

验证规则:必须由字母,数字,下划线组成,并且长度为5-12位

3.正则表达式

语法

var patt = new RegExp();

常用:

 

 

4.两种常见的验证提示效果 

 

 

 

 


 document.getElementsByName(elementName)

 

 


 document.getElementsByTagName(tagName)

 


 document对象三个查询方法的注意事项

1.如果有id属性,优先使用getElementById方法查询

2.如果没有id属性,则优先使用getElementsByName方法查询

3.若id属性和name属性都没有,最后按标签名getElementsByTagName查询

以上三个方法一定要在页面加载完成之后,才能查询到标签对象


document.createElement(tagName) 


8.节点的常用属性和方法

节点就是标签对象

方法:

getElementsByTagName() :获取当前节点指定标签名孩子节点

appendChild(oChildNode):添加一个子节点

属性:

childNodes:获取当前节点的所有子节点

firstChild:获取当前节点的第一个子节点

lastChild:获取当前节点的最后一个子节点

parentNode:获取当前节点的父节点

nextSibling:获取当前节点的下一个节点

previousSibling:获取当前节点的上一个节点

className:获取或设置标签的class属性值

innerHTML:获取或设置起始标签和结束标签中的内容

innerText:获取或设置起始标签和结束标签中的文本

相关内容

热门资讯

文峰股份:股东郑素贞所持全部公... 文峰股份公告,近日,公司收到青岛中院《拍卖通知书(变卖)》,公司持股5%以上股东郑素贞持有的公司12...
美亚科技IPO进行时:票务业务... 广东美亚旅游科技集团股份有限公司(美亚科技)近日向北交所提交了第三轮问询回复,继续推进其IPO进程。...
权威发布丨25条新政出台!我市... 7月29日,烟台市人民政府新闻办公室举行新闻发布会。烟台市住房和城乡建设局党组书记、局长孙玉荣介绍加...
AI成民营银行下一个十年的 关... [ 2024年民营银行整体业绩承压明显。19家银行合计净利润187.76亿元,同比下滑8.14%。 ...
丰林集团股价微跌0.87% 子... 丰林集团股价报2.29元,较前一交易日下跌0.02元,跌幅0.87%。盘中波动区间为2.25元至2....
长安汽车:中国长安汽车集团合计... 长安汽车 视觉中国 资料图 中国长安汽车集团有限公司(下称“中国长安汽车集团”)成立后,A股上市公司...
机构席位卖出456.92万 北... 每经讯,2025年7月29日,北交所上市公司天润科技(430564,收盘价:27.16元)登上龙虎榜...
小麦集中收购即将过半 政策收储... 夏粮小麦集中收购期即将过半,小麦市场供需博弈依旧僵持。当前,政策稳价、稳市意愿仍然较强,但面粉消费需...
珠江啤酒高层变动,“华南王”何... 升任董事长一个月后,黄文胜辞去了珠江啤酒总经理一职。 近日,珠江啤酒披露公告,称因工作调整,黄文胜申...
苹果在美开“制造学院”,AI、... IT之家 7 月 29 日消息,苹果公司宣布,将在底特律开设全新的苹果制造学院(Apple Manu...
首家民营银行半年报,民商银行净... 近日,温州民商银行股份有限公司(下称民商银行)发布了2025年半年度报告,这也是首家发布半年业绩的民...
美股盘前暴跌28%!诺和诺德任... 29日周二,丹麦制药巨头诺和诺德在减肥药销售放缓导致利润预警后,提拔国际业务负责人Maziar Mi...
【广发•早间速递】聚焦再平衡,... 来源:广发证券研究 注:音频如有歧义以研究报告内容为准 研究精选 宏观:6月中游制造行业利润分化 ...
理想汽车,突然直线大跌!中概新... 今晚(7月29日),美股高开后有所回落,截至发稿,道指飘绿,纳指与标普500指数飘红。 个股方面,美...
宝安科创“兽”群图鉴更新!一医... 宝安制造业沃土再添科创标杆!近日,在深圳市工业和信息化局、深圳市中小企业服务局指导举办的2025中国...
轩竹生物:研发人数锐减,融资近... 轩竹生物科技股份有限公司(简称“轩竹生物”),这家专注于消化、肿瘤及非酒精性脂肪肝炎等重大疾病领域的...
爱柯迪涨5.52%,西南证券二... 今日爱柯迪(600933)涨5.52%,收盘报17.0元。 2025年5月2日,西南证券研究员郑连声...
中原高速连跌5天,南方基金旗下... 7月29日,中原高速连续5个交易日下跌,区间累计跌幅-6.76%。河南中原高速公路股份有限公司是经河...
比特币“霸主”地位受威胁,山寨... 比特币的几个月持续上涨,使其价格远超疫情时代的高潮。然而,随着比特币的主流化,投资者开始寻找下一个大...
斥资近8亿元入主4年半 许广彬... 东方材料7月29日晚间公告,许广彬因个人原因申请辞去公司董事长等职务,但辞职后继续担任公司董事。许广...