本文详细介绍JavaScript的基础知识，包括语言特点、变量类型、运算符、控制结构及方法，并通过实例演示如何给网页添加动态效果，如平方计算、简单计算器、猜数字游戏等。
目录
WebBasic 网页编程基础
(学习如何开发页面,安装HBuilder)
JavaScript:
（学习如何给页面添加动态效果）
给页面添加动态效果
语言特点:
1. 属于脚本语言,不需要编译直接解析执行.
2. 基于面向对象
3. 属于弱类型语言,
- 强类型:int x=10; String s = "abc"; int y;
- 弱类型:var x=10; var s = "abc"; var y;
4. 安全性高: JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问.
5. 交互性高: 可以将JavaScript语言嵌入到html页面中和用户直接交互
引入方式:
如何在html页面中写JavaScript代码
1. 内联:在标签里面添加事件属性,在属性中写样式代码.
<input type="button" value="内联按钮"
οnclick="alert('内联触发!')"/>
2. 内部:在html页面中任意位置添加script标签,在标签体内写js代码.
3. 外部:在单独的js文件中写js代码,在html页面中通过script标签引入,好处:可以多页面复用,可以将html代码和js代码分离
语法
包括: 变量 数据类型 运算符 各种语句 方法 面向对象
变量声明和赋值
- JavaScript语言属于弱类型语言
- java: int x=10; String name="小明"; x="abc";(报错类型不匹配)
Person p=new Person();
- JS: var x=10; var name="小明"; x="abc";不报错 var p = new Person();
数据类型
JS中只有对象类型
- 常见的几种对象类型:
1. 数值:number 相当于Java所有数值类型的总和
2. 字符串:string 可以用单引号或双引号修饰字符串 var s = "abc"/'abc';
3. 布尔值:boolean true/false
4. 未定义:undefined var x; 变量只声明不赋值时为未定义类型
5. 自定义:object Person Car Hero
运算符 + - * / % > < >= <= = != ==
- 和Java大体相同
- ==和===的区别: ==会先统一等号两边变量的类型再比较值, ===是先比较类型,如果类型相等后再去比较值. 666==“666” true 666===“666” false
- 除法运算: js中会自动根据除法结果转换整数和小数
java:int x=5; int y=2; x/y=? 2;
js: var x=5; var y=2; x/y=2.5; x=6 x/y=3
- typeof x; 获取变量的类型 typeof 66+6 = "number"+6 = "number6"
语句 if else、 for、 while、 do while 、switch case
- 和Java中大体相同
- for循环中 int i 改成var i
方法
- java: public 返回值类型 方法名(参数列表){方法体}
- JS: function 方法名(参数列表){方法体}
- 如何声明常见的四种方法:
1. 无参无返回值
2. 无参有返回值
3. 有参无返回值
4. 有参有返回值
- 三种声明方法的方式:
1. function 方法名(参数列表){方法体}
2. var 方法名 = function(参数列表){方法体}
3. var 方法名 = new Function("参数1","参数2","方法体");
平方练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1" />
<input type="button" value="平方" onclick="myfn()"/>
<div id="d1">
</div>
<script type="text/javascript">
function myfn(){
var i1 = document.getElementById("i1");
var d1 = document.getElementById("d1");
if(isNaN(i1.value)){//是NaN不是数
d1.innerText="输入有误!";
}else{//不是NaN 是数值
//字符串内容进行-*/时会自动转成数值类型
//而+执行的是字符串拼接
//如果+希望进行的是数值计算而非字符串拼接需要
//将字符串转成数值
//1. 字符串*1 2. parseInt(字符串)
//d1.innerText = i1.value*1+i1.value*1;
d1.innerText = parseInt(i1.value)+
parseInt(i1.value);
}
}
</script>
</body>
</html>计算器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="button" value="+" onclick="fn5(1)" />
<input type="button" value="-" onclick="fn5(2)" />
<input type="button" value="*" onclick="fn5(3)" />
<input type="button" value="/" onclick="fn5(4)" />
<div id="d1">
</div>
<script type="text/javascript">
function fn5(x) {
//判断是否是数值
if (isNaN(i1.value) || isNaN(i2.value)) {
d1.innerText = "输入错误!";
return;
}
switch (x) {
case 1:
d1.innerText=i1.value*1+i2.value*1;
break;
case 2:
d1.innerText=i1.value-i2.value;
break;
case 3:
d1.innerText=i1.value*i2.value;
break;
case 4:
d1.innerText=i1.value/i2.value;
break;
}
}
function fn1() {
if (isNaN(i1.value) || isNaN(i2.value)) {
d1.innerText = "输入错误!";
} else {
d1.innerText = i1.value * 1 + i2.value * 1;
}
}
function fn2() {
if (isNaN(i1.value) || isNaN(i2.value)) {
d1.innerText = "输入错误!";
} else {
d1.innerText = i1.value - i2.value;
}
}
function fn3() {
if (isNaN(i1.value) || isNaN(i2.value)) {
d1.innerText = "输入错误!";
} else {
d1.innerText = i1.value * i2.value;
}
}
function fn4() {
if (isNaN(i1.value) || isNaN(i2.value)) {
d1.innerText = "输入错误!";
} else {
d1.innerText = i1.value / i2.value;
}
}
</script>
</body>
</html>
猜数字：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="i1" />
<input type="button" value="猜一猜" onclick="myfn()" />
<div id="d1"></div>
<script type="text/javascript">
//得到1-100的随机整数
var x = parseInt(Math.random()*100)+1;
//记录次数的变量
var count = 0;
function myfn(){
count++;
if(i1.value>x){
d1.innerText="大了";
}else if(i1.value<x){
d1.innerText="小了";
}else{
d1.innerText="恭喜你第"+count+"次猜对了!";
//重新得到随机数
x = parseInt(Math.random()*100)+1;
//把次数清零
count=0;
}
//猜完之后清空
i1.value="";
}
</script>
</body>
</html>
页面相关的方法
1. 通过元素id获取页面中的元素对象
<div id="d1">abc</div>
var d = document.getElementById("d1");
2. 获取和修改元素的文本内容
d.innerText = xxxx; 修改
d.innerText 获取
3. 获取和修改文本框的值
i1.value="xxx"; 修改
i1.value 获取
4. 获取和修改元素的html内容
i1.innerHTML=""; 修改
i1.innerHTML+=""; 追加
NaN
- Not a Number 不是一个数
- isNaN(x) 判断变量x是否是NaN true代表是NaN(不是数) false代表不是NaN(是数)
JavaScript对象分类
1. 内置对象:number/string/boolean等
2. 浏览器相关对象BOM: Browser Object Model 浏览器对象模型
3. 页面相关对象DOM: Document Object Model 文档对象模型
BOM浏览器相关内容
- window: 该对象的属性和方法称为全局属性和方法,访问时可以省略掉window.
1. window中常见的方法:
- window.isNaN(); 判断变量是否是数值
- window.parseInt(); 把字符串或小数转成整数
parseInt(Math.random()*100)
parseInt(i1.value) + parseInt(i1.value)
- window.parseFloat("2.38"); 把字符串转成小数
- window.alert(); 弹出提示框
- window.confirm("您确认离开吗?"); 弹出确认框
- window.prompt("想吃什么?"); 弹出文本框
- window.setInterval(方法,时间间隔); 定时器
当需要每隔一段时间重复做某件事的时候,使用定时器
var timer = setInterval(方法,时间间隔);
clearInterval(timer); 停止定时器
setTimeout(方法,时间间隔); 只执行一次的定时器
定时器练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="添加" onclick="myfn()" />
<div id="d1">
</div>
<script type="text/javascript">
function myfn(){
//开启定时器
setInterval(function(){
//写自己图片的路径
d1.innerHTML+="<img src='a.jpg'>";
},100);
}
</script>
</body>
</html>
2. window中常见的属性
- history:历史(当前窗口历史,关闭窗口历史会删除)
history.length 获取窗口历史页面数量
history.back() 返回上一页面 等效<-
history.forward() 前往下一页面 等效->
history.go(n) n代表前进和后退的数值 n=1代表前进1个页面 2代表2个页面 n=-1代表后退一个页面 -2后退两个页面 0刷新
- location:位置
location.href 获取和修改浏览器的访问地址
hocation.reload(); 刷新页面
- screen:屏幕
screen.width 屏幕的宽度
screen.height 屏幕的高度
- navigator导航/帮助
navigator.userAgent 获取浏览器的版本信息
事件
- 什么是事件:事件是系统给提供的一些特定时间点, 包括:鼠标事件/键盘事件/状态改变事件
1. 鼠标事件:
- onclick 点击事件
- onmouseover 鼠标移入事件
- onmouseout 鼠标移出事件
- onmousedown 鼠标按下事件
- onmouseup 鼠标抬起事件
- onmousemove 鼠标移动事件
2. 键盘事件:
- onkeydown 键盘按下事件
- onkeyup 键盘抬起事件
3. 状态改变事件:
- onload 页面加载完成事件
- onchange 值改变事件
- onresize 窗口尺寸改变事件
事件绑定(给元素添加事件的方式)
1. 事件属性绑定
2. 动态绑定(通过js代码给元素添加事件) 好处:能将html代码和js代码分离
事件传递(事件冒泡)
- 当某一个位置有多个事件需要响应,则事件的响应顺序是从最底层往上层传递,类似气泡从下往上所以称为事件冒泡.
DOM文档对象模型
- 页面相关内容
1. 通过id获取元素 document.getElementById("");
2. 获取和修改元素文本内容 innerText
3. 获取和修改元素html内容 innerHTML
4. 获取和修改文本框的值 value
扫一扫
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
