仿网站ppt怎么做,网页制作公司北京,怎么做flash网站,适合新手做的网站项目文章目录1 介绍2 ECMAScript2.1 基本语法2.2 基本对象3 BOM3.1 window窗口对象3.2 location地址栏对象3.3 history历史记录对象4 DOM4.1 概念4.2 核心DOM4.2.1 Document对象4.2.2 Element对象4.2.3 节点对象4.2.4 案例#xff1a;动态表格4.2.5 内容切换4.2.6 样式设置5 事件5…
文章目录1 介绍2 ECMAScript2.1 基本语法2.2 基本对象3 BOM3.1 window窗口对象3.2 location地址栏对象3.3 history历史记录对象4 DOM4.1 概念4.2 核心DOM4.2.1 Document对象4.2.2 Element对象4.2.3 节点对象4.2.4 案例动态表格4.2.5 内容切换4.2.6 样式设置5 事件5.1 基本概念5.2 开灯关灯案例5.3 常见事件5.3.1 点击事件5.3.2 焦点事件5.3.3 加载事件5.3.4 鼠标事件5.3.5 键盘事件5.3.6 选择并改变5.3.7 表单事件1 介绍
概念 JavaScript是一门客户端脚本语言运行在客户端浏览器中每一个浏览器都有JavaScript的解析引擎。【脚本语言不需要编译直接可以被解析执行】
功能 可以来增强用户和html页面的交互过程可以来控制html同元素让页面有动态的效果增强用户体验
JavaScript发展史
1992年Nombase第一门客户端脚本语言C- -专门用于表单的校验。 后更名为ScriptEase。1995年Netscape网景公司开发了LiveScript。后来请来了SUN公司的专家修改LiveScript并蹭热度命名为JavaScript。1996年微软开发出JScript语言。1997年ECMA提出ECMAScript作为客户端脚本语言的标准。JavaScript ECMAScript JavaScript特有的【BOM DOM】
2 ECMAScript
2.1 基本语法
与html的结合方式
内部JS定义script XXXXX/script XXXXX是Script代码外部JS定义script src“XXX.js” /script通过src引入外部的js文件可以定义多个script标签可以定义在html任何位置 但位置会影响执行顺序
注释
单行注释/ /多行注释/* */
数据类型
原始类型number【整数、小数、NAN】、string、boolean、null【对象为空的占位符】、undefined【未定义 如果没有初始化的默认赋值】引用类型对象
变量 -var 变量名 初值 定义变量 -typeof(变量名) 查看变量类型null的typeof是object 变量是一小块存储数据的内存空间 Java是强类型的语言JavaScript是弱类型的语言。强类型在开辟变量存储空间时定义了空间将来存储数据的数据类型只能存固定类型的数据。
运算符
一元运算符 在JS中如果运算数不是运算符要求的类型 js引擎会将运算数进行类型转换 string转number按字面值转或NAN NAN和其他数值运算结果是NAN boolean转numbertrue转1 false转0算数运算符赋值运算符比较运算符全等于在比较前先判断类型 如果类型不一样直接false逻辑运算符三元运算符条件表达式1表达式2
number转boolean0或NAN为假 其他为真 string转boolean除了空串 其他都是真 null和undefined都是假 对象转boolean都是真
流程控制语句
if...elseswitch java switch可以接收byte、int、short、char、枚举、字符串 js switch可以接收所有数据类型whiledo...whilefor
特殊语法
语句以分号结尾如果一行只有一条语句则可省不建议不写分号。变量定义使用var关键字也可以不使用var。用var定义的是局部变量不用var定义的是全局变量。
练习打印99乘法表
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyletd{border: 1px solid;}/stylescriptdocument.write(table aligncenter);for(var i 1; i 9; i ){document.write(tr);for(var j 1; j i; j ){document.write(td);document.write(i × j i*j nbspnbspnbsp);document.write(/td);}document.write(/tr);}/script!-- script srcjs/a.js/script--
/head
body
!--input typetext--
/body
/html2.2 基本对象
Boolean Number String
Function Function是函数对象同名对象会覆盖。方法的调用只和命名有关和参数列表无关。
!--方法1-- scriptfunction f(a, b) {alert(a b);}在这里插入代码片f(1,3);/script
!--方法2-- scriptvar fun function (a,b) {alert(a b);}fun(8,9);/script在方法声明中有一个隐藏的内置数组对象arguements封装了所有的参数。
例如求任意个数的和 script// 求任意个数的和function f() {var sum 0;for(var i 0; i arguments.length; i){sumarguments[i];}return sum;}var sum f(1,2,3,4,5);alert(sum);/scriptArray
var arr new Array(元素列表)创建方法1var arr new Array(默认长度)创建方法2var arr [原始列表]创建方法3特点元素类型可变长度可变方法join(拼接符号)将元素拼接为字符串push(添加元素)在末尾添加元素
Date scriptvar date new Date();document.write(date.toLocaleString()br)//返回当前date对象对应的os的字符串格式// 2100/2/18 下午3:00:16document.write(date.getTime())//获取时间戳/scriptMath Math对象不用创建直接使用 Math.Random 返回 [0,1) 的随机数 Math.ceil向上取整 Math.floor向上取整 Math.round四舍五入取整
获取1~100的随机正整数 script// [0,1) --- [0,99.999999] --- [0,99] --- [1,100]var rand Math.random()*100;document.write(Math.floor(rand1));/scriptRegExp正则表达式对象
正则表达式
单个字符[] 如[a] [ab] [a-zA-Z0-9] 特殊符号表示 \d单个数字字符[0-9] \w单个单词字符[a-zA-Z0-9_]量词符号 *表示出现0次或多次 ?表示出现0次或1次 表示出现1次或多次 {m,n}表示数量大于等于m小于等于n如果m缺省表示至多n个如果n缺省表示最少m次。开始^ 结尾$
正则表达式对象
var reg new RegExp(正则表达式)var reg /正则表达式/
test方法验证字符串是否符合正则表达式 scriptvar a new RegExp([0-9]{11});var b /^\\ w{2,9}$/;var username zhangsan;//truevar flag1 b.test(username);var password 12345678910;//turepassword 213;//falevar flag a.test(password);alert(flag);/scriptGlobal全局对象
特点用Global封装的方法不需要对象就可以直接调用decodeURI()/encodeURI()uri编码/解码decodeURIComponent()/encodeURIComponent()uri编码解码上面的方法功能一样 Component可以编码的字符更多parseInt将字符串转为数字逐一判断每一个字符是否是数字直到遇到非数字 将数字部分转为numberisNaNNaN参与的比较全为false用这个方法判断是不是NaNeval将JS字符串转为脚本执行
3 BOM
navigator浏览器对象和screen屏幕对象略
3.1 window窗口对象
不需要创建对象 可以直接用window.方法名调用且window引用可以省略
弹出方法
alter()弹出警告框confirm()显示带一段消息及确认按钮和取消按钮的对话框。确定按钮返回true否则false。prompt()用户输入框
打开方法
close()关闭自己哪个window对象调用closeclose就关闭谁open()可以传入url作为参数 不传参数则打开空网页
定时器方法
setTimeout()在指定的毫秒数后调用函数或计算表达式clearTimeout()取消setTimeout方法设置的timeoutsetInterval()按照周期调用函数clearInterval()取消set方法设置的timeout
案例轮播图
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyimg idpic srcimg/banner_1.jpg width100%
/body
scriptsetInterval(fun(),1000);var number 1;function fun() {number ;if(number 3){number 1;}var elementById document.getElementById(pic);elementById.src img/banner_number.jpg}
/script
/html3.2 location地址栏对象
location是window的属性值 可以通过window.location获取 也可以直接写location
reload() 重新加载href() 获取href
案例自动跳转
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylep{text-align: center;}span{color: red;}/style
/head
bodyp span idtime5/span秒之后,自动跳转到百度首页/p
/body
scriptvar second 5;var time document.getElementById(time);function showTime(){second --;time.innerHTML second ;if(second0){location.href https://www.baidu.com;}}setInterval(showTime, 1000);
/script
/html3.3 history历史记录对象
history是window的属性值 可以通过window.history获取 也可以直接写history length属性可以返回当前窗口历史列表中的URL数量 历史记录是指当前window可以前进后退的窗口数量
back后退forward前进go前进或后退
4 DOM
4.1 概念
文档对象模型将标记语言文档的各个组成部分封装为对象可以使用这些对象对标记语言文档进行CRUD的动态操作
W3C DOM的标准被分为三个部分
核心DOM 针对任何结构化文档的标准模型【Document、Element、Attribute、Text、Comment、Node(其他5个的父对象)】XML DOM 针对XML文档的标准模型HTMLDOM 针对HTML文档的标准模型
4.2 核心DOM
4.2.1 Document对象
在HTML DOM中可以通过window.document或document获取
获取Element对象getElementById()查找具有指定的唯一ID的元素getElementByTagName根据元素名称获取元素对象们返回值是一个数组getElementsByClassName()根据Class属性值获取元素对象们返回值是一个数组getElementsByName()根据name属性值获取元素对象们返回值是一个数组创建其他DOM对象createAttribute()createElement()createTextNode()createComment()
4.2.2 Element对象
通过document来获取和创建 -removeAttribute()删除属性 -setAttribute()设置属性
点击按钮设置属性
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodya点击/ainput typebutton idbtn value设置属性
/body
scriptvar btn document.getElementById(btn);btn.onclick function () {var element_a document.getElementsByTagName(a)[0];element_a.setAttribute(href,https://www.baidu.com);}
/script
/html4.2.3 节点对象
其他五个对象的父对象 所有的dom对象都可以被认为是一个节点
appendChild()向节点的子节点列表的结尾添加新的子节点removeChild()删除并返回当前节点的指定子节点replaceChild()用新节点替换子节点
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}/style
/head
bodydiv iddiv1div iddiv2div2/divdiv1/div
!-- 这里href这样写是为了让超链接可以点击 但不跳转页面--a hrefjavascript:void(0) iddel删除子节点/a
!-- input typebutton iddel value删除div2--a hrefjavascript:void(0) idadd添加子节点/a
/body
scriptvar element_a document.getElementById(del);element_a.onclick function () {var div1 document.getElementById(div1);var div2 document.getElementById(div2);div1.removeChild(div2);}var element_b document.getElementById(add);element_b.onclick function () {var div3 document.createElement(div);div3.setAttribute(id,div3);div1.append(div3);}
/script
/html4.2.4 案例动态表格
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{text-align: center;margin: 50px;}table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}/style
/head
body
divinput typetext idid placeholder请输入编号input typetext idname placeholder请输入姓名input typetext idgender placeholder请输入性别input typebutton idadd value添加
/divtablecaption学生信息表/captiontrth编号/thth姓名/thth性别/thth操作/th/tr
/table
scriptdocument.getElementById(add).onclick function(){var id document.getElementById(id).value;var name document.getElementById(name).value;var gender document.getElementById(gender).value;var table document.getElementsByTagName(table)[0];//追加一行table.innerHTML tr\ntdid/td\n tdname/td\n tdgender/td\n tda href\javascript:void(0);\ οnclick\delTr(this);\ 删除/a/td\n /tr;}function delTr(obj){var table obj.parentNode.parentNode.parentNode;var tr obj.parentNode.parentNode;var th obj.parentNode;table.removeChild(tr);}
/script
/body
/html4.2.5 内容切换
用来控制html文档的内容 -document.getElementById(id值)获取页面标签元素对象Element
操作Element对象
修改属性值
明确要获取的对象是哪个查API文档找有哪些属性可以设置
修改标签体内容
获取元素对象使用innerHTML属性修改标签体内容
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!-- img srcimg/on.gif idpic--h1 idtitle哈哈哈哈哈哈哈哈哈哈哈/h1
/body
script// var elementById document.getElementById(pic);// alert(换图片);// elementById.src img/off.gif;var elementById document.getElementById(title);alert(换文字)elementById.innerText 5555555555555555;
/script
/html4.2.6 样式设置
通过元素的style属性来设置
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv id div1div1/div
/body
scriptvar div1 document.getElementById(div1);div1.onclick function () {div1.style.border 1px solid red;div1.style.width 200px;div1.style.fontSize 200px;}
/script
/html通过提前定义的类选择器的样式通过元素的className属性来设置class属性值
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.d1{border: 1px solid red;width: 100px;height: 100px;}.d2{border: 1px solid blue;width: 100px;height: 100px;}/style
/head
bodydiv id div1div1/divdiv id div2div2/div
/body
scriptvar div1 document.getElementById(div1);div1.onclick function () {div1.className d1;}var div2 document.getElementById(div2);div2.onclick function () {div2.className d2;}
/script
/html5 事件
5.1 基本概念
功能某些组件被执行某些操作后触发程序的执行。
绑定事件 方法1 直接在html标签上指定事件的属性属性值就是js代码 方法2 通过js获取元素对象指定事件属性设置一个函数
5.2 开灯关灯案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyimg idlight srcimg/off.gif onclickonclick();
/body
scriptvar light document.getElementById(light);//一开始灯是关的var flag false;light.onclick function() {if(flag){light.src img/off.gif;flag false;}else{light.src img/on.gif;flag true;}}
/script
/html5.3 常见事件
5.3.1 点击事件
onclick单击事件ondnlclick双击事件
5.3.2 焦点事件
onblur失去焦点onfocus元素获得焦点
5.3.3 加载事件
onload页面/图加载完成
5.3.4 鼠标事件
onmousedown鼠标被按下onmouseup鼠标被松开onmousemove鼠标被移动onmouseover鼠标被移动在某元素之上onmouseout鼠标被移开
5.3.5 键盘事件
onkeyup键盘按键被松开onkeydown键盘按键被按下onkeypress按下并松开
5.3.6 选择并改变
onchangeonselect
5.3.7 表单事件
onsubmit提交onreset重置
