web前端(四)——javascript高级

数组

定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建(首选)
var aList2 = [1,2,3,‘asd‘];

  

操作数组中数据的方法

//获取数组的长度
var aList = [1,2,3,4];
alert(aList.length); // 弹出4

//用下标操作数组的某个数据
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

//将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join(‘-‘)); // 弹出 1-2-3-4

//从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

//将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

//返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

//在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加‘7,8,9‘三个元素
alert(aList); //弹出 1,2,7,8,9,4

//多维数组指的是数组的成员也是数组的数组
var aList = [[1,2,3],[‘a‘,‘b‘,‘c‘]];
alert(aList[0][1]); //弹出2;

  

循环语句

for循环

for(var i=0;i<len;i++)
{
    ......
}

//数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

  

字符串处理方法

//字符串合并操作:“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = ‘12‘;
var sTr = ‘abc‘;
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

//将数字字符串转化为整数
var sNum01 = ‘12‘;
var sNum02 = ‘24‘;
var sNum03 = ‘12.32‘;
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(parseInt(sNum03))   //弹出数字12 将字符串小数转化为数字整数

//将数字字符串转化为小数
var sNum03 = ‘12.32‘
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

//把一个字符串分隔成字符串组成的数组
var sTr = ‘2017-4-22‘;
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr);  //弹出[‘2017‘,‘4‘,‘2‘]
alert(aRr2);  //弹出[‘2‘,‘0‘,‘1‘,‘7‘,‘-‘,‘4‘,‘-‘,‘2‘,‘2‘]

//查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

//截取字符串 用法: substring(start,end)(不包括end)
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

//字符串反转
var str = ‘asdfj12jlsdkf098‘;
var str2 = str.split(‘‘).reverse().join(‘‘);
alert(str2);

  

调试程序的方法

  1、alert

  2、console.log

  3、document.title

定时器

定时器类型及语法

定时器:
  setTimeout  只执行一次的定时器
  clearTimeout 关闭只执行一次的定时器
  setInterval  反复执行的定时器
  clearInterval 关闭反复执行的定时器

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);

clearTimeout(time1);
clearInterval(time2);

function myalert(){
    alert(‘ok!‘);
}

  

封闭函数

  封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数。

(function(){
    alert(‘hello!‘);
})();

//还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function(){
    alert(‘hello!‘);
}()

封闭函数的作用

  封闭函数可以创造一个独立的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,可以避免命名冲突,在页面上引入多个js文件时,用这种方式添加js文件比较安全,比如

var iNum01 = 12;
function myalert(){
    alert(‘hello!‘);
}

(function(){
    var iNum01 = 24;
    function myalert(){
        alert(‘hello!world‘);
    }
    alert(iNum01);
    myalert()
})()

alert(iNum01);
myalert();

原文地址:https://www.cnblogs.com/sickle/p/10124840.html

时间: 2024-08-28 07:12:02

web前端(四)——javascript高级的相关文章

web前端之JavaScript高级程序设计六:事件

web前端之JavaScript高级程序设计六:事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合. 事件流: 事件流描述的是从页面中接收事件的顺序.但有意思的是, IE 和 Netscape 开发团队居然提出了

web前端之JavaScript正则表达式

web前端之JavaScript正则表达式 后面有代码: \d 表示数字 \d? ?表示0个或者一个 \d+ +表示一个或者多个 \d{3} 表示三个 \d{3,5} 表示三到五个 \d{3,} 表示至少出现3次 \d* *表示0到任意个 \b 表示单词边界 \B 表示非单词边界 \bis\b 表示查找" is "的 . 表示任意字符 \ 表示转译 http:(\/\/.+\.jpg) 用()进行分组 $1 获取其内部东西 []表示或 ^表示开头 $表示结尾 g表示全局 \d{4}[/

Web前端开发(高级)下册-目录

多媒体与绘图 多媒体 音频格式 视频格式 HTML5多媒体支持 <audio>和<video> htmlaudioElement和htmlVideoElement <audio>和<video>的事件 html5的绘图支持 <canvas>元素 绘制图形 绘制几何图形 绘制路径 绘制字符串 清除绘制内容 绘制阴影 绘制位图 变形 svg HTML5中使用svg svg的基本语法 svg内部标签 几何图形标签 路径标签 文字标签 HTML5新特性

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

[热]全网最全的官方1+x证书web前端初级中级高级全课程分析及大纲

Web前端开发-职业技能等级标准1.pdf 更多尽在http://yueguang.online 原文地址:https://www.cnblogs.com/ali983/p/12578927.html

Web前端开发JavaScript提高(4)

JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaScript最早是在HTML网页上使用,它是属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的,现在随着node.js引擎的出现,使得JavaScript逐步成为

Web前端之javascript

一.javascript的存在形式 方式一: <html> <head> <script> alert('Hello, world'); </script> </head> <body> ... </body> </html> 方式二: <html> <head> <script src="/static/js/abc.js"></script>

web前端(七)——jquery高级

事件冒泡 事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window .(注意这里传递的仅仅是事件 并不传递所绑定的事件函数.所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了.) 下面这段代码一共有四个事件都分别绑定了单击事件. 在页面中当单击a标签会连续弹出4个提示框.这就是事件冒泡引起的现象. 事件冒 泡的过程是:a --> p--> div-->window.a冒泡到div冒泡到body. <script>

web前端之JavaScript的变量和数据类型

JavaScript 变量 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) 提示:JavaScript 语句和 JavaScript 变量都对大小写敏感 程序演示: 1 <!DOCTYPE html>