JavaScript

JavaScript

JavaScript简介

JavaScript一种解释性脚本语言,是一种动态类型、弱类型、基于原型继承的语言,内置支持类型。
它的解释器被称为JavaScript引擎,作为浏览器的一部分,广泛用于客户端的脚本语言,用来给HTML网页增加动态功能。

JavaScript组成部分

ECMAScript语法
文档对象模型(DOM Document Object Model)
浏览器对象模型(BOM Browser Object Model)

JavaScript发展史

它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言,JavaScript是甲骨文公
司的注册商标。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器
对象模型。
Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名
为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因
此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自
Self和Scheme。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系
统达成协议的结果。为了取得技术优势,微软推出了JScript来迎战JavaScript的脚本语言。
两者都属于ECMAScript的实现,为了互用性,ECAM(欧洲计算机制造商协会)创建了
ECMA-262标准(ECMAScript)。ECMAScript最新版本是2015发布的 ECMAScript
6(ES6)。

js的使用方式

	 script的type属性可以不写,如果要写的话使用
		type="text/javascript" 
	方式1:js的内部方式	
	<script>
			//单行注释
			/*多行注释*/
			
			//在js常见的函数
			//向浏览器打印内容,类似于Java中的控制台输出语句
			document.write("hello,JavaScript我来了!") ;
			
			//还可以在浏览器中控制台中打印内容
			console.log("hello,JavaScript我来了") ;
			
			//在浏览中弹出一个提示框  
			//window对象是浏览器中顶级对象,可以省略不写!
			//window.alert("helloworld") ;
			//简写为:
			alert("helloworld") ;
	</script> -->
	方式2:外部方式
		 实际开发中(前端开发人员开发使用的!)
		 需要在js文件夹中单独创建一个后缀为.js的文件
		 书写js代码,在当前html页面中将js文件导入即可!
		 
		 导入外部js文件 
			 <script src="js/01.js"></script>	

javascript中的变量以及数据类型

内部方式

定义变量的注意事项
	1)在js中定义变量,使用var来定义,var可以省略不写(刚开始,建议写上)
	2)javascript是弱类型语言,它的语法结构不严谨! 可以重复定义变量的,后面的变量的值将前面的变量值覆盖掉
	3)查看js的变量的数据类型,使用一个函数 typeof(变量名)
	4)var可以任意数据类型!
	
js的基本数据类型
	1)无论是整数还是小数,都是number类型, ---- js引擎会自动提升为 Number 对象类型
	2) 无论是字符串还是字符,都是string类型----js引擎会自动提升为 String 对象类型
	3)boolean类型                      ----js引擎会自动提升为 Boolean 对象类型
	4)object类型   (创建一个对象 )  ---- js引擎会自动提升为Object对象类型
									在Js中,Object对象代表所有js对象的模板!
	5)undefined类型 :未定义类型 (这种没有意义),因为没有赋值!
	
			var a = 10 ;
			var a = 20 ;
			var b = 3.14 ;
			 c = "hello" ;
			var d = 'A' ; 
			var e = true ;
			var f = false ;
			var g = new Object() ;
			var h ;
			
			
			//在浏览器中输出内容
			document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ;
			document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;
			document.write("c的值是:"+c+",c的数据类型是:"+typeof(c)+"<br/>") ;
			document.write("d的值是:"+d+",d的数据类型是:"+typeof(d)+"<br/>") ;
			document.write("e的值是:"+e+",e的数据类型是:"+typeof(e)+"<br/>") ;
			document.write("f的值是:"+f+",f的数据类型是:"+typeof(f)+"<br/>") ;
			document.write("g的值是:"+g+",g的数据类型是:"+typeof(g)+"<br/>") ;
			document.write("h的值是:"+h+",h的数据类型是:"+typeof(h)+"<br/>") ;

Js的运算符

