Day03-jS
程序员文章站
2022-07-11 19:16:31
javaScript概述 什么是javaScript：javaScript是一种直译式脚本语言。直接解释执行的语言。 什么是脚本语言？ . java源代码 >编译成.class文件 >java虚拟机中才能执行 . 脚本语言：源码 >解释执行 . js由我们的浏览器解释执行 HTML：决定了页面的框架 ......
javascript概述
什么是javascript：javascript是一种直译式脚本语言。直接解释执行的语言。 什么是脚本语言？ . java源代码--->编译成.class文件 --->java虚拟机中才能执行 . 脚本语言：源码 ---->解释执行 . js由我们的浏览器解释执行
html：决定了页面的框架
css：用来美化我们的页面
js:提供用户的交互，是灵魂
js的组成:
ecmascript : 核心部分 ,定义js的语法规范
dom: document object model 文档对象模型 , 主要是用来管理页面的
bom : browser object model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
js的语法
变量弱类型:var i = true
区分大小写 ， 语句结束之后的分号 可以有，也可以没有
要求写在script标签内
js的数据类型
-
基本数据类型
- string
- number
- boolean
- undefine
- null
-
引用数据类型
- 对象， 内置对象
-
类型转换
- js内部自动转换
js的运算符和语句
-
运算符和java一样
-
"===" 全等号: 值和类型都必须相等
-
== 值相等就可以了
-
语句和java大致一样
-
js中无逻辑单与和逻辑单或，函数不支持重载
-
null 属于object类型。
-
nan 不是一个数字，但是属于number类型。
var aa ="哈喽";
alert(typeof(aa)); //这样赋值的就是string类型
var v = new string();//直接new出来的就是object类型
alert(typeof(v));
-
- 案例：求偶数和
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// document.write("哈喽");
var num =0;
for (var a =0;a<=100;a++) {
if (a%2==0) {
num+= a;
}
}
alert(num);
document.write(num)
</script>
</head>
<body>
</body>
</html>
js的输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log()向控制台输出
- innerhtml:向页面输出，可以改变内容
js声明变量和函数
var 变量的名称 = 变量的值
var 函数的名称 = function(){
• }
• function 函数的名称(){
• }
js的开发步骤
1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作，弹框。修改页面，动态添加一些东西
选择器：
元素选择器: 元素的名称{}
• 类选择器: . 加类名{}
• id选择器: #id选择器{}
• 后代选择器: 选择器1 选择器2
• 子元素选择器: 选择器1 > 选择器2
• 选择器分组: 选择器1,选择器2,选择器3{}
• 属性选择器: 选择器[属性的名称='属性的值']
• 伪类选择器:选择器分组: 选择器1,选择器2,选择器3{}
属性选择器: 选择器[属性的名称='属性的值']
伪类选择器:
浮动:
-
适应于div块 左右排版
float 属性: left right
清除浮动:
clear 属性: both left right
盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向
内边距: 控制的盒子内距离
边框: 盒子的边框
外边距: 控制盒子与盒子之间的距离
绝对定位: position : absolute; top: left
定时器
- setinterval("test()",3000) 每隔多少毫秒执行一次函数 循环函数
- settimeout("test()",3000) 多少毫秒之后执行一次函数 一次性函数
- timerid 上面定时器调用之后
- clearinterval() 清除循环函数定时器
- cleartimeout() 清除一次性定时器 。一般不用
切换图片
img.src = "图片路径"
事件：文档加载完成的事件 onload事件
显示广告 ，隐藏广告 :调用display的功能。
var img =document.getelementbyid("id");
img.style.display = "block";
img.style.display = "none"
引入外部js文件
<script src="js文件的路径" type="text/javascript"/>
//需要注意的是：当从外部引入后 script中再写js代码就不会生效。
内部引入 ：
直接在文件中任何位置：<script>在这里写js</script>
表单中常用的事件：
onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick: 单击事件
ondblclick: 双击事件
表格隔行换色,鼠标移入和移除要变色:
onmouseenter: 鼠标移入
onmouseout: 鼠标移出
onload: 文档加载完成事件
onsubmit: 提交
onchange: 下拉列表内容改变
checkbox.checked 选中状态
dom的文档操作:
添加节点: appendchild
创建节点: document.createelement
创建文本节点: document.createtextnode()
点击事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 可以传参数
function fun1 (x) {
alert("我被单击了！！"+x);
}
function fun2 () {
alert("我被单机了！！哈哈哈");
}
function fun3 () {
alert("我被双击了！！哈哈哈");
}
</script>
</head>
<body>
<input type="button" value="点击" name="按钮" onclick="fun1(100),fun2()" />
<input type="button" value="双击" ondblclick="fun3()" />
</body>
</html>
#案例一 ，校验#
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/01.css" />
<script>
/*
1.确定事件：表单提交事件 onsubmit事件
2.事件所要触发的函数: checkform
3. 函数中要执行一些程序
1. 函数中再创建一个方法统一判断用户名，密码，确认密码 是否为空，直接 调用这个函数。
*/
function checkform(){
//校验用户名是否为空
var v1 = checkformisnull("username","用户名");
//校验密码是否为空
var v2 =checkformisnull("pwd","密码");
//校验确认密码是否为空
var v3 =checkformisnull("repwd","确认密码");
if(v2 && v3 ){
//获取密码的值
var pas = document.getelementbyid("pwd").value;
//获取确认密码的值
var repas = document.getelementbyid("repwd").value;
//判断是否一致
if(pas != repas){
alert("两次密码输入不一致！！");
return false;
}
}
var v4 = document.getelementbyid("email").value;
if(/^([a-za-z]|[0-9])(\w|\-)+@[a-za-z0-9]+\.([a-za-z]{2,4})$/.test(v4)){
alert("邮箱验证通过");
}else{
alert("邮箱验证错误");
return false;
}
//要验证的四个有一个不对就错 。
return v1 && v2 && v3 && v4;
}
function checkformisnull(id,msg){
//验证用户名,密码，确认密码 是否为空
var ele =document.getelementbyid(id);
var val = ele.value;
if(val == ""){ //此处不能写null 。
alert(msg+"不能为空！！！");
return false;
}
return true;
}
</script>
</head>
<body>
<div id="divformid">
<form onsubmit="return checkform()" action="#" method="get">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> user register
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
</tr>
<tr>
<td align="right">email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="/day03/img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
#案例二，隐藏广告 #
<!doctype html>
<html>
<head>
<!--页面刚加载完成后，先隐藏图片属性，两秒后显示，过两秒后再消失。-->
<meta charset="utf-8">
<title></title>
<style>
.hmig{
display: none;
}
.sowimg{
display: block;
}
</style>
<script>
function showimg(){
//1.选中广告的这个图片
var obj = document.getelementbyid("pac");
//2.修改class的值。切换为块，显示状态
obj.classname="sowimg";
//2秒后隐藏起来
settimeout("hiddimg()",2000);
}
function hiddimg(){
var obj = document.getelementbyid("pac");
//2.修改class的值，使其切换成none值
obj.classname="hmig";
}
</script>
</head>
<body onload="settimeout('showimg()',2000)">
//选择一张图片作为广告。
<img src="../img/3.jpg" id="pac" class="hmig" width="100%"/>
</body>
</html>
#案例三，轮播图#
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var count =1;
function changeimg (){
//获取img元素
var img =document.getelementbyid("lbt");
//修改src的属性
img.src ="/day03/img/"+(++count)+ ".jpg";
//当count = 3时 归零
if(count ==3){
count =0;
}
}
</script>
</head>
<body onload="setinterval('changeimg()',2000)">
<img id="lbt" src="../../img/1.jpg" width="100%"/>
</body>
</html>
推荐阅读