网页开发和设计之JavaScript
JavaScript学习
- JavaScript基础知识
- 1 JS声明和引入
- 2 JS变量
- 3 JS运算符
- 4 JS逻辑结构
- 5 JS数组
- 6 JS函数
- 7 自定义类
- 8 常用方法和对象
- 9 事件机制
- 10 Window对象
- 11 Document对象
- 12 项目案例
- 12.1 计算器
- 12.2 JS校验登陆
- 12.3 模拟淘宝
- 13 总结
JavaScript基础知识
1 JS声明和引入
Javascript有两种使用方式：
- 在head标签中使用script标签进行声明,声明代码域，只会作用于当前页面
- 在head标签中使用script标签引入外部声明好的js文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的声明和引入title>
<script>
alert("这是我的第一个js！")
script>
<script src="../js/test.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<h1>JS的声明和引入h1>
<hr>
body>
html>
2 JS变量
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS变量学习title>
<script>
var a = 4;
var A = 5;
var b = "qw";
var c = 'f';
var d = 19.9;
var e = true;
var sc = new Date();
var b = 3;
var y = null;
alert(typeof y)
script>
head>
<body>
<h1>JS变量学习h1>
<hr>
body>
html>
3 JS运算符
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS运算符title>
<script>
//算数运算符
var a = 123;
var b = 2;
alert(a + b);
//逻辑运算符
var a = true;
alert(!a);
//等值和等同运算符
alert(a==b);
alert(a===b);
script>
head>
<body>
body>
html>
4 JS逻辑结构
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑结构title>
<script>
var a = 123;
var b = 45;
//if结构
if (a > 10){
alert(a+b);
}
var a = 1;
//switch结构
switch (a) {
case 1:
alert("aaaa");
break;
case 2:
alert("11111");
break;
default:
alert("not know");
}
//循环结构
for (var i = 0; i < 3; i++){
alert("好热啊！")
}
for (var i = 1; i <= 9; i++){
for (var j = 1; j <= i; j++){
document.write(i + "*" + j+ "=" + i*j + " ");
}
document.write("
")
}
script>
head>
<body>
body>
html>
5 JS数组
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS数组title>
<script>
数组声明
var arr1 = new Array();
arr1[0] = "abc";
alert(arr1);
var arr2 = new Array(5);
alert(arr2.length);
var arr3 = [1,2,5,6,9];
alert(arr3);
//数组的赋值和取值
var arr = [];
arr[0] = 'a';
arr[1] = 12;
arr[2] = true;
arr[3] = new Date();
alert(arr);
length
alert(arr.length);
//遍历数组
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
for (var i in arr){
alert(arr[i]);
}
//数组的操作
var arr = [1.4,234,23];
var arr1 = ["egfsfgv"];
//数组的合并
var arr2 = arr.concat(arr1);
alert(arr2.length);
//数组指定间隔符转换字符串
var q = arr2.join(",")
alert(typeof q)
//数组移除最后一个并返回
var a = arr2.pop();
alert(a)
//数组的追加
var d = arr2.push("hskajfdh");
alert(d);
//数组删除指定位置元素
var as = arr2.splice(1,3);
alert(as);
alert(arr2);
script>
head>
<body>
body>
html>
6 JS函数
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function函数title>
<script>
//声明函数
function test1(a1) {
alert(a1);
}
var test2 = new Function("a","b","alert(a+b)");
var test3=function(a2,a4){
alert(a2-a4);
return "JS";
}
//调用函数
test2(23,34);
alert(test2);
//函数返回值
alert(test3(2,4));
//函数作为实参传递
function a(c) {
alert(c())
}
var test=function () {
alert("JS")
}
a(test)
script>
head>
<body>
<h1>JS函数的学习h1>
body>
html>
7 自定义类
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义类title>
<script>
//类的声明
function Person(name,age) {
//声明其他对象，实现继承
//Person.prototype=new User();
this.name=name;
this.age=age;
}
function User(name,pwd){
this.name=name;
this.pwd=pwd;
}
//使用prototype，相当于Java的静态方法
Person.prototype.test1=function () {
alert("heihei")
}
//变相的实现了一种特殊的继承
Person.prototype.user=new User();
User.prototype.testU=function () {
alert("User");
}
//类的使用
var p = new Person("Linyuqi",23);
alert(p.name)
//追加的属性
p.address = "xian";
alert(p.address);
//实现链式的访问
p.user.testU();
/* //自定义对象
//方式一：
var sc = new Food();
sc.name="沙拉";
sc.number=20;
方式二：
var az = {};
sc.name="沙拉";
sc.number=20;*/
script>
head>
<body>
body>
html>
8 常用方法和对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用方法和对象的学习title>
<script>
//string
function testString() {
var str="sadfdsag";
//全部大小写
alert(str.toUpperCase()+" : "+str.toLowerCase());
//字符串截取
str.substring(0,str.length);
str.substr(0,3);
}
//date
function testDate() {
var d = new Date();
//获取当前年份
alert(d.getFullYear());
//月份
alert(d.getMonth());//注意要加1
//日期
alert(d.getDate());
//星期
alert(d.getDay());//星期日是0
//小时
alert(d.getHours());
//分钟
alert(d.getMinutes());
//秒
alert(d.getSeconds());
}
//math
function testMath() {
//随机数字
alert(Math.floor(Math.random()*9000+1000));
}
//global
function testGlobal() {
//eval方法 将字符串转换为js代码
eval("var a=123;")
alert(a);
//isNaN
if (!isNaN(a)){
alert("数字");
}else {
alert("非数字");
}
}
script>
head>
<body>
<h3>js常用方法和对象h3>
<input type="button" id="" value="string" onclick="testString()">
<input type="button" id="" value="date" onclick="testDate()" >
<input type="button" id="" value="math" onclick="testMath()" >
<input type="button" id="" value="global" onclick="testGlobal()" >
body>
html>
9 事件机制
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件机制title>
<script>
//单击
function testOnclick() {
alert("单击");
}
//双击
function testOndbclick() {
alert("双击")
}
//鼠标事件
function testOnmouseover() {
alert("鼠标悬停")
}
function testOnmousemove() {
alert("鼠标移动")
}
function testOnmouseout() {
alert("鼠标移出")
}
//键盘事件
function testOnkeyup() {
alert("键盘弹起");
}
function testOnkeydown() {
alert("键盘下压");
}
//焦点事件
function testOnfocus() {
document.getElementById("showdiv").innerHTML="HEHE";
}
function testOnblur() {
alert(" 失去焦点");
}
//页面加载
function testOnload() {
alert("页面加载");
}
testOnload();
script>
<style>
#showdiv{
width: 120px;
height: 50px;
border: solid 1px red;
background-color: aqua;
}
style>
head>
<body>
<input type="button" value="单击" onclick="testOnclick()">
<input type="button" value="双击" ondblclick="testOndbclick()">
<div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()"
onmouseout="testOnmouseout()">
div>
键盘弹起<input type="text" onkeyup="testOnkeyup()">
键盘下压<input type="text" onkeydown="testOnkeydown()">
获取焦点 <input type="text" onfocus="testOnfocus()">
失去焦点 <input type="text" onblur="testOnblur()">
body>
html>
10 Window对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象的学习title>
<script>
//框体方法
//警告框
function testAlert() {
window.alert("我是警告框！");
}
//确认框
function testConfirm() {
window.confirm("你确定要删除吗");
}
//提示框
function testPrompt() {
window.prompt("请输入昵称：");
}
var idi;
var ids;
//定时
function testsetTimeOut() {
idi= window.setTimeout(function () {
window.alert("定时执行");
},2000);
}
//间隔
function testsetInterval() {
ids= window.setInterval(function () {
window.alert("jiange执行");
},3000);
}
//停止定时的方法
function clearTimeOut() {
window.clearTimeout(idi);
}
//停止间隔的方法
function clearInterval() {
window.clearInterval(ids);
}
//子页面方法
function testOpen() {
window.open('test.html','newwindow','height=0px width=0px top=0px left=0px toolbar=no menubar=no scrollbars=no resizable=no location=no status=no');
}
//地址栏属性的学习：Location
//跳转
function testLocation() {
window.location.href="www.baidu.com";
}
//刷新
function testLocation2() {
window.location.reload();
}
//历史记录属性：history
//前进
function testHistory() {
window.history.forward();
}
script>
head>
<body>
<h3>window对象的学习h3>
<hr>
<input type="button" value="警告框" onclick="testAlert()">
<input type="button" value="确认框" onclick="testConfirm()">
<input type="button" value="提示框" onclick="testPrompt()">
<input type="button" value="timeout" onclick="testsetTimeOut()">
<input type="button" value="interval" onclick="testsetInterval()">
<input type="button" value="cleartimeout" onclick="clearTimeOut()">
<input type="button" value="clearinterval" onclick="clearInterval()">
<input type="button" value="子页面" onclick="testOpen()">
body>
html>
11 Document对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document对象title>
<script>
//获取元素对象
function getId() {
var inp = window.document.getElementById("uname");
alert(inp);
}
function getName() {
var iup = window.document.getElementsByName("fav");
alert(iup.length);
}
function getTagName() {
var tag = window.document.getElementsByTagName("input");
alert(tag.length);
}
function getClassName() {
var class1 = window.document.getElementsByClassName("con");
alert(class1.length);
}
//间接获取
//父子关系
function testParent() {
//获取父级元素
var showdiv = window.document.getElementById("showdiv");
//获取子元素
var childs = showdiv.childNodes;
alert(childs.length );
}
function testChild() {
//获取子元素
var inp = window.document.getElementById("ce");
//获取父元素
var parent = inp.parentNode;
alert(parent);
}
function getBrother() {
//获取目标id
var inup = window.document.getElementById("hc");
//弟获取兄
var preEle=inup.previousSibling;
//兄获取弟
var nextEle=inup.nextSibling;
alert(preEle+":"+nextEle);
}
//操作元素固有属性
function testFile() {
//获取元素
var inp=window.document.getElementById("name");
//获取元素属性
alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
}
//修改元素固有的属性值
function changeFile() {
//获取元素
var inp=window.document.getElementById("name");
//修改元素
inp.value="haha";
inp.type="button";
}
function f() {
var inp=window.document.getElementById("name");
inp.getAttribute("type","button");
}
//获取元素内容
function getContext() {
//获取元素
var div=window.document.getElementById("sa");
//获取元素内容
alert(div.innerHTML);
alert(div.innerText);
}
//修改元素内容
function getContext2() {
//获取元素
var div=window.document.getElementById("sa");
//修改元素内容
div.innerHTML="气温很高！
";
}
//操作样式
function getContext5() {
var div = window.document.getElementById("sa");
//style
//添加样式
div.style.fontSize="3px";
//修改样式
div.style.backgroundColor="red";
//删除样式
div.style.border="";
//class
var dic = window.document.getElementById("cc");
dic.className="";
}
//innerHTML操作文档结构
function add() {
var ds = window.document.getElementById("ss");
ds.innerHTML=ds.innerHTML+""
}
function del(btn) {
//获取对象
var ds = window.document.getElementById("ss");
//获取要删除的子div
var cdiv= btn.parentNode;
//父div删除子div
ss.removeChild(cdiv);
}
//document操作
function add1() {
//获取元素
var we=window.document.getElementById("we");
//创建input对象
var is = document.createElement("input");
is.type="file";
//创建按钮元素对象
var bn = document.createElement("input");
bn.type="button";
bn.value="删除";
bn.onclick=function () {
we.removeChild(is);
we.removeChild(bn);
we.removeChild(br);
}
//创建换行符
var br=document.createElement("br");
//将创建的元素放进div中
we.appendChild(is);
we.appendChild(bn);
we.appendChild(br);
}
//操作form元素
function f1() {
var farm=document.getElementById("f");
var form=document.t;
alert(farm===form);
}
script>
<style>
.con{
}
#showdiv{
}
#sa{
width: 100px;
height: 60px;
background-color: aqua;
border: solid 3px blue;
}
style>
head>
<body>
<h3>Document对象的学习h3>
<hr>
<h4>直接获取：h4>
<div>
<input type="button" value="测试ID" onclick="getId()">
<input type="button" value="测试name" onclick="getName()">
<input type="button" value="测试TagName" onclick="getTagName()">
<input type="button" value="测试ClassName" onclick="getClassName()">
div>
<input type="text" name="uname" id="uname" value="" >
<input type="checkbox" name="fav" id="" class="con"> 吃饭
<input type="checkbox" name="fav" id="" class="con"> 睡觉
<input type="checkbox" name="fav" id="" class="con"> 打游戏
<h4>间接获取：h4>
<input type="button" value="测试父子关系" onclick="testParent()">
<div id="showdiv">
<input type="text" id="ce">
<input type="text" id="hc">
<input type="text" id="as">
<input type="text">
div>
<h3>Documnet操作元素属性h3>
<input type="button" value="元素属性" onclick="testFile()">
<input type="button" value="xiugai元素属性" onclick="changeFile()">
用户名：<input type="text" name="name" id="name" >
<h3>获取元素内容h3>
<input type="button" value="测试获取元素内容" onclick="getContext()">
<input type="button" value="测试修改元素内容" onclick="getContext2()">
<input type="button" value="测试修改元素样式" onclick="getContext5()">
<div id="sa" class="cc">
<p>今天天气不错p>
div>
<h3>操作文档结构h3>
<input type="button" value="继续上传" onclick="add()">
<hr>
<div id="ss">
div>
<hr>
<input type="button" value="继续上传" onclick="add1()">
<hr>
<div id="we">
div>
<h3>操作form元素h3>
<input type="button" value="form" onclick="f1()">
<form action="" id="f" name="t">
用户名：<input type="text" name="iname" id="iname" >
密码：<input type="password" name="pwd" id="pwd">
<input type="submit" value="提交">
form>
body>
html>
12 项目案例
12.1 计算器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS计算器title>
<style>
/*计算器外框*/
#showdiv{
border: solid 1px;
border-radius: 10px;
width: 320px;
height: 380px;
text-align: center;
margin: auto;
background-color: aqua;
}
/*输入框*/
input[type=text]{
margin-top: 20px;
width: 290px;
height: 40px;
font-size: 30px;
}
/*按钮设置*/
input[type=button]{
width: 60px;
height: 50px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight: bolder;
background-color: orange;
font-family: "微软雅黑";
}
style>
<script>
//声明函数
function test(btn) {
//获取button按钮对象
var num = btn.value;
//根据用户点击执行相应的动作
switch (num) {
case "=":
//eval内置函数
document.getElementById("inp").value=eval(document.getElementById("inp").value);
break;
case "C":
document.getElementById("inp").value="";
break;
default:
//将按钮的值传给input输入框
document.getElementById("inp").value = document.getElementById("inp").value + num;
}
}
script>
head>
<body>
<h1>计算器h1>
<hr>
<div id="showdiv">
<input type="text" id="inp"><br>
<input type="button" value="1" id="btn" onclick="test(this)">
<input type="button" value="2" onclick="test(this)">
<input type="button" value="3" onclick="test(this)">
<input type="button" value="+" onclick="test(this)"><br>
<input type="button" value="4" onclick="test(this)">
<input type="button" value="5" onclick="test(this)">
<input type="button" value="6" onclick="test(this)">
<input type="button" value="-" onclick="test(this)"><br>
<input type="button" value="7" onclick="test(this)">
<input type="button" value="8" onclick="test(this)">
<input type="button" value="9" onclick="test(this)">
<input type="button" value="*" onclick="test(this)"><br>
<input type="button" value="/" onclick="test(this)">
<input type="button" value="0" onclick="test(this)">
<input type="button" value="C" onclick="test(this)">
<input type="button" value="=" onclick="test(this)">
div>
body>
html>
效果图示：
12.2 JS校验登陆
(后续更新)
12.3 模拟淘宝
(后续更新)
13 总结
js可以动态的操作html文件，让html更加形象。