JAVA_Lesson32(传智播客笔记之javascript）

于 2018-07-17 11:15:40 发布
阅读量358 收藏
点赞数
分类专栏： JAVA Java入门学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wearlee/article/details/81077771
版权

01-Javascript(全局和局部变量)

在script标签内定义的变量，在整个页面都有效。称之为全局变量。如果想限定一个变量的使用范围的话，在函数里面定义的变量就是局部变量。而在脚本片段定义的变量，是全局变量。

Var x=3;

Function show(x){

    X=8;

}

Show(x);//最后打印结果为3。

代码如下：
<html>
  <head>
  </head>
  <body>
 	<script type="text/javascript">
	
		var x=3;
		function show(x){
			x=8;
		}
		show(x);
		document.write("x="+x);

	</script>

  </body>
</html>

02-Javascript(常见对象-Object)

js也是面向对象的。演示一下Object对象。

  1. toString()，将对象变成字符串。
<html>
  <head>
  </head>
  <body>
 	<script type="text/javascript">
	
		function show(){
			alert("show run");		

		}
		//alert(show.toString());
		var arr=[3,4,1,6,8];
		alert(arr.toString());
	</script>

 </body>
</html>

2.valueOf()，（跟上面的那个差不多）

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
	
		
		var arr=[3,4,1,6,8];
		alert(arr.valueOf());
	</script>


 </body>


</html>

03-Javascript(常见对象-String-基本功能)

String对象：可用于处理或格式化文本字符串。

表现形式；

Var str=new String(“abc”);
Var str=”abc”;
<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
	
	var str="abcde";
	document.write("str="+str+"<br/>");//换行的正确形式。
	
	document.write("len="+str.length);
		
</script>
 </body>
</html>

方法很多，需要自己去查阅API文档信息资料。以下是String()方法的演示：

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
	
	var str="abcde";
	document.write("str="+str+"<br/>");
	
	document.write("len="+str.length);
	document.write("len="+str.bold());//加粗
	document.write("len="+str.fontcolor("red"));//字体颜色
	document.write("len="+str.link("http://www.baidu.com"));//超链接,不加http://为啥不行呢？？
	document.write("len="+str.substr(1,3));//1是开始，截取3个。
	document.write("len="+str.substring(1,3));//1是起始，3是结尾，不包含3
							



	</script>


 </body>


</html>

04-Javascript(常见对象-String-自定义功能)

发现String对象方法有限，相对字符串操作的其他功能。比如：去除字符串两端的空格。这时只能自定义。

代码示例：

<html>
  <head>
 </head>
  <body>
 	<script type="text/javascript">
	
	var str="abcde";
	document.write("str="+str+"<br/>");
	
	document.write("len="+str.length);
	document.write("len="+str.bold());//加粗
	document.write("len="+str.fontcolor("red"));//字体颜色
	document.write("len="+str.link("http://www.baidu.com"));//超链接,不加http://为啥不行呢？？
	document.write("len="+str.substr(1,3));//1是开始，截取3个。
	document.write("len="+str.substring(1,3));//1是起始，3是结尾，不包含3
	//去除字符串两端的空格。						
	function trim(str){
		//定义两个变量，一个记录开始的位置。一个记录结束的位置。
		//对开始的位置的字符进行判断，如果是空格，就进行递增，直到不是空格为止。
		//对于结束位置的字符进行判断，如果是空格，就进行递减，直到不是空格为止。	
		//必须要保证开始<=结束，这样才可以进行截取。
		var start,end;
		start=0;
		end=str.length-1;
		while(start<=end&&str.charAt(start)==" "){
			start++;
		}
		while(start<=end && str.charAt(end)==" "){
			end--;
		}
		return str.substrin(start,end+1);
	}
	
	var s="    ab c    ";
	alert("-"+trim(s)+"-");//不知道为啥加了trim不行，代码跟视频写的是一样的，但是还是不行啊？
	</script>


 </body>


</html>

05-Javascript(常见对象-String-原型属性prototype)

 

alert("abc".bold());//<b>this</b>

既然上述自定义的trim方法是用来操作字符串的方法，可不可以像字符串已有的方法一样，将该方法定义到字符串对象中呢？直接用字符串对象调用就可以了。

Prototype属性：返回对象原型的引用。

 

这里就可以使用一个该字符串属性来完成。

原型：就是该对象的一个描述。该描述中如果添加了新功能，那么该对象都会具备这些新功能。而prototype就可以获取到这个原型对象。通过prototype就可以对对象的功能进行拓展。

需求：想要给string对象添加一个可以去除字符串两端空格的新功能。就可以使用原型属性来完成。给string的原型添加一个功能。

//给string的原型中添加一个功能。注意：给对象添加新功能直接使用对象，新内容即可。

String.prototype.len=199;//给string的原型对象中添加一个属性，名为len。值为199.

Document.write(“haha”.len);

//添加行为。

String.prototype.trim=function();//trim是之前自己定义写好的方法

//这一部分挺重要

{

//把之前方法里面的东西复制粘贴过来就可以

}

 

自己把它封装成一个方法，以后自己直接调用即可。

07-Javascript(常见对象-Array-基本功能)

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
	
	var arr=["abc","haha","cba","nba"];
	var arr2=["qq","xiaoqiang",70];
	document.write(arr);
	document.write(arr2);
	//在arr数组上连接一个"mm",再连接一个arr2数组
	document.write(arr.concat("mm",arr2));//将mm作为新数组中的元素，将arr2数组中的元素也作为新数组中的元素。

	document.write(arr.join());//跟toString方法类似
	document.write(arr.join("-"));//中间用-隔开而已，还是打印出来字符串
	//pop()方法：移除数组中的元素，并返回该元素。
	//shift()删除并返回第一个元素
	//还有很多方法就不一一看了。大脑不是用来记忆，是用来思考的。




	</script>


 </body>


</html>

08-Javascript(常见对象-Array-练习-堆栈和队列结构)

用数组实现js中的堆栈或者队列数据结构。

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
		var arr=[];
		arr.unshift("abc1","abc2","abc3");
		doucument.write(arr);//abc1,abc2,abc3
		arr.unshift("abc1");
		arr.unshift("abc2");
		arr.unshift("abc3");// abc3,abc2,abc1
	</script>

//unshift和pop互为队列，unshift和shift互为堆栈。存元素和取元素的方式。
 </body>


</html>

09-Javascript(常见对象-Array-练习-自定义功能)略过

10-Javascript(常见对象-Date-基本方法)

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
		//演示js中的日期	
	

	var date=new Date();
	document.write(date+"<br/>");
	document.write(date.toLocaleString()+"<br/>");
	document.write(date.toLocaleDateString()+"<br/>");
//打印结果Tue Jul 17 2018 09:05:32 GMT+0800 (中国标准时间)
//2018/7/17 上午9:05:32
//2018/7/17
	var year=date.getFullYear();
	var month=date.getMonth();
	var day=date.getDate();
	var week=getWeek(date.getDay());
	document.write(year+"-"+month+"-"+day+"-"+week);//可以分别打印出来
	
	function getWeek(num)
	{
		var weeks={"周日","周一","周二"，"周三","周四","周五","周六"};
		return weeks(num);

	
	}

	//日期对象和毫秒值之间的转换
	var date2=new Date();//获取毫秒值
	var time=date2.getTime();
	document.write("time:"+time);
	//将毫秒值转化成日期对象。
	//1.new Date（time）
	//2.setTime();

	var date3=new Date(time);
	//日期对象和字符串之间的转换，日期对象转成字符串。toLocaleString，toLocalDateString
	//将字符串转成日期对象。 （自己多去实践吧，没有耐心了。）




	</script>


 </body>


</html>

11-Javascript(JS中特有语句-with)

为了简化对象调用内容的书写，可以使用js中的特有语句with来完成。

格式：

With（对象）
{
在该区域中可以直接使用指定的对象的内容。不需要写对象.。
}

var year=date.getFullYear();
	var month=date.getMonth();
	var day=date.getDate();
	var week=getWeek(date.getDay());
	document.write(year+"-"+month+"-"+day+"-"+week);//可以分别打印出来
等价于：
With(date)//可以达到简化书写的目的。（前提是要有对象，要不然没法简化）
{
var year=getFullYear();
		var month=getMonth();
		var day=getDate();
		var week=getWeek(getDay());
		document.write(year+"-"+month+"-"+day+"-"+week);//可以分别打印出来


}

12-Javascript(常见对象-Math-基本功能)

演示Math对象,该对象的方法都是静态。不需要new，直接Math调用即可。

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
		
	

	var num1=Math.cell(12.34);//返回大于等于指定参数的最小整数
	var num2=Math.floor(12.34);//返回小于等于指定数据的最大整数
	var num3=Math.round(12.34); //四舍五入
	doucument.write(num1+"</br>");
	doucument.write(num2+"</br>");
	doucument.write(num3+"</br>");
	
	var num4=Math.pow(2,3);//2的3次方
	//parseInt方法（Math.random（）*10+1）属于全局对象中的方法。



	</script>


 </body>


</html>

13-Javascript(全局方法&Number对象)

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
		
	

	document.write("123"+1);//1231
	document.write(parseInt("123")+1);//124
	var val=parseInt("abc");
	document.write("value="+isNaN(val));//通过isNaN方法来判断结果是否非法
	var val=parseInt("12abc");//数字在前面，取前面的数字部分，如果开头是字母，则会直接报错。
	document.write("value="+val);//val=12
	var num=parseInt("110",2);//将指定进制格式的字符串转换成十进制
	document.write("num="+num);//6
	//将十进制转化成其他进制使用数字对象完成。
	var num3=new Number(6);
	document.write("num3="+num3.toString(2));//110
	var num4=60;//一切其实都是对象。不妨碍它是对象，也可以调用该方法。有点像自动装箱，被我猜到了，跟老师说的一样。哈哈
	document.write("num4="+num4.toString(16));//3c

	</script>


 </body>


</html>
  1. Javascript(JS中的特有语句-forin)

For in 语句

格式：

For(变量 in 对象)//对对象进行遍历的语句

var arr=[32,80,65];

for(i in arr){

document.write("i="+arr[i]);//可以把数输出出来

}//直接可以遍历打印出来

15-16Javascript(JS自定义对象)——比较重要(具体需要自己练习，大致简单看了看)

如果想要自定义对象，应该先对对象进行描述。Js是基于对象，不是面向对象的。不具备描述事物的能力。我们还想面对对象的思想编写js。

就要先描述，在js中，可以用函数来模拟面向对象中的描述。

用js来描述人

<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
		
	
	//用js来描述人
	function Person(){//相当于构造器。
//		alert("Person run");


	}
	//通过描述进行对象的建立。
	var p=new Person();
	//动态给p对象添加属性，直接使用p.属性名即可。
	p.name="zhangsan";
	p.age=29;
	//如果定义的p对象的属性赋值为一个函数，即可给p对象添加一个方法。
	p.show=function(){
		alert("show:"+this.name+":"+this.age)
	}
	p.show();
	var obj=new Object();
	obj.name="god father";
	obj.age=2018;
	alert(obj.name+":"+obj.age)	//这玩意与java还是有很大不同

	function Person1(name,age) //当然也可以像java一样先描述，封装好了再去使用。
	{
		this.name=name;
		this.age=age;
		this.setName=function(name){
			this.name=name;		
		}
		this.getName=function(){
	
			return this.name;
		}
	}
	var p=new Person("旺财",20);
	alert(p.name);//旺财
	alert(p.getName());
	</script>


 </body>


</html>

另外一种封装形式（键值对）：定义一个实体

var pp={
//定义一些成员
“name”:”小明”,”age”:38,
“getName”:function(){
return this.name;
}
}

Alert(pp.age+”:”+pp.getName());//pp[“age”]这样书写也可以，pp[age]这样写不行

//对象调用成员有2种方式：

  1. 对象.属性
  2. 对象[“属性名”]
<html>
  <head>

 </head>
  <body>
 	<script type="text/javascript">
		
	var myobj={
		myname:"lisi",myage:30;
	
}	
	alert(myobj.myname+":"+myobj["myage"]);//两种打印输出的方式。
	

	</script>


 </body>


</html>

 

王者小金
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
传智播客JS笔记
10-25
笔记做的很详细，通俗易懂，结合js代码讲解的，对初学javascript的很有用的
传智播客课程——JavaScript
chusheng2009的专栏
01-07 1914
一 Javascript概念    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言。二 澄清JavaScript和JAVA的关系    JavaScript最初的确是受Java启发而开始设计，因此语法上有很多类似之处，许多名称和命名规范也借自Java。但是实际上，它与Java本质上是不同的。它与Ja
JAVA_Lesson31(传智播客笔记之javascript）
wearlee的博客
07-15 385
Javascript是用来干什么的呢？javascript是前端开发语言，经常与html、css技术一起构成前端开发。javascript一般通过ajax与后台进行数据交互。其实和javascript有个相同名称的java 是后端开发语言，他俩虽然都有java这个单词，但是他俩没什么直接关系，就像雷锋和雷锋塔的关系一样。在script（脚本片段）标签内定义的变量在整个页面都有效。定义在函数内部的就...
Javascript学习笔记（传智播客视频学习笔记+代码）
07-12
Javascript个人学习笔记：基于传智播客的web前端培训视频所做的笔记以及相关的代码，比较基础全面的Javascript入门知识
传智播客JavaScriptL5.zip
09-29
传智播客完整JavaScript教程的第五部分，其他部分请查看其他链接
Java_Essential_lesson_12.rar_The Lesson
09-22
The Java盲 2 platform provides internationalization features that let you separate culturally dependent data from the application (internationalization) and adapt it to as many cultures as needed ...
Java_lesson
03-27
Java_lesson
Java_Core_lesson_21
02-17
Java_Core_lesson_21
java_core_lesson3
05-01
java_core_lesson3 DZ的交付
Java_FullStack_lesson
02-09
Java_FullStack_lesson
传智播客JavaScriptL7.rar
09-29
传智播客完整JavaScript教程的第七部分，其他部分请查看其他链接
传智播客32期solr所用的数据库.txt
07-21
这个是传智播客32期所用的数据库文件，
传智播客javascript韩顺平笔记
07-27
传智播客javascript韩顺平笔记
2019年XX期传智播客黑马程序员Java视频教程
04-07
请不要在下载了,链接已经失效, java 全套视频教程之JavaSE初级，后续视频会持续更新，特别适用于零基础的未入门者，从基础讲起，到项目实战，实时和机构培训同步（压缩包如需解压密码为java）
传智播客-黑马32期Java视频
04-12
传智播客-黑马32期Java视频，市面最新，请各位慢用。。
2016传智播客Java32期
02-23
2016传智播客Java32期，挺好的学习教程，无密码。。。。
传智播客JavaScriptL1.rar
09-29
传智播客完整JavaScript教程的第一部分，其他部分请查看其他链接
JAVA_Lesson16(传智播客笔记之常用对象API、集合框架）
wearlee的博客
07-05 917
常用对象API(基本数据类型对象包装类)package cn.itcast.wrapper.demo; public class WrapperDemo { public static void main(String[] args) { /* * 基本数据类型包装类：为了方便操作基本数据类型值，将其封装成了对象，在对象中定义了属性和行为丰富了该数据的操作。 * 用于描述该对...
JAVA_Lesson13(传智播客笔记之多线程）
wearlee的博客
07-02 451
多线程的状态创建线程的第一种方式—继承Thread类（其实就是覆盖run方法，然后调用自己的show方法）创建线程的第二种方式—实现Runnable接口      但是人家万一已经有爹了，那就没法了。不支持多继承。此时要拓展该类的功能，创建接口。让其中的内容作为线程的任务执行。接口就是为了实现拓展功能；一个类在继承一个类的同时，也可以实现多个接口，为了这个类增加多个功能。通过接口的形式完成（拓展D...
可以这样创建么，KEY `idx_lesson_id` (`lesson_id`,`section_id`) USING BTREE
最新发布
05-27
CREATE INDEX idx_lesson_id ON table_name (lesson_id, section_id) USING BTREE; ``` 这个语句创建了一个名为 `idx_lesson_id` 的索引，它包含了 `lesson_id` 和 `section_id` 两个列。`USING BTREE` 表示这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值