[ JavaScript ] 前端网页的动态效果
·
目录
1. JavaScript 历史
javascipt(原名livescript),最早是由美国网景公司开发的. 用于在网页中,为网页添加动态功能, 后来sun公司与网景公司合作,改名为javascipt.
java是一种运行在服务器端的,是后端程序,java要编译才能执行
javascipt是运行在网页中的前端语言,不需要编译,直接由浏览器解释执行
2. javaScript 概述
javaScript是一种直译式脚本语言, 即不需要编译(sql,html,css,js,python),直接由某种解释器(引擎)解释执行.可以为网页添加各种各样的动态效果,可以直接对网页中的标签属性值,css样式值进行修改.
如何理解html css JavaScript的关系?
html是网页的骨架
css是皮肤
javascript是动作,可以动态改变页面功能
特点:
(1) 虽然是面向对象语言, 凡是初级使用仍然是面向过程的用法, 会提供对象.
(2) JavaScript是一弱类型语言, 而c 和 java都是强类型语言
3. 基本语法
javaScript脚本写在一组<script>标签中，此标签可以放在 head 或 body 中，一般习惯放在
head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 1. 导入外部的js脚本文件 -->
<script src="js/index.js"></script>
<!-- 2. 写在head中的JavaScript -->
<script>
/* 这是js中的一个对话框函数*/
alert("你好 js");
//js python属于弱类型语言，声明变量时不需要明确类型，赋什么类型的值，变量就是什么类型的
/* 声明变量 使用关键字let 关键字，也可以使用var关键字 */
let a=10;
let b="abc";
var c=3.14;
alert(typeof(b));
b=20;
alert(typeof(b));
alert(c);
//数据类型
//运算符
//流程控制语句
</script>
</head>
<body>
<!-- 3. 写在body中的JavaScript -->
<script>
</script>
</body>
</html>
(2) 对话框 :
alert(‘welcome!’); 提示对话框
(3) 声明变量 :
例如 let name;
(4) 声明变量并赋值 :
let test=“THIS IS A BOOK”
(5) 数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 注意: 虽然变量申明不区分类型,但是值是区分类型的 */
/*1、 数值类型 ： 整数 浮点*/
let a=10;
let b =10.5;
alert(typeof(a));
console.log(a,b);/* 输出信息到浏览器的控制台 */
/* 2、布尔类型（Boolean）： 值 true和false */
let c = true;
let d = 1==1;
console.log(typeof(c),d);
/* 3、字符串 单引号和双引号 都可以表示字符串 */
let s1 = "abc";
let s2= 'abcd';
console.log(typeof(s1),typeof(s2));
/* 4、undefined 不明确类型， 声明了但是没有初始化赋值 */
let e;
if(e==undefined||e==0){
console.log(e==undefined);
}
/* 5、对象类型 */
let date = new Date();
console.log(typeof(date));
console.log(date.getFullYear(),date.getMonth(),date.getDate());
console.log(date.toLocaleString());
</script>
</head>
<body>
</body>
</html>(6) 运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 运算符 */
/* 1、算数运算符 */
let a=10;
let b=5;
let c="10";
let d= "a";
console.log(a+c);//1010
console.log(a-c);//0 数值- 字符串 会对纯数字的字符串进行隐式类型转换
console.log(a-d);//NaN 数值- 抱哈 非数字的字符串
console.log(a+parseInt(c));//20
console.log(a+c*1);//20
/*比较运算符 */
let x=5;
let y="5";
console.log(x==y);// true 比较值
console.log(x===y);// false 全等 : 比较值和类型
/*条件运算符 */
/*let result = (条件表达式)?结果1:结果2 */
/*控制语句 */
</script>
</head>
<body>
</body>
</html>4. 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 函数 */
/* 无参函数 */
function test(){
console.log("test()");
}
/* 有参函数 */
function test(a,b,c){
console.log(a,b,c);
}
test(10,true,"abc");//函数调用
function add(a,b){
return a+b;
}
let res=add(10,5);
console.log(res);*
/* 全局函数 */
//alert(); 对话框函数
//typeof(变量); 返回变量的数据类型
//alert(parseInt("10.5"));
//alert(parseFloat("10.5"));
//console.log(); 调用对象中的函数
/* let a = 10;
let res = eval("5+3*a");//可以把字符串内容单程js脚本代码执行
alert(res); */
</script>
</head>
<body>
</body>
</html>5. 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
let i=0;
function test(){
console.log("函数执行了"+(i++));
}
</script>
</head>
<body onload="test()"><!-- onload="test()" 等内容加载完成后才执行 -->
<!-- 事件时属于标签中的内容, 不同的标签用有不同的事件,
通过时间看图触发js中的函数来完成某个具体的操作-->
<!-- 注意: 伪类仅控制样式变化 不会触发函数
事件控制点击弹提示 会触发-->
<input type="button" value="按钮" onclick="test()" />
<div onclick="test()" style="background-color: beige;">点击1</div>
<input type="button" value="按钮" ondblclick="test()" /><!-- 双击事件 -->
<!-- 只适用于输入框类型 -->
<hr />
<input type="text" onblur="test()"/> <!-- 失焦事件 -->
<hr />
<input type="text" onfocus="test()" /><!-- 聚焦事件 -->
<div onmouseover="test()" style="background-color: beige;">点击2</div>
<hr /><!-- 鼠标悬浮事件，当鼠标 移动到标签上时 会触发 -->
<div onmouseout="test()" style="background-color: beige;">点击3</div>
<hr /><!-- 鼠标悬浮事件，当鼠标 从标签 离开时 会触发 -->
<input type="text" onchange="test()" style="background-color: beige;" />
<!-- 针对输入框 当失去焦点 且 内容与上次相比发生改变才会触发 -->
</body>
</html>6. 内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 字符串对象 */
/* let str = "ab:cde:f";
console.log(str.length);
console.log(str.indexOf("c"));//查找c出现的位置
console.log(str.charAt(3));//返回3对应的字符
console.log(str.substring(0,3));//截取 substring(开始位置,结束位置)从0开始到3结束 包含开始,不包含结束
console.log(str.substr(1,3));// 截取 substr(开始位置,截取的长度)
let arr=str.split(":");
console.log(arr); */
/* 数组对象 */
/* let arr = new Array();
arr[0]=1;
arr[1]=true;
arr[2]="abc";
console.log(arr);*/
/* let arr = new Array(1,2,3,true,"abc");
arr[5]=6;
arr[6]=7;
console.log(arr); */
/* let arr= [1,2,3,true,"abc"];
console.log(arr.length);
//let str=arr.join(",");//将数组转为字符串
arr.reverse();//数组逆序
console.log(arr); */
/* let arr= ["c","a","b","d"];
let arr=[12,2,5,4];
arr.sort(numbersort);//将自定义排序的函数传递到 sort（）方法中
//数组自定义排序规则 实现对数值类型的进行排序
function numbersort(a,b){
return a-b;//小于0 等于0 大于0
}
console.log(arr); */
let date = new Date();
console.log((date.getFullYear())+"年"+(date.getMonth()+1)+"月"+(date.getDate())+"日"
+(date.getHours())+"时"+(date.getMinutes())+"分"+(date.getSeconds())+"秒")
console.log(date.toLocaleString());
</script>
</head>
<body>
</body>
</html>7. HTML-dom
1. 定义:
DOM (document Object model) 文档对象模型（指的是网页中的标签）
javascript 在对网页进行操作时, 认为网页中的每一个标签是一个独一无二的对象. 所以当我们需要使用javascript 对每个标签进行操作时，就需要先在JavaScript中获得此标签, 然后就可以对标签的属性，css映射，标签体中的内容进行操作 总结: 要操作标签，先得到标签
如何得到？ 通过 getElementById("")；函数 “得到元素的id”
如何操作？ 通过调用
document 对象，表示当前html文档，当网页内容加载完成后，自动生成
2. HTML DOM - 改变 HTML
Html dom允许javaScript 改变html标签的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//操作函数
function oper(){
//1、根据标签的id值获得 标签对象
let tobj1 = document.getElementById("t1");
let tobj2 = document.getElementById("t2");
//2 、标签对象中的属性进行操作
console.log(tobj1.value);
tobj2.value=tobj1.value;
tobj1.value = " ";//传递后将标签覆盖
/* tobj1.type="button";//可以改变标签的类型 */
}
/* 改变body背景颜色 */
function changeBgColor(color){
let bodyobj =document.getElementById("bodyid");
bodyobj.bgColor=color;
}
/* 一个按钮可以控制三个颜色 */
function changecolor(){
//获得对应的标签
let bodyobj= document.getElementById("bodyid");
let btnobj = document.getElementById("btnid");
if(btnobj.value=='红色'){
bodyobj.bgColor="red";
btnobj.value="蓝色";
return;
}
if(btnobj.value=='蓝色'){
bodyobj.bgColor="blue";
btnobj.value="绿色";
return;
}
if(btnobj.value=='绿色'){
bodyobj.bgColor="green";
btnobj.value="红色";
return;
}
}
</script>
</head>
<body id="bodyid">
<input type="text" id="t1" value="">
<input type="text" id="t2" value="">
<input type="button" value="操作" onclick="oper()" />
<hr />
<input type="button" value="红色" onclick="changeBgColor('red')"/>
<input type="button" value="蓝色" onclick="changeBgColor('blue')"/>
<input type="button" value="绿色" onclick="changeBgColor('green')"/>
<hr />
<input type="button" id="btnid" value="红色" onclick="changecolor()"/>
</body>
</html>3. HTML DOM 改变 CSS
html dom 允许 javaScript 改变html标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//操作标签
function oper(){
let divobj1= document.getElementById("box1");
let divobj2= document.getElementById("box2");
divobj2.innerHTML =divobj1.innerHTML;//将div1标签体中的内容 赋给div2 不能使用.value
}
function oper2(){
let divobj3= document.getElementById("box3");
divobj3.style.backgroundColor="red";
divobj3.style.width="200px";
divobj3.style.height="200px"
}
function oper3(){
let divobj3= document.getElementById("box3");
divobj3.style.borderRadius="100px";
}
</script>
</head>
<body ><!-- div 标签体 -->
<p id="box1">
<b>第一个div</b>
</p>
<p id="box2">
</p>
<input type="button" value="操作1" onclick="oper()" />
<div id="box3">
</div>
<input type="button" value="操作2" onclick="oper2()" />
<br />
<input type="button" value="操作3" onclick="oper3()" />
</body>
</html>8. 计时
设置时间执行指定代码 而不是再函数被调用之后执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
/* alert(); */
console.log("test函数执行了");
}
//let n =setTimeout("test()",3000);//开启一个定时器，让定时器在延迟指定时间后的调用函数,只执行一次
let n =setInterval("test()",2000);//开启了一个定时器，每间隔一段时间就执行一次
function closetime(){
//clearTimeout(n);//关闭指定的定时器
clearInterval(n);
}
</script>
</head>
<body>
<input type="button" value="关闭定时器" onclick="closetime()" />
</body>
</html>
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
20
0- 0
已为社区贡献13条内容
所有评论(0)