百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

第十二天javascript篇之函数,对象,开发时钟实战代码

bigegpt 2024-10-19 02:51 7 浏览

1.昨日回顾

函数

函数的概念:将一段常用代码进行命名,这个名称就叫“函数”。

函数的步骤:(1)先定义函数,函数定义后不能直接执行,必须调用函数,函数才会执行

(2)调用函数:直接写函数名称,后面直接跟一个小括号,小括号中可以有“实参”

函数语法格式:

function functionName([形参1][,形参2][,形参3])

{

实现一个功能的程序代码;

[return 参数]

}

语法说明:

函数名称的命名同变量一样;

形式参数:定义函数的参数就叫“形式参数”,该参数接受调用函数时传递过来的值

形式参数的命名,同变量也一样;

形式参数不能是具体的值;比如:function getMax(10,20)是错误的

函数定义了,就必须要调用;

调用函数用时,直接写函数名称,后跟小括号,括号中是“实参”;

实际参数:调用函数时,传递的参数叫“实参”,就是“实际的数据”;

形式参数和实际参数的个数和顺序应保持一致;

Return语句:可以调用函数者返回一个结果;

Return语句执行后,立即结束函数的运行;

如果return语句后面,还有其它程序代码,将不再执行;

因此,return语句放在函数的最后面;

JS中是区分大小写的,但关键字一律小写;对象的方法:today.toLocaleString()

全局变量和局部变量

全局变量:可以在任何地方(函数内部和函数外部)使用的变量,就叫“全局变量”;

一般来说,在函数外部定义的变量,是“全局变量”;

省略关键字var定义的变量,也是“全局变量”,一般情况下不要省略;

局部变量:只能在函数内部使用的变量,叫“局部变量”。

注意:在JS中,在函数外部定义的变量,可以在函数内部使用;但在函数内部定义的变量,只能在函数内部使用。

将函数定义作为数据,赋给其它变量

  • 将函数定义,赋给一个基本数据类型的变量

function showInfo()

{

return “我是一个函数”;

document.write(“我是一个函数”);

}

var a = showInfo; //将函数定义(地址),赋给一个变量,变量a是复合数据类型

document.write(a() );

var b = showInfo(); //将函数的执行结果,赋给一个变量b,变量b是基本数据类型

注意的是:函数名showInfo后不能跟小括号;

如果showInfo后面跟了小括号,就是调用函数,将函数的执行结果,赋给a变量,而不是地址

  • 将函数定义,赋给一个数组元素,那么,该数组元素就是一个函数了;

Var arr = [10,20,30];

arr[1] = showInfo(); //arr[1]的值是“我是一个函数”

arr[2] = showInfo; //arr[2]就变成了函数

document.write( arr[1] );

document.write( arr[2]() ); //既然arr[2]是一个函数,在调用时,一定要写小括号

3)将函数定义,赋给一个对象属性,那么,该对象的属性就是一个函数了;

var obj = {

name:“张三”,

age:30,

show:showInfo //将函数定义,赋给了一对象属性

};

obj.show(); //方法和函数的定义是一样的,只是在不同的地方叫法不一样

document.write( obj.name );

基本数据类型和复合数据类型

基本数据类型:是将变量名称和变量的值,都存入“快速内存”“栈内存”;

将基本数据类型的变量,赋给其它变量,是将原来变量的值“复制”一份,放到了新变量中,因此,这两个变量没有任何关系,换句话说:修改其中一个变量的值,另一个变量的值不会改变;

var a = 10; //基本数据类型,在赋值是地,是传值

var b = a; //将a的值,复制一份,传给b

a = 100; //给变量a重新赋值

document.write(b); //求变量b的值,是否会改变

引用数据类型(复合数据类型):它的存储分两个部分,一是把数据存到“慢内存”“堆内存”,二是将变量名称和数据地址存到“快速内存”“栈内存”。

换句话说:就是新变量和旧变量,同时指向了同一个数据地址,只是变量名称不一样。

var arr1 = [1,10,20,30];

