JavaScript_01

weixin_45512282

于 2022-05-10 19:02:22 发布

阅读量148

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45512282/article/details/124679363

版权

1.JavaScript的使用方式

方式一:js的内部方式

向浏览器打印内容: document.write("hello!") ;

浏览器中控制台中打印内容:console.log("hello);

浏览中弹出一个提示框:alert("helloworld") ;

方式二:外部方式

需要在js文件夹中单独创建一个后缀为.js的文件,书写js代码,在当前html页面中将js文件导入即可

导入:<script src="js文件名"></script>

2.javascript中的变量以及数据类型

定义变量的注意事项

在js中定义变量,使用var来定义,var可以省略不写
javascript是弱类型语言,它的语法结构不严谨! 可以重复定义变量的,后面的变量的值将前面的变量值覆盖掉
查看js的变量的数据类型,使用一个函数 typeof(变量名)
var可以任意数据类型

js的基本数据类型

无论是整数还是小数,都是number类型, ---- js引擎会自动提升为 Number 对象类型
无论是字符串还是字符,都是string类型----js引擎会自动提升为 String 对象类型
boolean类型 ----js引擎会自动提升为 Boolean 对象类型
object类型 (创建一个对象 ) ---- js引擎会自动提升为Object对象类型
在Js中,Object对象代表所有js对象的模板
undefined类型 :未定义类型 (这种没有意义),因为没有赋值!

3.运算符

逻辑运算符

与 && 要求表达式左右两边的表达式同为true，整体结果才为true
或 || 要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非！将布尔值取反操作

算术运算符

+ - * / % ++ --

赋值运算符

=:基本赋值 +=,-=,*=,/=,%=

关系运算符

<,<=,>,>=,==,!=

逻辑运算符

实际开发中:逻辑双与&&,逻辑双或||

三元(三目)运算符

(表达式)?执行true的结果:false的结果

4.流程控制语句

顺序结构:js代码从上而下依次加载
选择结构
1. if
2. if else
3. switch

3. 循环结构

while循环

do-while循环

for循环

事件监听器

5.Js事件编程三要素

事件源 ----就是html标签的单击,双击....
编写事件监听器-- 就是编写一个函数 function 函数名称(){}
)绑定事件监听器-- 就在事件源上加上onxxx属性="函数名称()"

6.for-in语句

创建数组

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

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

静态初始化

arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

for-in语句的格式

for(var 变量名 in 数组或者对象名称){

使用变量名;

}

7.Js中的函数定义以及调用

定义函数的格式1

            function 函数名称(形参列表){

                        函数的里面的业务逻辑

                                return 结果;

}

格式2:

  function 函数名称(形参列表){

                函数的里面的业务逻辑

                return 结果;

                }

        调用:

               赋值调用

                var 最终结果变量 = 函数名称(实际参数列表) ;

定义函数的注意事项

js是弱类型语言,定义函数的时候,参数名称不能携带var
js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了
实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没有赋值
实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!

隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数

8.date对象的使用:网页时钟的操作流程

Js内置对象:

Date日期,String字符串,Array数组,正则表达式对象..

日期对象的基本使用:dateObj = new Date()

获取当前系统时间

1创建日期对象
拼接出来时间字符串
2)dom(文档对象模型编程)操作:
获取id="spanTip" 所在的span标签对象
设置span标签的文本内容
3开启网页定时器
setInterval("定时任务()",时间毫秒值):每经过时间毫秒值重复执行这个定时任务..
setTimeout("定时任务()",时间毫秒值):经过这个毫秒值之后,执行一次定时任务..


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10_网页时钟</title>
	</head>
	<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>
</html>

weixin_45512282

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_01

1.JavaScript的使用方式方式一:js的内部方式向浏览器打印内容:document.write("hello!") ;浏览器中控制台中打印内容:console.log("hello);浏览中弹出一个提示框:alert("helloworld") ;方式二:外部方式需要在js文件夹中单独创建一个后缀为.js的文件,书写js代码,在当前html页面中将js文件导入即可导入:<script ...
复制链接

扫一扫