Js是弱类型,语法结构不严谨
	true,false在运算的时候都自己默认值 true是1,false是0
	实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!

			算术运算符
				+,-,*,/,%
				++,--
			赋值运算符
				=:基本赋值
				+=,-=,*=,/=,%=
			比较(关系运算符)
				<,<=,>,>=,==,!=
				
			逻辑运算符
				实际开发中:逻辑双与&&,逻辑双或||
			三元(三目)运算符
					(表达式)?执行true的结果:false的结果
		
        <script>
			//算术运算符
			//定义两个变量
                var a = 3 ;
                var b = 4 ;

                document.write((a+b)+"<br/>") ;
                document.write((a-b)+"<br/>") ;
                document.write((a*b)+"<br/>") ;
                document.write((a/b)+"<br/>") ; //Java中是默认取整,js是不会的
                document.write((a%b)+"<br/>") ;
                document.write((a+true)+"<br/>") ;
                document.write((b-false)+"<br/>") ;
                document.write((++a)+"<br/>") ;
                document.write((--a)+"<br/>") ;
                document.write("<hr/>") ;
			
			//赋值运算符
                var c = 20 ; //将20赋值给c这个变量
                c+=10; // 等价于 c = c + 10 ; //将左边的变量和右边的值相加,在赋值给左边变					量c
                document.write("c的值是:"+c) ;
                document.write("<hr/>") ;
			
			//比较(关系运算符)
                var x = 3 ;
                var y = 4 ;
                var z = 5 ;
                document.write((x+y)>=(x+z)) ;
                document.write("<hr/>") ;
                document.write(((x+y)<(x+z))+"<br/>") ;

                document.write(((x+y)<=(x+z))+"<br/>") ;

			//==不能写成=
                document.write((x==y)+"<br/>") ;
                document.write("<hr/>") ;
			
			//逻辑双与&&:有false,则false
			//逻辑双或||:有true,则true
			
			//逻辑双与&&和逻辑双或||和Java的&&和||一样
			//&&:左边的表达式为false,则右边不执行了,具有短路效果
			//||:左边的表达式为true,则右边不执行了,具有短路效果
			//实际开发:这种&&,|| 效率非常高!
                document.write(((x>y) && (x>z))+"<br/>") ;
                document.write(((x>y) && (x<z))+"<br/>") ;
                document.write(((x<y) && (x>z))+"<br/>") ;
                document.write(((x<y) && (x<z))+"<br/>") ;
                document.write("<hr/>") ;
                document.write(((x>y) || (x>z))+"<br/>") ;
                document.write(((x>y) || (x<z))+"<br/>") ;
                document.write(((x<y) || (x>z))+"<br/>") ;
                document.write(((x<y) || (x<z))+"<br/>") ;
                document.write("<hr/>") ;

                var m = 5 ;
                var n = 6 ;
                document.write("m:"+m+",n:"+n+"<br/>") ;
                document.write((((++m)==5) && ((--n)==6))+"<br/>")  ;
                document.write("m:"+m+",n:"+n+"<br/>") ;
                document.write("<hr/>") ;
			
			//(表达式)?执行true的结果:false的结果
                var age = 20 ;
                document.write((age>=18)? "成年人!":"未成年人!") ;
			
			
		 </script>

Js中的流程控制语句