var arr1 = new Array(1,10,20,30);

var arr2 = arr1; //将arr1赋给了arr2,其实,这里传的数据地址,并不是具体的数据

arr1[0] = 100; //对arr1中的第1个元素,重新赋值

document.write( arr2[0] );

补充知识点:for in循环

For ……in主要是循环或遍历,数组元素对象的属性

注意:如果遍历数组的话,未定义的数组元素,不会输出;只会输出有效数据。

语法结构:

for(index in arr)

{

document.write( arr[index] );

}

参数说明:

arr代表一个数组;

index代表一个数组元素的下标;

举例:

var arr = [1,2,,,,,3,,,,,,,,,,,,,,,,,4];

遍历对象属性

for(name in window)

{

document.write( name );

}

参数说明:

Name就是遍历对象,返回的属性名称;

Window是一个窗口,代表当前浏览器窗口,比如:document、 history、screen、 navigator等

2.函数对象

一个函数对应一个函数对象。

arguments属性:函数对象的一个数组对象属性,包含了所有接收到的参数

arguments.length:取得所有接收到的参数的个数

arguments是在函数内部来使用;

3.对象

对象是一组属性和方法的集合。

JS中的对象分类:

自定义对象:自己根据需要定义自己的对象;var obj = {}

JS内置对象:

String:字符串对象,提供字符串操作的属性和方法。比如:length

Array:数组对象,提供数组操作的属性和方法。比如:length

Date:日期时间对象,提供访问系统时间日期的信息。比如:getDay()、toLocaleString()

Math:数学对象,提供数学处理的方法。比如:Math.floor()、Math.ceil()、Math.round()

Number:数字对象。比如:toFixed()

Function:函数对象。比如:arguments数组对象

Event:事件对象。比如:onMouseOver、onMouseOut、onClick、onLoad

正则对象:正则表达式,对数据进行更严格的验证。(就业班讲)

BOM和DOM对象(核心)

BOM提供了访问和操作浏览器各组件的途径;

DOM提供了访问和操作网页中各HTML元素的途径

4.自定义对象

对象就是一组属性和方法的集合。

一、创建自定义对象

(1)使用new关键字和Object()来创建一个空对象,然后添加属性和方法

方法就是函数,在对象中的函数,就叫“方法”。

Var obj = new Object();

obj.name = “张三”; //增加一个属性,并赋值

obj.sex = “男”;

obj.age = 30;

obj.isMarried = true;

obj.school = null;

obj.showInfo = function(){

var str = this.name+“的基本资料”;

str += “<br>姓名:”+this.name;

}

onload:当网页加载完成,去执行JS程序代码。

当网页的中所有HTML标记都加载完成后,才会触发onLoad事件;

触发onLoad事件后,会去调用相应的JS程序。

只要<body>中有一个HTML标记没有显示出来,onLoad就不会发生

<body>……</body>……onload事件……调用JS函数——document.write

2)使用{}来创建对象

Var obj = {

name:“张三”,

sex:true

}

5.JS的内置对象——String对象

一个字符串的变量,就是一个String对象。

一、创建String对象的方法

1)使用new关键字和String()构造函数来创建(不常用)

var strObj = new String(“Welcome”);

var len = strObj.length; //获得字符串的长度

  • 定义一个字符串变量,就对应一个String对象(最常用)

var str = “重蔚自留地”;

var len = str.length;

二、String对象的属性和方法

length:获得字符串的长度,var len = str.length

注意:JS的length是指字符个数,并不是按字节来计算。

charAt(index):返回指定位置的一个字符。

提示:String中的下标与Array中的下标一样。

index:表示指定位置的下标(索引号)

举例:

var str = “Welcome”;

var str1 = str.charAt(str.length-1) //取得最后一个字符

indexOf(substr[,startIndex])

描述:从原字符串中,查找子字符串,如果找到,返回起点索引号;如果未找到,返回-1。

参数:

substr:子字符串

startIndex:开始查找的位置索引号。如果省略,则从0开始查找。

lastIndexOf(substr[,startIndex])

