前端开发 - JavaScript - 下
12.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script type="text/javascript">
// 容器 装东西
// python 叫 列表list
// js 叫 数组 Array 对象 属性和方法 数组得 属性是 索引和length; 其他都是方法; /*
数组得创建
1.字面量方式创建（推荐大家使用这种方式创建数组 简单粗暴）
2.使用构造函数得方式创建，使用new关键词对构造函数进行创建对象
*/
//1.
var colors = ['red','color','yellow'];
console.log(colors); // 空数组
var emptyArray = [];
console.log(emptyArray); //2.
var colors2 = new Array(); // 空数组
console.log(colors2); var colors3 = new Array('white','red','orange');
console.log(colors3); //对数组赋值
var arr = [];
arr[0] = 123;
arr[1] = 'abc';
arr[2] = '哈哈哈';
console.log(arr); // 通过下标取到相应得值
console.log(arr[2]);
console.log(arr.length); //for 循环遍历 arr 数组得遍历
for(var i=0;i<arr.length;i++){
console.log(arr[i])
} </script>
</body>
</html>
13.数组常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组常用方法</title>
</head>
<body>
<script type="text/javascript">
/*
网站：学习网站
开发者网络 https://developer.mozilla.org/zh-CN/ */
//1.数组得合并 concat
var north = ['北京','天津','河北'];
var south = ['深圳','上海','湖南'];
var newArr = north.concat(south); console.log(newArr); //2.将数组转换成字符串
var score = [98,97,66,100]; //toString() 直接转换为字符串 每个元素使用逗号隔开
var str = score.toString();
console.log(str); //join()方法 将数组中得元素使用指定得字符串连接起来，形成一个新得zifuchuan
var str2 = score.join('|');
console.log(str2); //3.查找下标
//indexOf() 正向查找 如果查找得值 不在数组中 返回-1
var index = score.indexOf(101);
console.log(index); //方向查找
var lastIndex = score.lastIndexOf(66);
console.log(lastIndex); //4.数组得排序
//反转数组
var names = ['alice','alex','egon','xiaoma'];
var reverseNames = names.reverse();
console.log(reverseNames);
console.log(':',names); //sort() 按照26个字母排序得 数组
var enames = names.sort();
console.log(enames);
console.log(',,,',names); //5.移除元素和添加元素
//shift() 移除第一个元素 返回第一个元素
var firstName = names.shift();
console.log(firstName);
console.log(names);
console.log(reverseNames);
console.log(enames); //unshift() 向数组得开头添加一个多个元素，并返回新的长度
var newLength = names.unshift('shanshan','haha');
console.log(newLength);
console.log(names); //push() pop()
//push() 向数组得末尾添加一个或者多个元素，并返回新的长度
var newNames = names.push('老村长','哈哈');
console.log(newNames);
console.log(names); //pop() 返回被删除得元素，删除数组得最后一个元素
var a = names.pop();
console.log(a);
console.log(names); //练习 对字符串反转
var str11 = 'hello luffy';
console.log(str11.split('').reverse().join('')); </script>
</body>
</html>
14.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript"> //函数得声明
/*
python:函数得应用
def add():
pass
调用
add()
*/ //1.js 中函数得声明
function add() {
// alert('函数被调用了')
}
//调用
add(); //2.带参数 形参 实参
function add2(a,b) {
// alert(a+b);
}
add2(3,4); //3.函数有返回值
function add3(x,y) {
return x+y;
}
var sum = add3(4,5);
alert(sum); </script>
</body>
</html>
15.Object 构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object构造函数</title>
</head>
<body>
<script type="text/javascript"> //对象得创建 //1.字面量方式创建 推荐使用这种方式 简单 直观
//key:value
var stu = {
name:'alex',
age:22,
fav:'鸡汤'
};
console.log(stu);
console.log(window);
// 点语法 包括get 方法 set 方法
var n = stu.name; // get
console.log(n);
console.log(stu.name);
stu.age = 34; // set
console.log(stu.age); //2.使用Object() 创建
function add() { }
add();
// Object() 构造函数 1.首字母大写 碰见构造函数 要想创建对象new
var obj = new Object();
obj.name = 'xiaoma';
console.log(obj); //使用构造函数得方式创建对象
//---------构造函数--------- //1.函数名首字母要大写
//2.构造函数不需要return
//3.为对象添加成员变量 this.name = 'alex' var Stu = function () {
this.name = 'alex';
this.age = 18;
this.fav = function () {
console.log('吃饭饭')
}
}; //创建对象
var s = new Stu();
console.log(s); var s1 = new Stu();
console.log(s1); //弊端：每次 new 一个对象，里面得成员变量和方法都一样； //推荐大家使用的构造函数的方式： function Animal() {
this.name = 'doudou';
this.age = 12;
// this.fav = function () {
// console.log(this.age)
// }
}
Animal.prototype.showname = function () {
//执行相应的操作
alert(this.name)
};
Animal.prototype.showname2 = function () {
alert(this.age)
}; var a = new Animal();
a.showname();
a.showname2(); </script>
</body>
</html>
16.对象补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对象补充</title>
</head>
<body>
</body>
<script type="text/javascript">
var json1 = {
name : '张三',
age : '李四',
fav : '唱歌'
}
var str1 = '{"name": "Alex", "age": 18}'; //将JSON转化为JSON字符串
var jsonStr1 = JSON.stringify(json1)
console.log(jsonStr1) //将json字符串转化为JSON
var json2 = JSON.parse(str1);
console.log(json2) </script>
</html>
17.String Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String Number</title>
</head>
<body>
<script type="text/javascript"> //内置对象 //String 字符串对象
var str = 'hello alex';
console.log(str.length); // 变大写
var bigStr = str.toUpperCase();
console.log(bigStr);
console.log(str); // 变小写
console.log('small:',bigStr.toLowerCase()); //切割 第一个参数 以什么样的字符串切割，第二个返回数组的最大长度； var newArr = str.split(' ',1);
var newArr = str.split(' '); // var newArr = str.split(' ',1);
console.log(newArr); //提取 从哪到哪 >=2 <6 左闭右开 会返回一个新的字符串
console.log(str.substring(2,6)); //Number //1.将number 转换成zifuchuan
var num = 132.325643;
var numStr = num.toString();
console.log(numStr);
console.log(typeof numStr); //2.四舍五入
var newNum = num.toFixed(2);
console.log(newNum); </script>
</body>
</html>
18.Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<script type="text/javascript"> //W3C 文档 js chm 手册
// http://www.w3school.com.cn/
//http://www.w3school.com.cn/jsref/jsref_obj_date.asp
//创建日期对象
var myDate = new Date(); //获取一个月中的某一天
console.log(myDate.getDate()); //获取当天的日期
console.log(Date()); //获取一年中的某一个月
console.log(myDate.getMonth()); //month+1 console.log(myDate.getDate());
console.log(myDate.getFullYear()); </script>
</body>
</html>
19.Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math</title>
</head>
<body>
<script type="text/javascript"> //Math http://www.w3school.com.cn/jsref/jsref_obj_math.asp
var x = 1.8; //天花板函数 大于等于x 并且与它最接近的整数
var a = Math.ceil(x);
console.log(a); //地板函数 小于等于x 并且与它最接近的整数
console.log(Math.floor(x)); //求两个数的最大值，最小值
console.log(Math.max(2.8,5));
console.log(Math.min(2.8,5)); //random 随机数 0-1 之间的随机数 包含0 不包含1
var ran = Math.random();
console.log(ran); //100-200之间的随机数
var c = 100 + Math.random()*100;
console.log(c); //min - max 之间的随机数 min + Math.random()*(max-min) // 5-15之间的数
var d = 5 + Math.random()*(15-5);
console.log(d); </script>
</body>
</html>
20.定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script type="text/javascript"> //setInterval() 一直操作 setTimeout() 执行一次 var n = 0;
var time = null;
time = setInterval(function () {
n++;
console.log(n)
},1000); //setTimeout(code,1000) var tt=setTimeout(function () {
console.log(time); window.clearInterval(time);
},5000) </script>
</body>
</html>
21.正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
</body>
<script type="text/javascript">
//RegExp对象 //创建正则对象方式1
//参数1 正则表达式（不能有空格）
//参数2 匹配模式：常用g（全局匹配；找到所有匹配，而不是第一个匹配后停止）和i（忽略大小写吧） var str = 'hello World';
var reg1 = new RegExp('e','ig');
console.log(reg1) //2.字面量方式创建
var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配 //正则对象提供的检索方式
//test() 检测字符串中是否包含定义字符模式，返回布尔
//要检索的字符在字符串str中 返回true
console.log(reg2.test(str)); //2.2 exec() 具体执行匹配，返回数组
console.log(reg2.lastIndex); // 2 保存一次匹配时开始的下标
console.log(reg2.exec(str)); //["o", index: 7, input: "hello world"]
console.log(reg2.lastIndex); //2 //3.常用方法
//match
var reg3 = /d/g; console.log(str.match(reg3)) //2.replace替换： str.replace(被替换的，替换的)
console.log(str.replace(reg3,'*')); //3.search()
console.log(str.search(reg3));//查询字符串在字符中出现的位置 下标 //4.split()
console.log(str.split(reg3)); </script>
</html>
22.元字符
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>元字符</title>
<script>
window.onload = function (){
//元字符
//1.单个字符和数字
//1 . 匹配除换行符以为的任意字符
var str = "oweb";
var reg = /./g;
console.log(reg.exec(str));
var str = "www/baidu/com";
var reg = /www\......\.com/g; //如果想不让字符有其他意义 转义\
console.log(reg.exec(str)); //2. [] 匹配[]里面的任意一个字符
var str1 = "4awebadsads";
var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字
console.log(reg1.exec(str1)); var str2 = "1s34";
var reg2 = /[0-9][0-9][0-9]/g;
console.log(reg2.exec(str2)); //3. [^] 所有不在这个范围内的字符
var str3 = "abd";
var reg3 = /[^a-z]/g; //匹配除小写字母以外的任意字符
console.log(reg3.exec(str3)); //4. \
var str4 = "web";
var reg4 = /\d/g; //匹配数字
var reg5 = /\D/g; //非数字
console.log(reg4.exec(str4)); //null
console.log(reg5.exec(str4)); //w var reg6 = /\w/g; //匹配数字 字母 下划线_
var reg7 = /\W/g; //匹配除数字 字母 下划线以外的任意字符
console.log(reg6.exec(str4)); //w
console.log(reg7.exec(str4)); //null var reg8 = /\s/g; //空格
var reg9 = /\S/g; //非空白字符
console.log(reg8.exec(str4)); //null
console.log(reg9.exec(str4)); //w //5 锚字符 ^以什么开头 $以什么结尾
var str = "www.";
var reg10 = /^www/g; // ^字符
console.log(reg10.exec(str)); var reg11 = /www\.$/g; //字符$
console.log(reg11.exec(str)); //重复的字符
//? 匹配前面的字符0个或一个 ，
var strs = "webr44546ere";
var reg12 = /[0-9]?/g;
console.log(reg12.exec(strs)); //* 匹配0个或任意多个字符 尽可能多的匹配
var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个
console.log(reg13.exec(strs)); //+ 至少匹配一次
var reg14 = /\d+/g;
console.log(reg14.exec(strs)); //{4}
var stra = "11274567800";
var rega = /^1\d{10}$/g; //匹配连续的四个数字
console.log(rega.exec(stra)); //{1,4} 最少一个最多4个
var strb = "edg";
var regb = /^[a-zA-z]{2,3}$/g;
console.log(regb.exec(strb)); //|| 竖线 或者
var strc = "www.google"; //baidu google ujiuye
var regc = /www.baidu|google|ujiuye/g;
console.log(regc.exec(strc)); //() 分组
var strc = "www.google"; //baidu google ujiuye
var regc = /www.(baidu)|(google)|(ujiuye)/g;
console.log(regc.exec(strc)); console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3); var str = "helloworld";
var reg = /(hello)(world)/g;
/* console.log(reg.exec(str));
console.log(RegExp.$1);*/
console.log(str.replace(reg,"$2 $1")); }
</script>
</head>
<body> </body>
</html>
23.正则表达式相关练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式相关练习</title>
</head>
<body>
<script type="text/javascript"> //正则表达式练习 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp window.onload = function () {
//1.检索字符串中是否不包含字母
var str = '12';
var reg1 = /[^a-zA-Z]/g;
console.log(reg1.test(str));
if(reg1.test(str)){
console.log('不包含');
}else{
console.log('包含');
} //2.去除字符串首尾空格
var str2 = ' hello world! ';
//开头的空格
var reg =/^\s+/ig; // + 1到多次！
var str3 = str2.replace(reg,""); var reg2 = /\s+$/ig;
var str4 = str3.replace(reg2,"");
console.log("|"+str4+"|"); //3.检查用户账号
function checkUser(str) {
var re = /^[a-zA-Z]\w{3,15}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkUser('alex_haha'); //4.手机号码 11位数字以1开头
function checkMobile(str) {
var re = /^1\d{10}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkMobile('13788881239');
checkMobile('137893813323'); //5.电话号码 区号+号码 区号以0开头 3位或4位
// 号码由7位或8位数字组成
// 区号与号码之间可以无连接符，也可以"-"连接
function checkPhone(str) {
var re = /^0\d{2,3}-?\d{7,8}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkPhone("095-12345678"); //6.邮箱
//规则：第一部分@第二部分
//第一部分：由字母 数字 下划线 短线 - 点号 . 组成
//第二部分：为一个域名 域名由 字母 数字 短线 短线 - 域名后缀组成
// 域名后缀一般为 .xxx 或者 .xxx.xx 一区的域名后缀一般为 2-4 位，如cn,
function checkEmail(str) {
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkEmail('alex@cnbolgs.cn'); } </script>
</body>
</html>
前端开发 - JavaScript - 下的更多相关文章
- 第十一章 前端开发-JavaScript
第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...
- 1+x 证书 Web 前端开发 JavaScript 专项练习
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- 前端开发 JavaScript 规范文档
一,规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...
- 前端开发 - JavaScript - 总结
一.JavaScript的特征 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言.它运行在客户端从而减轻服务 ...
- 前端开发JavaScript入门——JavaScript介绍&基本数据类型
JavaScript 诞生于1995年,它的出现主要是用于处理网页中的 前端验证. • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的 规则. • 比如:用户名的长度,密码的长度,邮箱的格式等 ...
- 15款不容错过的前端开发Javascript和css类库 - 2017版本~
前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...
- Web前端开发JavaScript基础
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
- 前端开发 - JavaScript
本节内容 一.如何编写 二.变量 三.数据类型 四.其他 五.语句与异常 六.函数 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScri ...
随机推荐
- SQL Server 2008 允许远程链接 解决方法
用户在使用SQL Server 2008远程链接时,可能会弹出如下对话框: 在链接SQL服务器时发生网络链接错误或特定实例错误.SQL服务器不存在或者链接不成功.请验证用户名是否正确或SQL服务器是否 ...
- Ubuntu安装Nginx和正确卸载Nginx Nginx相关
1.Ubuntu下安装Nginx比较简单 敲入下列命令即可: sudo apt-get update sudo apt-get install nginx 2.Ubuntu下卸载,稍不注意就会入坑 s ...
- 跟着百度学PHP[13]-文件上传
PS:上传的时候一定要用POST方法,GET方法不行. 文件上传的entype要改成“mutilpart/form-data”这个编码 <html> <form action=&qu ...
- Android基础总结（十）ContentProvider
内容提供者(掌握) 应用的数据库是不允许其他应用访问的 内容提供者的作用就是让别的应用访问到你的私有数据 自定义内容提供者,继承ContentProvider类,重写增删改查方法,在方法中写增删改查数 ...
- 从文件/文件流的头字节中得到mime信息
在写网络爬虫的时候,需要根据链接来获取文件类型,将内容正确存储.之前我都是根据链接的后缀来判断的,比如: http://img12.360buyimg.com/da/20120330/88_31_Zy ...
- 关于Unity中的transform组件（一）
一.transform组件用途 1.维护场景树 2.对3D物体的平移,缩放,旋转 二.场景树定义 在Hierarchy视图中显示的: 一个game_scene场景,下面有Main Camera节点,D ...
- 解决cookie跨域访问.2
v一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入 ...
- 若在逻辑上 A 是 B 的“一部分”（a part of）
若在逻辑上 A 是 B 的“一部分”(a part of) ,则不允许 B 从 A 派生, 而是要用 A 和其它东西组合出 B. #include <iostream> /* run th ...
- Angular入门篇高速开发导航网
简单介绍 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式.这样的方式能够让你扩展HTML的语法.以弥补在构建动态WEB应用时静态文本的不足.从而在web应用程 ...
- 学习:record用法
详情请参考官网:http://www.erlang.org/doc/reference_manual/records.html http://www.erlang.org/doc/programmin ...