三大类
	1)顺序结构:js代码从上而下依次加载
	2)选择结构
		if结构
			if(表达式){
				语句
			}
						
			if(表达式){
							
			}else{
							
			}
						
			if(表达式1){			
				语句1;				
			}else if(表达式2){			
				语句2 ;
				...
				...
			}else{
				语句n;
			}
                //比较两个数据的最大值
                var a = 10 ;
                var b = 20 ;
                //定义一个结构变量
                var max ;
                //if格式2
                if(a>b){
                    max = a ; 
                }else{
                    max = b;
                }
                document.write("最大值是:"+max+"<br/>") ;
                //选择结构之if格式2 :针对两种情况进行判断
                //实际开发中,if里面一个表达式---true或者false
                //因为js是弱类型语言,
                //1)如果if里面是一个非0的整数,条件是成立的;
                //2)如果是非空字符串,条件成立;
                //3)如果是非null的对象,条件成立的;
                /* if(new Object()){
                    alert("条件成立") ;
                }else{
                    alert("条件不成立")
                } */
		switch结构
			switch(表达式){
			case 可以变量/也可以常量:
					语句1;
					break ;
			...
			...
			default:
					语句n;
					break ;
			}
                //switch语句:判断星期
                /*
                    switch语句的结束条件
                        1)遇见break结束
                        2)程序默认执行到末尾
                    case语句后面没有break,会造成"case穿透现象!"
                    case后面跟Java语言的case语句不一样的地方就是这个case后面可以是变量!
                    而Java中只能是常量!
                */
	3)循环结构		
		for(使用居多),while(其次while),do-while
		//循环
			//for循环
			/*
			 for(初始化语句;条件表达式;控制体语句){
				 循环体语句;
			 }
			*/
		   		//在控制台输出5次"helloworld"
                for(var i = 1 ; i <=5 ; i ++){
                    document.write("helloworld<br/>") ;
                }
                document.write("<hr/>") ;
          /*
			while循环
			初始化语句;
			while(条件表达式){
				循环体语句;
				
				控制体语句;
			}
		  */
              //需求:浏览器中输出5次"我爱高圆圆"
              var x = 1 ;
              while(x<=5){
                  document.write("我爱高圆圆<br/>") ;
                  x++ ;
              }
               document.write("<hr/>") ;
                //do-while
		   /*
			初始化语句;
			do{
				循环体语句;
				控制体语句;
			}while(条件表达式) ;
			和for,while,循环体至少执行一次!
			
		   */
                  //需求:浏览器中输出5次"我爱高圆圆"
                  var j = 7 ;
                  do{
                      document.write("我爱高圆圆<br/>") ;
                      j++ ;
                  }while(j<=5) ;

Js事件编程三要素

1)事件源 ----就是html标签  的单击,双击....

2)编写事件监听器-- 就是编写一个函数	 
        function 函数名称(){

        }
	事件监听器
    		*/function testSerach(){
				//alert("触发了这个点击事件") ;
				
				//需要获取文本输入框的内容  获取的input标签的value属性
				//dom操作:  
				//1)通过特别的方式获取标签对象   最常用的 document.getElementById("id属					性值") ;
				//2)使用标签对象改变标签的属性
				
				//获取id="month"所在的input标签对象
				var inputObject =document.getElementById("month") ;
				//获取到value属性,获取文输入框的内容
				var content = inputObject.value ;
		方式1:if...else if...else
		//js中,数字字符串 在和number进行==,string会自动转换成number
		//方式2:switch语句,利用case穿透
			//case语句后面: string类型数字字符串 无法自动转换为number进行对比
			//js中有一个函数: js提供的 parseInt(数字字符串) ----->number类型
			content = parseInt(content) ;
3)绑定事件监听器-- 就在事件源上加上onxxx属性="函数名称()"
	

for-in语句

for-in类似于增强for循环
	应用场景:
			1)遍历数组
			2)遍历对象的属性 (明天讲:js自定义对象 4种方式)
for-in语句的格式
		for(var 变量名 in 数组或者对象名称){
			使用变量名;
		}
		
		 for(var i in arr){
			 document.write(arr[i]+"&nbsp;&nbsp;") ;
		 }

在js如何 创建一个数组

方式1:  var 数组对象 = new Array() ;  //不指定长度

方式2: var 数组对象 = new Array(长度) ;//指定长度
		var arr = new Array(2) ;
方式3:静态初始化,
		arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
		简写格式  :var 数组对象名称=  [元素1,元素2,元素3,.....] ;
		在js中,数组可以存储任何类型元素,实际开发中,还是遵循数据类型一致!
		

Js中的函数定义以及调用