描述:在原字符串中,从右往左搜索子字符串,如果没有找到,则返回-1。

参数:同indeOf()方法一样

substr(startIndex[,length])

描述:返回一个子字符串。

参数:

startIndex:开始索引号

length:返回几个字符。如果length省略,返回到结束的所有字符。

举例:

var str = “welcome”;

var str2 = str.substr(3,2); // str2 = co

substring(startIndex[,endIndex])

描述:返回索引号从startIndex到索引号endIndex之间的一个子字符串。

参数:

startIndex:开始索引号

endIndex:结束索引号,如果省略,返回到结尾的所有字符。

split(separator)

描述:将一个字符串,用指定分割符separator分成一个数组

参数:separator就是一个分割符

举例:

Var str = “星期一,星期二,星期三”;

Var arr = str.split(“,”);

search(substr)

描述:查找指定的子字符串,如果没有找到,返回-1

replace(substr,replacement)

描述:在原始字符串中,将一个指定的子字符串,替换成指定的内容。

参数:

Substr:要查找的内容

Replacement:要替换的内容

注意:如果不使用“正则表达式”,则只能替换一次。

var new = str.replace(/X/g,”itcast”); //JS中的正则,是放在//中间的,不能加引号。g参数代表全部替换。

toLowerCase()

描述:转成小写

举例:str.toLowerCase()

toUpperCase()

描述:转成大写

举例:str.toUpperCase()

localeCompare(str)

描述:对字符串使用本地规则进行比较。我们使用的操作系统是中文操作系统,中文操作系统默认的排序规则就按“拼音”先后来排序的。

str1.localeCompare(str2)

如果str1 > str2 则返回一个大于0的值

如果str1=str2 则返回一个等于0的值

如果str1<str2 则返回一个小于0的值

onchange:当选择内容发生改变时,去调用JS验证函数。

6.Array对象

length:取得数组元素的个数

shift():删除第一个数组元素,数组的长度-1。

pop():删除最后一个数组元素,数组的长度-1

unshift():在开头添加一个数组元素,数组的长度+1

push():在最后添加一个数组元素,数组的长度+1

注意:delete删除的是数组元素的内容,而shift()删除的是内容和下标。

join([separator)):将数组各个元素,用指定的连接符,连成一个字符串。与split()正好相反

separator是可选项,如果省略,则用逗号连接。

reverse():反转数组中各个元素,颠倒顺序。

sort()

描述:对数组中各个元素进行排序,默认是按字母的先后顺序排列。

格式:arr.sort([orderby])

参数:orderby是可选参数,它指定排序的规则,一般是一个函数。

(1)对数值进行排序

orderby函数必须接收两个参数,比如a和b;

orderby函数中使用return返回值;

如果a-b>0,返回1

如果a-b=0,返回0

如果a-b<0,返回-1

var arr = [1,2,10,12,3,31,15,19,25,39];

arr.sort(orderby);

function orderby(a,b)

{

return a-b;

}

document.write(arr);

7.Date对象

一、创建Date对象的实例

(1)使用new关键字和Date()构造函数来创建

Var today = new Date(); //注意:如果不带参数,则创建一个当前系统时间的实例

(2)指定一个日期时间字符串参数

Var yestoday = new Date(“1990/10/23 10:09:00”); //可以创建基于某一个时间的一对象实例

二、Date对象的方法

getFullYear():取出四位的年份

getMonth():取出月份,取值0-11

getDate():取出天数

getHours():取出小时数

getSeconds():取出秒数

getMinutes():取出分钟数

getDay():取出星期值,取值:0-6

getTime():取出距离1970年1月1日,0时0分0秒的毫秒数

toLocaleString():转成字符串

相关推荐

得物可观测平台架构升级:基于GreptimeDB的全新监控体系实践

一、摘要在前端可观测分析场景中,需要实时观测并处理多地、多环境的运行情况,以保障Web应用和移动端的可用性与性能。传统方案往往依赖代理Agent→消息队列→流计算引擎→OLAP存储...

