web前端基础-javascript
目录
前言------ 新的一天，继续我的编程之路，加油！
javascript的简介
HTML 对页面进行了一个整体骨架的搭建
CSS 对页面进行修饰，和美化
javascript 对页面与用户进行交互
javascript是一种直译的脚本语言，由浏览器解释执行,不需要进行编译。
什么是脚本语言？
java源代码--->.class文件-----》由虚拟机执行
脚本语言：源码------》解释执行
javascript是由浏览器解释执行。
javascript的组成
ECMAScript ：核心组成部分，定义js的语法规范
DOM：document object model 文档对象模型， 主要是用来管理页面
BOM：browser object model 浏览器对象模型，浏览器的一些前进、后退、刷新、历史记录、地址栏等
javascript的引入
在HTML中，js是写在<script type="text/javascript"></script>标签中
内部引入和外部引入
[code]<head>
<script type="text/javascript">
alert("内部引入");
</script>
<!--外部引入-->
<script src="./js/my.js"></script>
</head>
javascript的变量
js变量统一用 var 来定义。
语句结束时的 分号 可以有，可以没有。
区分大小写
单行注释：// 多行注释：/* */
基本类型：string、number、boolean、undefine(表示变量不含有值)、null
引用类型：对象、内置对象
类型转换：js内部自动转换
javascript的运算符
算术运算符：+ - * / % 自加++ 自减 --
赋值运算符：= += -= *= /= %=
比较运算符：> < != ==(只要值相等就可以) ===（值和数据类型都必须相等）
逻辑运算符：&& || ！
三目运算符：条件1 ? true : folse;
+ 号，var a = 10; var b='4'; ---------->>>>>>>>>a+b=104
javascript的语句
if-else； while； do while； for； switch；
在循环语句中有结束循环break，结束本次循环continue；
javascript声明函数和变量
声明函数： 1、 function 函数名(){ }
2、var 函数名 = function(){ }
声明基础类型变量：var 变量名 = 变量的值;
声明引用类型的变量：var 变量名 = new 构造方法名();
javascript的输出
window.alert("弹框输出"); window 可以省略
document.write(); 向页面输出
console.log(); 向控制台输出
javascript对象
创建对象：1. var p = new 构造方法名();
2. var p = new Object(); //这是new的js的内部对象
3. var p = { //dui对象初始化方式
name : "Jack",
speak : function(){ alert("会吃"); }
}
给对象动态的添加属性和方法：
p.name="Jack";
p.func=function speak(){ alert("说话"); }
给对象删除属性和方法：
delect p.name;
delect p.func;
对象的封装性：
[code]<script type="text/javascript">
function Dog(){
var privatePro=function(){ alert("私有方法"); }
privatePro();
this.objPro=function(){ alert("对象方法"); }
Dog.prototype.objPro1=function(){ alert("对象方法2"); }
}
Dog.classPro=function(){ alert("类方法"); }
Dog.classPro();
Dog d = new Dog();
d.objPro();
d.objPro1();
//运行结果依次为：类方法，私有方法（在new Dog()时运行），对象方法，对象方法2
</script>
对象的继承性：
[code]<script type="text/javascript">
/*继承性
Apply() 实现属性和方法的继承； 单纯的继承属性和方法 相当于java中的super
Prototype 实现原型的继承； 类型的继承
*/
function Animal(name,age){
this.name=name;
this.age=age;
this.shout=function(){
alert("我是："+this.name+",今年："+this.age);
};
this.action=function(){
alert("会吃");
};
}
function Dog1(name,age){
Animal.apply(this, [name,age]);
}
var jack = new Dog1("jack",3);
alert(jack.name);
alert(jack.age);
jack.shout();
jack.action();
</script>
对象的多态性：
[code]<script type="text/javascript">
//实现多态特征
function Anima(){
this.say=function(){
alert("我是动物");
};
}
function Do(){
this.say=function(){
alert("我是狗");
};
}
Do.prototype=new Anima();
function Cat(){
this.say=function(){
alert("我是猫");
};
}
Cat.prototype=new Anima();
function say(animal){
if(animal instanceof Anima){
animal.say();
}
}
var dog=new Do();
var cat=new Cat();
say(dog);
say(cat);
</script>
javascript作用域
全局变量、局部变量
类变量、对象变量，私有变量(其实也就是局部变量)
[code]<script type="text/javascript">
var a = 22; //全局变量
function speak(){
var b = 33; //局部变量
alert(b);
}
speak();
alert(b); //会报错
//-------------------------------------------------
function Dog(name,age){
this.objPro="对象属性";
Dog.prototpe.objPro1="对象属性2";
var privatePro="私有属性";
this.name=name;
this.speak() = function(){
alret("我的名字是："+name);
}
}
Dog.classPro="类属性";
alert(C.classPro);
var c =new C();
alert(c.ObjPro);
alert(c.objPro2);
</script>
javascript中的window对象
全局函数 1cca7 不属于任何内置对象：eval(); escape(); isNan(); isFinite(); parseFloat(); parseInt(); unescape();
常用方法：
window.alert();
window.setTimeout("方法名()" , 5000); //限定时间内执行一次
window.setInterval("方法名()" , 1000); //限定时间内执行多次(1000就是1秒)
window.open("url"); //打开新的窗口
[code]<script type="text/javascript">
window.alert("window对象的alert方法");
function dzt(){
alert("5秒后屌炸天");
}
function setDateTime(){
var date=new Date();
var day=date.getDay();
var week;
switch(day){
case 0:week="星期日";break;
case 1:week="星期一";break;
case 2:week="星期二";break;
case 3:week="星期三";break;
case 4:week="星期四";break;
case 5:week="星期五";break;
case 6:week="星期六";break;
}
var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
document.getElementById("today").innerHTML=today;
}
window.setTimeout("dzt()", 5000); //限定时间内执行（执行一次）
window.setInterval("setDateTime()", 1000); //限定时间内执行（执行多次）
</script>
javascript字符串对象
创建字符串：1. var str = "字符串实例化方式1";
2. var str = new String("字符串实例化方式2");
常用方法：str.length(); //字符创长度
str.indexOf("abc",0); //从当前位置查找字符串abc
str.replace("abc","java");//把abc替换成java
javascript数组
创建数组：1. var arr = new Array();
2. var arr2 = new Array(3); //只能存3个元素
常用方法：arr.sort(); //正向排序
arr.join(); //数组元素组合成字符串
arr.concat(arr2); //合并素组元素
javascript日期
日期使用js的内置对象
创建日期对象： var date = new Date();
常用方法：date.getFullYear() 年(返回一个四位数字) date.getMonth() 月(返回0-11) date.getDate() 日(返回1-31)
date.getHours() 时 date.getMinutes() 分 date.getSeconds() 秒
date.getDay() 返回一周的第几天
使用js完成页面简单的数据校验
js开发步骤
1.确定事件
2.当事件确定会触发一个函数
3.函数里对页面元素进行操作，进行一些交互动作
代码实现
test(String)方法：把与正则表达式相匹配的字符串匹配，正确返回true，失败返回false
提交事件：onsubmit="return checkForst()" 必须加return，比较特殊。正则表达式要写在 / / 之间
[code] <script>
/* 1. 校验用户名, 用户不能为空, 长度不能小于6位
2. 手机号合法输入
3. 邮箱合法输入
*/
function checkForm(){
//获取用户名输入项
var inputObj = document.getElementById("username");
//获取输入项的值
var uValue = inputObj.value;
alert(uValue);
//用户名长度不能6位 ""
if(uValue.length < 6 ){
alert("对不起,您的长度太短!");
return false;
}
//密码长度大于6 和确认必须一致
//获取密码框输入的值
var input_password = document.getElementById("password");
var uPass = input_password.value;
if(uPass.length < 6){
alert("对不起,您还是太短啦!");
return false;
}
//校验手机号
var input_mobile = document.getElementById("mobile");
var uMobile = input_mobile.value;
//
if(!/^[1][3578][0-9]{9}$/.test(uMobile)){
alert("对不起,您的手机号无法识别!");
return false;
}
//校验邮箱: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
alert("对不起,邮箱不合法");
return false;
}
return true;
}
</script>
<body>
<form action="JS开发步骤.html" onsubmit="return checkForm()">
<div>用户名:<input id="username" type="text" /></div>
<div>密码:<input id="password" type="password" /></div>
<div>确认密码:<input id="repassword" type="password" /></div>
<div>手机号码:<input id="mobile" type="number" /></div>
<div>邮箱:<input id="email" type="text" /></div>
<div><input type="submit" value="注册" /></div>
</form>
</body>
使用js完成页面图片轮播效果
需求分析：
当页面加载完毕时进行图片的轮转效果
js开发步骤
1、确定事件
2、当点击事件会触发函数（当文档加载完毕时触发函数）
3、在函数中对页面进行一些处理
代码实现
[code]<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script type="text/javascript">
function init(){
window.setInterval("ha()",3000);
}
var index=0;
function ha() {
var imbg = document.getElementById("imbg");
var carIndex=index%3 + 1;
imbg.src="./img/"+carIndex+".jpg";
index++;
}
</script>
</head>
<body id="ss" onload="init()">
<input type="button" value="点击切换图片" onclick="ha()">
<img src="./img/1.jpg" id="imbg">
</body>
</html>
暂停计时器
完成页面定时弹出广告
需求分析：
当打开一个页面的时候，过5秒钟会自动弹出一个广告，让你看5秒然后自动消失
js开发步骤：
1.确定事件：页面加载完成的事件 onload
2.当点击事件要触发的函数：init()
3.在函数中进行页面处理
定时函数：setTimeOut() 隔多少毫秒执行一次函数
setInterval() 每隔多少好眠执行一次函数
cleatTimeout() 结束定时器
clearInterval() 结束定时器
显示广告：imga.style.display = "block"; display是一个属性
隐藏广告：imga.style.display = "none";
js文档加载顺序：
当加载网页时，是从上而下加载的，遇到函数不会执行，只会加载进来
代码实现：
[code]<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时弹出广告</title>
<script type="text/javascript">
function init() {
window.setTimeout("startDime()",5000);
}
function startDime() {
document.getElementById("imga").style.display="block";
window.setTimeout("stopDime()",5000);
}
function stopDime() {
document.getElementById("imga").style.display="none";
}
</script>
</head>
<body onload="init()">
<img src="./img/美女.jpg" style="display: none" id="imga">
</body>
</html>
表单校验
需求分析：
当输入用户名密码时候，在js简单校验中，输错的时候，直接弹出框来提示，用户体验不好，这次采用在用户名后面 提示
js代码步骤：
1.确定事件 2.事件调用函数 3.在函数中进行处理
常用事件： onfocus：元素获得焦点事件
onblur：元素失去焦点事件
onkeyup：当键盘被松开事件
函数checkTim()
代码实现：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script>
//用户名校验
/*
1、确定事件：获取焦点事件：onfocus
2、事件触发函数：checkTim()
3、在函数中处理提示信息
提示信息<span></span>
*/
function checkTim(uId, info){
//显示提示信息
document.getElementById(uId).innerHTML=info;
}
/*
* 1、确定事件：onblur：失去焦点事件
* 2、事件触发函数：checkText()
* 3、函数中进行校验，用户名长度太短或者可用
* 引用
* onkeyup:某个按键被松开事件
* */
function checkText() {
//获取用户名
var uName= document.getElementById("username").value;
//获取span元素
var span = document.getElementById("span_username");
//进行校验
if (uName.length < 6){
span.innerHTML="<font color='red' size='2'>用户名太短啦！</font>";
return false;
}else {
span.innerHTML="<font color='red' size='2'>用户名可以哦！</font>";
return true;
}
}
function checkPassWord() {
var uPass = document.getElementById("upassword").value;
var span = document.getElementById("span_password");
if (uPass.length < 6){
span.innerHTML="<font color='red' size='2'>密码太短啦！</font>";
return false;
} else{
span.innerHTML="<font color='red' size='2'>密码 可以啦！</font>";
return true;
}
}
function checkRePassWord() {
var uPass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
if (uPass.length < 6){
span.innerHTML="<font color='red' size='2'>要与原密码一致</font>";
return false;
} else{
span.innerHTML="";
return true;
}
}
function checkEmail(){
var email = document.getElementById("email").value;
var span = document.getElementById("span_email");
if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(email)){
span.innerHTML = "<font color='red' size='2'>邮箱格式不正确</font>";
return false;
}else {
span.innerHTML = "<font color='red' size='2'>邮箱格式正确</font>";
return true;
}
}
function checkForm() {
var succ = checkText() && checkPassWord() && checkRePassWord() && checkEmail();
return succ
}
</script>
</head>
<body>
<div>
<form action="./lunbotu.html" onsubmit="return checkForm()">
用户名：<input type="text" id="username" onfocus="checkTim('span_username', '用户名长度不能小于6位数')" onblur="checkText()" onkeyup="checkText()"><span id="span_username"></span><br>
密码：<input type="password" id="upassword" onfocus="checkTim('span_password', '密码长度不能小于6位数')" onblur="checkPassWord()" onkeyup="checkPassWord()"><span id="span_password"></span><br>
确认密码：<input type="password" id="repassword" onfocus="checkTim('span_repassword', '密码要与原密码一致')" onblur="checkRePassWord()" onkeyup="checkRePassWord()"><span id="span_repassword"></span><br>
邮箱：<input type="text" id="email" onfocus="checkTim('span_email', '邮箱格式一定要正确')" onblur="checkEmail()" onkeyup="checkEmail()"><span id="span_email"></span><br>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
表格的隔行换色案例
需求分析：
我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的 情况，需要对表格进行隔行换色
3.2 技术分析
js代码步骤：
1.确定事件：文档加载完成 onload事件 2.事件调用函数：init()
3.在函数中进行处理:操作表格每一行，动态改变背景色
代码实现：
[code]<script type="text/javascript">
function init(){
//获取表格对象元素
var tab = document.getElementById("tab");
//获取表格中的每一行
var rows = tab.rows;
for (var i = 1; i<rows.length; i++){
var row = rows[i]
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
复选框的全选全不选案例
需求分析：
商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有 的商品
js代码步骤：
1.确定事件：当用户点击时onclick事件 2.事件调用函数：checkAll();
3.在函数中进行处理:
getElementByName() 返回name值相同的元素对象的集合
getElementByTagName() 返回标签名字相同的元素对象的集合
getElementById() 返回指定id名称的第一个元素对象
复选框checked属性：checked="checked" 时，默认被选中
代码实现：
[code]function checkAll() {
//获取第一个复选框
var check = document.getElementById("checks");
//得到第一个复选框的状态，使其他复选框的状态和他相同
var checkedstatus = check.checked;
//获取其他复选框的集合
var checks = document.getElementsByName("checkone");
for (var i=0; i<checks.length; i++){
var one = checks[i];
one.checked = checkedstatus;
}
DOM树
Dom对象：
document对象：每个载入浏览器的html都成为一个document对象。
element对象：元素（节点）对象
attribute对象：属性对象
event对象：事件对象
每一个对象都有自己的属性，和行为（也就是方法）
[code]<input type="text" id="aa" name="haha">
<input type="button" onclick="haha()" value="提交" id="aac" name="ssss">
<script type="text/javascript">
function haha() {
var sa = document.getElementById("aa").name="dd";
alert(sa);
var ss = document.getElementById("aac").name;
alert(ss);
}
</script>
input元素对象，可以访问value属性、name属性。
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
省市联动案例
代码步骤：
1、确定事件：onchange事件：当下拉列表内容改变时候发生
2、事件触发函数：onCase()函数
3、在函数中处理一些事情
创建元素节点：document.appendElement("optiona")
创建文本节点：document.appendTextNode()
添加节点：haha.appentChild(lalala)
<select></select>标签获取每一项options用 select元素对象.options
js代码：
[code]<script type="text/javascript">
/*
* 1、确定事件：onchange事件：当下拉框内容改变时候发生
* 2、事件触发函数：upCase()
* 3、在函数中处理，获取元素的值
* */
var shi =[["济宁","济南","日照"],["杭州","丽水","青田"],["郑州","北京","上海"]]
function upCase() {
var pri = document.getElementById("pri").value;
//获取对应的城市
var city = shi[pri];
var pri1 = document.getElementById("pri1");
//清除子元素
pri1.options.length=0
for (var i = 0; i<city.length; i++){
//添加元素首先先创建元素
var aa = document.createElement("option"); //动态添加了一个<option>标签
var text = document.createTextNode(city[i]);
aa.appendChild(text);
pri1.appendChild(aa);
}
}
</script>
<select id="pri" onchange="upCase()">
<option>---请选择---</option>
<option value="0">山东省</option>
<option value="1">浙江省</option>
<option value="2">湖南省</option>
</select>
<select id="pri1">
</select>
商品的左右移动
需求分析：
在我们的分类管理中， 我们能够分类管理我们的信息，当点击修改时，进入一个可以编辑的页面，进行我们商品的 分类的修改。
代码步骤：
1、确定事件，点击事件onclick 双击事件ondblclick
2、事件触发函数moveSelect()
3、在函数中进行操作
将左边select选中的商品移动到右边的select
var a = document.getElementById("leftSelect").options; //获得所有option项
a[i].selected //属性selected表示选中返回true，没选中返回folse
HTML 中 <select></select>标签multiple="multiple"属性表示显示多项
applentChild()方法将元素节点添加到父节点中是移动而不是复制。
js代码：
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品的左右选择</title>
<script type="text/javascript">
/*
* 1、确认事件 onclick：点击事件
* 2、事件发生调用函数：leftSelect()
* 3、在函数进行处理
* 获得选中的商品，并将商品移动到右边的select中
* */
function moveSelect(a, b) {
var leftSelect = document.getElementById(a);
var options1 = leftSelect.options;
var rightSelect = document.getElementById(b);
//遍历所有项，并找出选中的项
for (var i = 0; i<options1.length; i++){
var optionOne = options1[i];
if (optionOne.selected) {
//将选中的项添加到右边的select中
rightSelect.appendChild(optionOne);
}
}
}
function moveSelectAll(a, b) {
var leftSelect = document.getElementById(a);
var options1 = leftSelect.options;
var rightSelect = document.getElementById(b);
//遍历所有项，并找出选中的项
for (var i = options1.length-1; i>=0; i--){
var optionOne = options1[i];
rightSelect.appendChild(optionOne);
}
}
</script>
</head>
<body>
<table border="2px" width="400px" align="center">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里是手机数码"></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<div style="float: left;">
已有商品：<br>
<select multiple="multiple" id="leftSelect" ondblclick="moveSelect('leftSelect','rightSelect')">
<option>华为</option>
<option>小米</option>
<option>自行车</option>
<option>电动车</option>
</select><br>
<a href="#" onclick="moveSelect('leftSelect','rightSelect')">>></a><br>
<a href="#" onclick="moveSelectAll('leftSelect','rightSelect')">>>></a>
</div>
<div style="float: right;">
未有商品：<br>
<select multiple="multiple" id="rightSelect" ondblclick="moveSelect('rightSelect','leftSelect')">
<option>苹果</option>
<option>轿车</option>
<option>飞机</option>
<option>ipd</option>
</select><br>
<a href="#" onclick="moveSelect('rightSelect','leftSelect')"><<</a><br>
<a href="#" onclick="moveSelectAll('rightSelect','leftSelect')"><<<</a>
</div>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="提交"></td>
</tr>
</table>
</body>
</html>
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
- web前端开发（三）—JavaScript基础
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- web前端 基础部分（三） JavaScript
- web前端之JavaScript必知的基础知识
- web前端脚本编程（一）--JavaScript脚本基础知识
- Web前端开发精品课HTML CSS JavaScript基础教程第四章课后编程题答案
- web前端技术基础课程详解之JavaScript面向对象
- Web前端开发精品课HTML CSS JavaScript基础教程第九章课后编程题答案
- web前端基础教程：javascript循环的用法
- Web前端开发精品课HTML CSS JavaScript基础教程第十四章课后编程题答案
- 小熊进阶之WEB前端javascript的基础知识汇总
- web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果
- Web前端开发精品课HTML CSS JavaScript基础教程第十三章课后编程题答案
- web前端基础：javascript数组操作方法
- 接触javascript很久了，每次理解闭包都似是而非，最近在找Web前端的工作，所以需要把基础夯实一下。 本文是参照了joy_lee的博客 闭包 在她这篇博客的基础上以批注的形式力争把我的理解阐述出
- web前端基础——初识JavaScript
- Android程序员学WEB前端(10)-JavaScript(1)-基础-Sublime
- web前端面试-------javaScript基础知识点之数据类型
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案