javascript

最新推荐文章于 2024-07-04 10:35:47 发布

左五先生

最新推荐文章于 2024-07-04 10:35:47 发布

阅读量213

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zuo_h_dr/article/details/85342252

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2.1 javascript 的介绍
Java 与 javascript 有什么区别？
它们没有关系，雷锋和雷峰塔的关系。
2.2 javascript 的作用？
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)
Javascript：它能够让整个页面具有动态效果。
2.3 javascript 的组成部分
ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数
据类型、语句、函数等等)
DOM：文档对象模型，包含(整个 html 页面的内容)、
BOM：浏览器对象模型,包含(整个浏览器相关内容)
2.4 javascript 语法
区分大小写
变量是弱类型的(String str=”aaa” ,var str=”123”;)
每行结尾的分号可有可无(建议大家写上)
注释与 java、php 等语言相同。
2.5javascript 的变量
变量可以不用声明，变量是弱类型。统一使用 var 来定义！定义变量的时候不要使用关键字
和保留字。
2.6 javascript 数据类型
Javascript 数据类型分为原始数据类型和引用数据类型
原始数据类型：
string、number、boolean、null、undefined
引用数据类型：
2.7 javascript 运算符
其它运算符与 java 大体一致，需要注意其等性运算符。
== 它在做比较的时候会进行自动转换。
=== 它在做比较的时候不会进行自动转换。
2.8 javascript 语句
所有语句与 java 大体一致。
2.9 获取元素内容
获取元素
document.getElementById(“id 名称”);
获取元素里面的值
document.getElementById(“id 名称”).value;
批注 [ThinkPad1]: 如果 id 是一个字符串，那么必须
加上引号，如果是一个变量那么不需要。
2.10 javascript 事件
表单提交事件：onsubmit
2.11 javascripte 的输出
警告框：alert();
向页面指定位置写入内容：innerHTML(属性)
向页面写入内容：document.write(“”);
3.步骤分析
第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(让表单提交)
第五步：数据非法(给出错误提示信息，不让表单提交)
问题：如何控制表单提交？
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个
返回值。 onsubmit = return checkForm()
4.代码实现
JS 代码：
<script>
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空!");
return false;
}
/*校验密码*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空!");
return false;
}
/**校验确认密码*/
var rpValue =
document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致!");
return false;
}
/*校验邮箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-
9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
</script>
Html 部分：
<form action="#" method="get" name="regForm"
οnsubmit="return checkForm()">
需要在指定位置添加 id
二、使用 JS 完成首页轮播图效果案例
1.需求分析
我们希望在首页完成对轮播图的效果实现：
2.技术分析
获取元素 document.getElementById(“id 名称”)
事件(onload)
定时操作：setInterval(“changeImg()”,3000);
3.步骤分析
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)
4.代码实现
JS 代码：
<script>
function init(){
批注 [ThinkPad2]: 在循环的时候需要注意到了最后一
张图片的时候要重置。
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/small0"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
Html：
<body οnlοad="init()">
在指定位置定义 id。
三、使用 JS 完成页面定时弹出广告
1.需求分析
我们希望在首页中的顶部做一个定时弹出广告图片。其实现效果如下：
2.技术分析
获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000);
3.步骤分析
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()
4.代码实现
<script>
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
//1.设置显示广告图片的定时操作
time = setInterval("showAd()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle = document.getElementById("img2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display = "block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display= "none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>
Html 代码：
<body οnlοad="init()">

<img src="../img/f001a62f-a49d-4a4d-b56f-
2b6908a0002c_g.jpg" width="100%" style="display: none"
id="img2"/>
5.总结
5.1 javascript 的引入方式
 内部引入方式
直接将 javascript 代码写到<script type=”text/javascript”></script>
 外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script
标签的 src 属性引入该外部的 js 文件
5.2 BOM 对象
BOM 对象：浏览器对象模型(操作与浏览器相关的内容)
 Window 对象
Window 对象表示浏览器中打开的窗口。
专业 java、php、iOS、C++、网页设计、平面设计、网络营销、游戏开发、前端与移动开发培训机构
传智播客致力打造专业的 IT 高级培训课程——务实、创新、质量、专注、分享、责任
setInterval():它有一个返回值，主要是提供给 clearInterval 使用。
setTimeout():它有一个返回值，主要是提供给 clearTimeout 使用。
clearInterval():该方法只能清除由 setInterval 设置的定时操作
clearTimeout():该方法只能清除由 setTimeout 设置的定时操作
弹出框的几个方法：
<script>
//警告框
//alert("aaa");
//确认按钮
//confirm("您确认删除吗？");
//提示输入框
prompt("请输入价格：");
</script>
</head>
 Location 对象
Location 对象包含有关当前 URL 的信息。
href:该属性可以完成通过 JS 代码控制页面的跳转。
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script>
function tiao(){
window.location.href="http://www.itcast.cn";
}
</script>
</head>
<body>
<a href="#" οnclick="tiao()">跳转到传智播客首页</a>
</body>
</html>