一、JavaScript介绍
- JavaScript:前端的强大的脚本语言
二、JavaScript和javaWeb常用语言比较
- Java:编译型语法,有可移植性,跨平台特性
- JavaScript:语法与java类似,主要是做前端页面的上的逻辑处理,和做一些动效
主要操作:1)可以操作标签 2) 追加样式 3)前端的验证 - html: 超文本标记语言==>预定义的一些标签 ==>编写网页的骨干
三、JavaScript的语言特点
JavaScript特点:
- 1.不需要编译,由浏览器直接解析
- 2.不能单独运行,需要依赖于html
- 3.代码浏览器是从上到下进行解析
四、JavaScript的三大组成部分
- 1.ECSAscript ==>用于表示js中的基础语法
- 2.BOM 浏览器对象==>也就是对窗口进行操作
- 3.DOM 文本对象(节点对象) ==>也就是操作html的标签
五、JavaScript的引入方式
1.直接引入(需要写在html里) <script>中间些js代码</script>
2.外部引入引入的语法 <script src="js/index.js"></script>
注意: a.外部的js文件不需要写<script></script>
b.html页面想使用外部的js文件,必须先引入,引入一般是放在头部
六、JavaScript的命名方式和注释
- 1.//单行注释
- 2.多行
<!---->
- 3.变量还有方法的命名遵循java的以下规范:
- 不要使用关键字 2. 驼峰命名 3.通俗易懂 英文命名
七、JavaScript的调试:dug 调试:
步骤:(以谷歌游览器为例)
- 1.谷歌浏览器里检查代码
- 2.找到Sources
- 3.设置断点 一步一步的调试
八、JavaScript的常用类型:
- 变量的修饰符是 var ==>具体的类型是由其值决定的
- Boolean布尔值
- number 数值类型
- string 字符串类型
- undefined 未定义类型
- null 空值类型
- 其中:undefined 是由null 派生出来的 undefined ==null
返回的是true,虽然是true,但是undefined和null表达的意义不一样
九、JavaScript和java的常用类型比较:
- 注意:java 中Class 都表示引用数据类型 ==>js不需要编译,只要是引用数据类型就是对象(object)
var str= new String("我是字符串");
十、JavaScript的运算符:
- 1、 算术运算符:
+ 、 - 、* 、 / 、 % 、 -(一元取反) 、 ++ 、 --
- 2、等同全同运算符:
== 、 ===、 !== 、 !===
- 3、比较运算符:
< 、 > 、 <= 、 >=
- 4、字符串运算符:
< 、 > 、 <= 、 >= 、 = 、 +
- 5、逻辑运算符:
&& 、 ||、 !、
- 6、赋值运算符:
=、 +=、 *=、 -=、 /=
注意点:== 只比较数值 === 比较数值也比较数据类型
十一、JavaScript的方法
- java方法的语法: 访问修饰符 返回值类型 方法名(参数列表){方法体}
- JavaScript方法的语法 function 方法名(参数列表){执行方法体}
<script>
function f(num) {
}
</script>
注意点:
- 1.使用function关键字来进行修饰
- 2.方法的不能加var
- 3.方法可以有返回值
- 4.方法没有重载之说,任何数值与NaN相加都返回NaN
十一、JavaScript中常用事件:(后面附带案例)
- onsubmit ==> true 可以提交 否则 不可以提交
- onclick:点击事件
- onload :也就是html加载完成之后所触发的事件
- onblur :失去焦点
- onfocus: 获取焦点
- 其中:window.οnlοad=function () {} 等同于 onload
JavaScript中的数组:
十二、JavaScript数组的两种初始方式: var nums =["您好",44,70.8,true];
里面的数组数据类型随意- 2.
var nums = new Array("ddd",29,true);
里面的数组数据类型随意
十三、JavaScript中四种获取节点的方式
- 1.
document.getElementById("tv_id");
通过id来获取 - 2
document.getElementsByTagName("input");
根据标签名来获取,返回的是数组 - 3
document.getElementsByName("sex");
根据name来获取返回的是数组 - 4.
document.getElementsByClassName("tv_class");
根据class来获取返回的是数组
十四、JavaScript中常用地方法与操作:
- 1.0.根据id获取input的文本值 document.getElementById(“tv_uname”).value;(value获取的到的值是字符串类型) 前端验证的注意事项 如下:
- 1.1.οnsubmit="return check()"多用在表单form里面返回true表示可以提交,返回false表示不能提交这个表单(一定记住要加入return)
- 1.2.input vaule 默认值是""
- 1.3.document.getElementById(“tv_uname”) 括号里一定要有引号 value 不是方法
- 1.4.setInterval(“第一个参数是所要触发的事件”,“时间,毫秒为单位”)
- 1.5.clearInterval(id); 清除定时器操作(一定指明id,id是指定时器的,指明要清除的定时器)
- 1.6.setTimeout(“第一个参数是所要触发的事件”,“时间,毫秒为单位”) 间隔多少秒只执行一次 clearTimeout(id) 清除定时器
- 1.7.style=“display: none” 隐藏控件
- 1.8.tv_uname_span.innerHTML="" 这个属性就是向标签添加内容
- 1.8.tv_id.innerHTML ==>获取其节点里的内容
练习一:计时器的实现
要求:使用setInterval()实现计数1—6效果
实现效果
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器</title>
</head>
<body>
<script>
var id;
var count = 1;//全局变量计数器
window.onload = function () {//当页面加载完成时执行这个方法
id = setInterval("f()", 1000);//定时函数,每当1000毫秒到来,执行一次绑定的函数f()
}
function f() {
alert(count);
if (count == 6) {//当计数器达到6时清理定时器
clearInterval(id);
}
count++;
}
</script>
</body>
</html>
练习2:轮播图实现
要求:给定图片数量实现图片自动无限轮播
实现效果:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img src="image/1.jpg" width="100%" id="tv_img" height="500px">
<script>
window.onload = function () {
// 隔多长时间换图
setInterval("changeImg()",500);
}
var count =1;
function changeImg() {
// 获取这个标签
var tv_img = document.getElementById("tv_img");
tv_img.src="image/"+count+".jpg";
// 判断是否是最后一张图片
if(count==3){
count=1;
return;
}
count++;
}
</script>
</body>
</html>
练习3:表格隔行变色和实现多选按钮的全选,反选,全部选
实现效果:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td {
text-align: center;
}
#xun{
text-align: center;
}
</style>
</head>
<body>
<div id="xun">
<input type="button" value="全不选" onclick="qunaxuan()">
<input type="button" value="全选" onclick="buxaun()">
<input type="button" value="反选" onclick="fanxuan()">
</div>
<table border="1" cellspacing="0" cellpadding="0" width="300px" align="center">
<tr>
<td ><input type="checkbox" name="chec"class="che"></td>
<td>456</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td ><input type="checkbox" name="chec" class="che"></td>
<td>456</td>
<td>789</td>
<td>987</td>
</tr>
<tr>
<td ><input type="checkbox" name="chec" class="che"></td>
<td>456</td>
<td>789</td>
<td>987</td>
</tr>
<tr>
<td ><input type="checkbox" name="chec" class="che"></td>
<td>456</td>
<td>789</td>
<td>987</td>
</tr>
</table>
<script>
var color = ["red", "#cccc", "sandybrown", "salmon"];//table隔行变色
var tr = document.getElementsByTagName("tr");//返回的是标签数组
for (var i = 0; i < tr.length; i++) {//遍历标签数组
/*if (i%2!=0){
tr[i].style.backgroundColor="red";
}*/
tr[i].style.background = color[i];
}
function buxaun() {//不选
var che = document.getElementsByClassName("che");
for (var i = 0; i < che.length; i++) {
che[i].checked = true;
}
}
function qunaxuan() {//全选
var che = document.getElementsByClassName("che");
for (var i = 0; i < che.length; i++) {
che[i].checked = false;
}
}
function fanxuan() {//反选
var che = document.getElementsByClassName("che");
for (var i = 0; i < che.length; i++) {
che[i].checked =!che[i].checked;//通过设置checked属性
}
}
</script>
</body>
</html>
练习四:使用settimeout()实现指定时间显示图片,在一定时间内再把图片隐藏起来
实现效果:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<img src="image/1.jpg" id="v_img" style="display: none" width="200px" height="200px"></img><!--使用display: none先隐藏image标签-->
<img src="image/2.jpg" width="400px" height="400px">
<script>
window.onload = function () {
setTimeout("show()", 2000);//settimeout()里的show方法只被会调用一次
}
function show() {
var v_img = document.getElementById("v_img");
v_img.style.display = "block";//设置image显示
setTimeout("hide()",2000);//等待2秒后,把image标签隐藏
}
function hide() {
var v_img = document.getElementById("v_img");
v_img.style.display = "none";
}
</script>
</body>
</html>
练习五:常用弹框
实现效果:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提示框</title>
</head>
<body>
<script>
alert("sdsdfsfsfsdf");//弹出提示框
var comf=confirm("是否");//返回布尔值,弹出有确定和取消选项的弹窗
if (comf){
alert("已删除");
}else if (!comf){
alert("删除失败")
}
var text=prompt("请输入按照提示输入");//弹出有输入框的弹窗
alert(text);//接收提示框输入的文本
</script>
</body>
</html>
练习六:
实现登录窗口的基础验证,包括form表单提交确认事件onsubmit的使用,它return的返回值true和false觉得是否可以跳转,onclik事件的使用,焦点点击事件,焦点移除事件在登录创建的应用
实现效果:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="get" action="setTimeout.html" onsubmit="return f()">
用户名:<input type="text" name="user" id="v_user" onblur="addU()" onfocus=" deleU()"><span id="s_user"></span> <br>
密码:<input type="text" name="pwd" id="v_pwd" onblur="addU()" onfocus="deleU()"><span id="p_user"></span> <br>
确认密码:<input type="text" name="re_pwd" id="v_re_pwd" onblur="addU()" onfocus="deleU()"><span id="r_user"></span> <br>
<a><input type="submit" value="提交"></a>
</form>
<script>
function addU() {
var v_user = document.getElementById("v_user").value;//注意:value获取的值都是字符串
var v_re_pwd = document.getElementById("v_re_pwd").value;
var v_pwd = document.getElementById("v_pwd").value;
if (v_user == null || v_user == "") {//通过空值和null判断是否为空
var s_user = document.getElementById("s_user");//在span标签里面添加显示的内容
s_user.style.color = "red";//设置字体的颜色
s_user.innerHTML = "账户名为空";
return false;//不能被跳转
}
if (v_pwd == null || v_pwd == "") {
var p_user = document.getElementById("p_user");
p_user.style.color = "red";
p_user.innerHTML = "密码为空";
return false;
}
if (v_re_pwd != v_pwd) {
var r_user = document.getElementById("r_user");
r_user.style.color = "red";
r_user.innerHTML = "密码不一致";
return false;
}
}
function deleU() {//把span文本设置为空
var s_user = document.getElementById("s_user");
var p_user = document.getElementById("p_user");
var r_user = document.getElementById("r_user");
if (s_user != null || s_user != "") {
s_user.innerHTML = "";
}
if (p_user != null || p_user != "") {
p_user.innerHTML = "";
}
if (r_user != null || r_user != "") {
r_user.innerHTML = "";
}
}
function f() {
var v_user = document.getElementById('v_user').value;
var v_pwd = document.getElementById('v_pwd').value;
var v_re_pwd = document.getElementById('v_re_pwd').value;
if (v_user == null || v_user == "") {
alert("用户名为空");
return false;
}
if (v_pwd == null || v_pwd == "") {
alert("密码为空为空");
return false;
}
if (v_re_pwd == null || v_re_pwd == "") {
alert("确认密码不能为空");
return false;
}
if (v_pwd != v_re_pwd) {
alert("密码不一致");
return false;
}
return true;
}
</script>
</body>
</html>
练习七:
编写代码实现:实现当点击“计算折扣” 按钮时,展示如效果图
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p align="center">编写代码实现:实现当点击“计算折扣” 按钮时,展示如效果图。</p>
<table align="center">
<tr><td></td></tr>
<tr><td>书名:<input type="text" name="book"></td></tr>
<tr><td>作者:<input type="text" name="reader"></td></tr>
<tr><td>价格:<input type="text" name="mun" id="en"></td></tr>
<tr><td>折扣:<input type="text" name="cun" id="en2"></td></tr>
<tr><td><input type="button" value="计算折扣价" onclick="f()"><span id="we" style="color: red"></span></td></tr>
</table>
<script>
//由于没有涉及到数据查询,只是单纯的运算大折后的数
function f() {
var en=document.getElementById("en").value;
var en2=document.getElementById("en2").value;
var we=document.getElementById("we");
we.innerHTML=""+(en*en2);
}
</script>
</body>
</html>
练习八:当点击计算最大值时,将输入三个数中的最大值显示在最大值输入框
实现图:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework</title>
</head>
<body>
<h3 align="center">当点击计算最大值时,将输入三个数中的最大值显示在最大值输入框</h3>
<table align="center">
<tr>
<td></td>
</tr>
<tr>
<td>数值1:<input type="text" name="book" class="a"></td>
</tr>
<tr>
<td>数值2:<input type="text" name="reader" class="a"></td>
</tr>
<tr>
<td>数值3:<input type="text" name="mun" class="a"></td>
</tr>
<tr>
<td>最大值:<input type="text" name="cun" id="spn"></td>
</tr>
<tr>
<td><input type="button" value="计算最大值" onclick="f()"></td>
</tr>
</table>
<script>
//1 获取指定节点 2 将指定节点的数值转换为number类型 3通过循环来比较数值的大小
var max=0;
function f() {
var classAll = document.getElementsByClassName("a");
for (var i = 0; i < classAll.length; i++) {
if(Number(classAll[i].value)>max){
max= parseInt(classAll[i].value);
}
}
var spn = document.getElementById("spn");
spn.value = max;
}
</script>
</body>
</html>