定义函数的 格式1	        形式参数列表
		function 函数名称(参数名称1,参数名称2....){
				函数的里面业务逻辑
				直接在这输出document.write("xxx") ;
		}
		格式1调用:
				单独调用
				函数名称(实际参数列表) ;
	
		定义函数,两个数据求和
		格式1的写法:
				function sum(var a, var b ){//不能带var
                function sum( a,  b ){
					var c = a+b ;
					document.write("c:"+c);
				}
			//调用
        		sum(10,20) ; 
格式2:(推荐)
		function 函数名称(参数名称1,参数名称2....){				
				函数的里面的业务逻辑
				return 结果;
		}
		格式2调用:
				赋值调用
				var 最终结果变量 = 函数名称(实际参数列表) ;
				
		格式2的写法
			function sum(a,b){
				var c =a+b ;
				return c;
			}
            function sum(a,b,c){ //a=10,b=15,c=20
					//隐藏一个数组名称:arguments
					//作用:将实际参数绑定给形式参数
					for(var i = 0 ; i< arguments.length;i++){
						document.write(arguments[i]+"&nbsp;&nbsp;<br/>");
					}
					var d = a+b+c ;
					return d ;
				}
				//赋值调用
				var result = sum(10,15,20) ;
				document.write("result:"+result) ;
定义函数的注意事项:
		1)js是弱类型语言,定义函数的时候,参数名称不能携带var
		2)js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
		3)Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了	
		4)实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没有赋值
		实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!
		5)隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数

Js内置对象Date

Js内置对象:
		Date日期,String字符串,Array数组,正则表达式对象..
		浏览器在解析javascript的时候,能够识别这个对象,使用里面的方法!
日期对象的基本使用 :
		dateObj = new Date()
        创建一个日期对象
			var date = new Date() ;
		//输出
		//document.write(date) ;//Mon May 09 2022 16:40:31 GMT+0800 (中国标准时间)  原生Date格式
		//获取年份
			//getYear() :当前的年份与 1900 年之间的差距
			//改用getFullYear()
			//var year = date.getYear() ;
			var year = date.getFullYear() ;
			document.write(year+"年") ;
			
			//获取月份
			//getMonth() :返回一个处于 0 到 11 之间的整数
			var month = date.getMonth()+1 ;
			document.write(month+"月") ;
			
			//月中的日期 getDate( ): 1 到 31 之间的整数
			var monthWithDate = date.getDate() ;
			document.write(monthWithDate+"日&nbsp;&nbsp;") ;
			
			//getHours() 获取小时值
			document.write(date.getHours()+":") ;
			
			//getMinutes():获取分钟值
			document.write(date.getMinutes()+":") ;
			//getSeconds() :getSeconds()
			document.write(date.getSeconds()) ;

innerText和innerHTML属性有什么区别

span:行内标签,
			任何标签都有这俩个innerText和innerHTML
			
			这两个属性代表设置标签的文本内容
			innerHTML可以加入html标签,可以被解析 (推荐)
			innerText只是普通的文本内容,不能够解析html标签,如果加入html标签
			就会原封不动的解析成普通文本!

dom操作:

1)获取span标签对象 : 通过id属性获取
	var spanObject = document.getElementById("tip") ;
2)通过标签对象改变属性  :innerHTML属性
	spanObject.innerHTML = "<h2>系统时间</h2>" ;
	innerText属性
	spanObject.innerText = "<h2>系统时间</h2>";

网页时钟

<body>
		<h3>当前系统时间是:</h3>
		<span id="spanTip"></span>
	</body>
	<script>
		function generateDate(){
			//1)获取当前系统时间
			//1.1)创建日期对象
			var date = new Date() ;
			//1.2)拼接出来时间字符串
			var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
			+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+":"+date.getMinutes()+":"+
			date.getSeconds() ;
			
			//2)dom(文档对象模型编程)操作: 
			//2.1)获取id="spanTip" 所在的span标签对象
			var span = document.getElementById("spanTip") ;
			//2.2)设置span标签的文本内容
			span.innerHTML ="<h3>"+dateStr+"</h3>"  ;
		}
		
			//3)开启网页定时器
			//setInterval("定时任务()",时间毫秒值):每经过时间毫秒值重复执行这个定时任务..
			//setTimeout("定时任务()",时间毫秒值):经过这个毫秒值之后,执行一次定时任务..
			
			setInterval("generateDate()",1000) ; //每1秒重复执行生成时间的任务
	</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值