warm-flow新春版:网关直连和流程图重构

本期主要解决了网关直连和流程图重构,可以自此之后可支持各种复杂的网关混合、多网关直连使用。-新增Ruoyi-Vue-Plus优秀开源集成案例更新日志[feat]导入、导出和保存等新增json格式支持...

扣子空间体验报告

在数字化时代,智能工具的应用正不断拓展到我们工作和生活的各个角落。从任务规划到项目执行,再到任务管理,作者深入探讨了这款工具在不同场景下的表现和潜力。通过具体的应用实例,文章展示了扣子空间如何帮助用户...

spider-flow:开源的可视化方式定义爬虫方案

spider-flow简介spider-flow是一个爬虫平台,以可视化推拽方式定义爬取流程,无需代码即可实现一个爬虫服务。spider-flow特性支持css选择器、正则提取支持JSON/XML格式...

solon-flow 你好世界!

solon-flow是一个基础级的流处理引擎(可用于业务规则、决策处理、计算编排、流程审批等......)。提供有“开放式”驱动定制支持,像jdbc有mysql或pgsql等驱动,可...

新一代开源爬虫平台:SpiderFlow

SpiderFlow:新一代爬虫平台,以图形化方式定义爬虫流程,不写代码即可完成爬虫。-精选真开源,释放新价值。概览Spider-Flow是一个开源的、面向所有用户的Web端爬虫构建平台,它使用Ja...

通过 SQL 训练机器学习模型的引擎

关注薪资待遇的同学应该知道,机器学习相关的岗位工资普遍偏高啊。同时随着各种通用机器学习框架的出现,机器学习的门槛也在逐渐降低,训练一个简单的机器学习模型变得不那么难。但是不得不承认对于一些数据相关的工...

鼠须管输入法rime for Mac

鼠须管输入法forMac是一款十分新颖的跨平台输入法软件,全名是中州韵输入法引擎,鼠须管输入法mac版不仅仅是一个输入法,而是一个输入法算法框架。Rime的基础架构十分精良,一套算法支持了拼音、...

Go语言 1.20 版本正式发布:新版详细介绍

Go1.20简介最新的Go版本1.20在Go1.19发布六个月后发布。它的大部分更改都在工具链、运行时和库的实现中。一如既往,该版本保持了Go1的兼容性承诺。我们期望几乎所...

iOS 10平台SpriteKit新特性之Tile Maps(上)

简介苹果公司在WWDC2016大会上向人们展示了一大批新的好东西。其中之一就是SpriteKitTileEditor。这款工具易于上手,而且看起来速度特别快。在本教程中,你将了解关于TileE...

程序员简历例句—范例Java、Python、C++模板

个人简介通用简介:有良好的代码风格,通过添加注释提高代码可读性,注重代码质量,研读过XXX,XXX等多个开源项目源码从而学习增强代码的健壮性与扩展性。具备良好的代码编程习惯及文档编写能力,参与多个高...

Telerik UI for iOS Q3 2015正式发布

近日,TelerikUIforiOS正式发布了Q32015。新版本新增对XCode7、Swift2.0和iOS9的支持,同时还新增了对数轴、不连续的日期时间轴等;改进TKDataPoin...

ios使用ijkplayer+nginx进行视频直播

上两节,我们讲到使用nginx和ngixn的rtmp模块搭建直播的服务器,接着我们讲解了在Android使用ijkplayer来作为我们的视频直播播放器,整个过程中,需要注意的就是ijlplayer编...

IOS技术分享|iOS快速生成开发文档(一)

前言对于开发人员而言,文档的作用不言而喻。文档不仅可以提高软件开发效率,还能便于以后的软件开发、使用和维护。本文主要讲述Objective-C快速生成开发文档工具appledoc。简介apple...

macOS下配置VS Code C++开发环境

本文介绍在苹果macOS操作系统下,配置VisualStudioCode的C/C++开发环境的过程,本环境使用Clang/LLVM编译器和调试器。一、前置条件本文默认前置条件是,您的开发设备已...