第七次网页前端培训笔记（JS）

最新推荐文章于 2024-09-14 22:18:26 发布

DDL.NEXT

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量282

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_59470001/article/details/122887045

版权

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibilin

1.安装编译器

HBuilder X:HBuilderX-高效极客技巧

2.基本内容

内置对象

Arguments 只在函数内部定义，保留了函数的实参
Array 数组对象
Date 日期对象，用来创建和获取日期
Math 数学对象
String 字符串对象，提供对字符串的一系列操作

String

charAt (idx) 返回指定位置处的字符
indexOf (Chr) 返回指定位置子字符串的位置，从左到右。找不到返回
substr (m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾
substring (m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾
toLowerCase ( ) 将字符串中的字符全部转化成小写
toUpperCase ( ) 将字符串中的字符全部转化成大写
length 属性，不是方法，返回字符串的长度

Math

Math.random ( ) 随机数
Math.ceil ( ) 向上取整，大于最大整数
Math.floor ( ) 向下取整，小于最小整数

Date

// 获取日期
getFullYear ()      年
getMonth ()         月
getDate ()          日
getHours ()         时
getMinutes ()       分
getSeconds ()       秒

// 设置日期
setYear ()
setMonth ()
setDate ()
setHours ()
setMinutes ()
setSeconds ()
toLocaleString ()  //转换成本地时间字符串



//   说明：
          getMonth ():得到的值：0~11 (1月~12月)
          setMonth ():得到的值时 0~11
          toLocaleString ():可根据本地时间把Date对象转换成字符串，并返回结果

对象

JS创建自定义对象，主要通过三种方式：字面量形式的创建、通过new Object对象创建、通过Object对象的creat方法创建。

字面量形式创建

var 对象名 = {} ;   //创建一个空的对象
var 对象名 = {键:值,键2:值,...}

var obj = 
{
           'name' = 'hello',
           age : 12,
           sayHello : function () {
                console.log ("我是对象中的方法") ;  
           },
           courses : {
                javase : 4,
                javascript : 3
           },
           isLike : true,
           members : [
                {name : "小红" , age , 20},
           ]
}

HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为

HTML中一些常用事件列表

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 ...

3.代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置对象</title>
	</head>
	<body>
		<script type="text/javascript">
		var str = "Hello World";
		console.log(str);
		console.log(str.substring(3));     //从下标3开始，截取到最后
		console.log(str.substring(3,5));   //从下标3开始，到下标5结束
		
		console.log(str.toLowerCase());    //转小写
		console.log(str.toUpperCase());    //转大写
		
		
		// Math.random()     随机数
		console.log(Math.random());
		// Math.ceil()       向上取整，大于最大整数
		console.log(Math.ceil(1.2));
		// Math.floor()      向下取整，小于最小整数String
		console.log(Math.floor(1.2));
		
		//得到日期对象
		var date = new Date();
		console.log(date);
		//getFullYear()    年
		console.log(date.getFullYear());
        //getMonth()       月
		console.log(date.getMonth() +1);   // 0~11
		//getDate()        日
		console.log(date.getDate());
		//getHours()       时
		console.log(date.getHours());
		//getMinutes()     分
		console.log(date.getMinutes());
		//getSeconds()     秒
		console.log(date.getSeconds());
		
		var mStr = date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes()
		var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDate())+"  "+(date.getHours())+":"+(date.getMinutes())+":"+(date.getSeconds())	
		console.log(dateStr);
	    
		//	时间本地化
		console.log(date.toLocaleString());
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
	</head>
	<body>
		<script type="text/javascript">
		
		/*对象的创建*/
		//字面量形式创建对象
		var obj1 = {};    // 空对象
		console.log(obj1);
		var obj2 = {
			name:"zhangsan",
			age:18
		} ;
		console.log(obj2);
		//通过new Object创建
		var obj3 = new Object(); //空对象
		console.log(obj3);
		
		//通过Object对象的creat方法创建
		var obj4 = Object.create(null); //空对象
		console.log(obj4);
		
		var obj5 = Object.create(obj2); 
		console.log(obj5);
		
		/*对象的操作*/
		//获取对象的属性
		
		//获取不存在的属性
		console.log(obj1.name);  //umdefined
		//获取存在的属性
		console.log(obj2.name);  //zhangsan
		
		console.log(obj3.name);  //undefined
		console.log(obj4.name);  //undefined
		console.log(obj5.name);  //zhangsan
		
		//设置对象的属性
		//存在的属性，修改属性值
		obj2.age = 20 ;
		console.log(obj2);
		//不存在的属性，添加属性值
		obj2.upwd  = "123456" ;
		console.log(obj2);
		
		console.log("---------------------");
		/* 对象的序列化和反序列化*/
		//序列化
		//JSON对象
		var obj = {
			name:"zhangsan",
			pwd:"123456",
			age:18
		};
		obj.name = "lisi";
		console.log(obj);
		//将JSON对象转换成JSON字符串
		var objToStr = JSON.stringify(obj);
		console.log(objToStr);
		console.log("=========");
		//JSON字符串
		var jsonStr = '{"name":"zhangsan","pwd":"123456","age":18}';
		jsonStr.name = "lisi" ;
		console.log(jsonStr);
		//将JSON字符串转换成JSON对象
		var strToObj = JSON.parse(jsonStr);
		console.log(strToObj);
		
		console.log("---------------------------")
		/* this */
		//1.直接调用函数，this代表的全局的window对象
		function test () {
			console.log("这是一个测试方法...");
			console.log(this);                  //window对象
		}
		test();
		//2.调用对象中的函数，this代表的是对象本身
		var o = {
			name:"zhangsan",
			age:18,
			sayHello:function() {
				console.log("你好呀~");
				console.log(this.name);  //当前o对象
			}
		}
		
		//调用对象中的方法
		o.sayHello();
		
		
		</script>
	</body>
</html>

DDL.NEXT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Arguments	只在函数内部定义，保留了函数的实参
Array	数组对象
Date	日期对象，用来创建和获取日期
Math	数学对象
String	字符串对象，提供对字符串的一系列操作

charAt (idx)	返回指定位置处的字符
indexOf (Chr)	返回指定位置子字符串的位置，从左到右。找不到返回
substr (m,n)	返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾
substring (m,n)	返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾
toLowerCase ( )	将字符串中的字符全部转化成小写
toUpperCase ( )	将字符串中的字符全部转化成大写
length	属性，不是方法，返回字符串的长度

Math.random ( )	随机数
Math.ceil ( )	向上取整，大于最大整数
Math.floor ( )	向下取整，小于最小整数