一.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等程序设计语言保持一致