JavaWeb暑假学习——JavaScript——Day1

一.Javascript介绍

主要是给网页增加动态功能

1.简单性

无需先被编译,而是在程序运行过程中被逐行的解释,其基本结构与C,C++较为类似。

2.动态性

它是采用事件驱动的方式对用户响应。

事件驱动:是指网页中执行了某种操作所产生的动作  例如:按下鼠标,移动窗口,选择菜单等等

这些事件发生之后,可能会引发相应的事件响应

3.跨平台性

这门语言是依赖浏览器本身,与操作环境或系统无关,只要能运行浏览器且浏览器能支持javascript的计算机都能正确执行它。

4.安全性

它只允许通过浏览器实现信息浏览或动态交互

它不允许访问本地硬盘,且不能将数据存入到服务器上面,不允许对网络文档进行修改和删除。

二.在页面中添加Javascript脚本的方式

其实只要加了<script>标签,标签放在哪里浏览器都可以执行,只不过在处理上有一点点区别

1.位于页面<body>部分中

这些脚本将在页面被加载时运行,例如待会要实现的案例驱动的——实现关闭窗口功能

2.位于页面<head>部分中

这些脚本将在事件触发时它们被调用

把他们放在<head>标签里边的<script>标签内,以确保他们在页面显示之前加载,在页面加载时能够立即使用

3.位于外部文件中

把JavaScript代码编写在扩展名为.js的外部文档中,可以让这个脚本被多次重复利用,如果需要更新脚本,也只需要改一个位置即可

<script src="../___.js"></script>

三.案例驱动学习Javascript——背景颜色变化

一.案例效果图:

二.写的时候遇到的问题:

1.怎么样把option获得的值给到函数,然后变成背景颜色

——我使用了一个变量去接收它

2.怎么通过函数改变背景颜色

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>改变背景颜色</title>
	<!-- function函数
		方法:接收到select中选择的value ,再来改变颜色
		参数:无
		
		因为我用的是全局变量接收这个value的值
	-->
	<script>
	function change(){
		var a=document.getElementById("color").value;
		document.body.style.backgroundColor=a;
	}
	</script>
</head>

<body>
	<!--先设计出大致内容框架,再设计JavaScript函数代码-->
	<form>
		<!-- select这个标签和option组合形成下拉框-->
		<select id="color">
			<option value="red">红色</option>
			<option value="green">绿色</option>
			<option value="blue">蓝色</option>
			<option value="yellow">黄色</option>
		</select>
		<!-- 这个是一个可以点击的按钮 用来改变颜色-->
		<input type="button" value="变变变" id="vary" onClick="change()" />
		
	</form>
</body>
</html>
三.效果:

四.需要学习的知识点内容

一).Javascript输出方式

1.弹窗输出
<script>
		window.alert('HELLO,主人')
		alert('你好')
		window.alert('第一种输出方式,两行之间可以不用添加分号')
</script>
2.控制台输出
<script>
		console.log(1+2)
		console.log('好帅hhhh')
</script>

--->可以做一些数的运算,也可以输出

看控制台的步骤:在网页上点右键,然后有一个检查,之后再在最上面一行找到console或者控制台几个字点击,就可以看见了

该输出方式最主要是应用在以后方便我们调试JS代码程序

3.在页面上输出
<script>
		document.write(2+3)
		document.write('你好')
</script>

注意:输出括号里面的文本都需要添加引号

二).数据类型与dou'you变量

1.数据类型

java里边的数据类型它基本上都有

2.变量

什么是变量---->就是可以改变的量

两种声明类型----->let   var

let : 1.不可以重复声明  2.只能在自己的作用域中使用

var : 1.可以重复声明   2.使用它声明的都属于全局变量 

3.命名规范

数字不能开头,可以包含下划线,不能使用JavaScript的关键字,JavaScript对变量名区分大小写

4.常量

利用const关键字声明,而且在声明时必须赋值,且不能改变

三).表达式与运算符

1.算术运算符

2.赋值运算符

3.比较运算符

4.布尔运算符

四).函数

函数是通过关键字function来声明

1.定义函数的方式

包括  函数名称  思考哪些值需要作为参数  添加语句

例如:
function area(width,height){
		area=width*height;
		return area;
}

注意:javascript中对每一句语句分隔有换行和分号两种,但是为了规范,还是建议用分号隔开每一条语句

2.调用函数的方式

例如:

<input type="button" value="变变变" id="vary" onClick="change()" />

3.return语句

如果有需要返回结果的函数,必须使用return语句,这条语句指定某一个值将返回给调用函数的位置

五).基本语句

与java等程序设计语言保持一致

  • 13
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值