深圳租赁住房和建设局网站,做网站视频赚钱吗,网站建设合同doc,国内精美网站界面网址1、JavaScript面向对象
1.1、面向对象介绍
在 Java 中我们学习过面向对象#xff0c;核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。 1.2、类的定义和使用
结构说明 代码实现 !DOCTYPE html
html langen
head核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。 1.2、类的定义和使用
结构说明 代码实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title类的定义和使用/title
/head
body/body
script//定义Person类class Person{//构造方法constructor(name,age){this.name name;this.age age;}//show方法show(){document.write(this.name , this.age br);}//eat方法eat(){document.write(吃饭...);}}//使用Person类let p new Person(张三,23);p.show();p.eat();
/script
/html1.3、字面量类的定义和使用 结构说明 代码实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title字面量定义类和使用/title
/head
body/body
script//定义personlet person {name : 张三,age : 23,hobby : [听课,学习],eat : function() {document.write(吃饭...);}};//使用persondocument.write(person.name , person.age , person.hobby[0] , person.hobby[1] br);person.eat();
/script
/html1.3、继承 继承让类与类产生子父类的关系子类可以使用父类有权限的成员。 继承关键字extends 顶级父类Object !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title继承/title
/head
body/body
script//定义Person类class Person{//构造方法constructor(name,age){this.name name;this.age age;}//eat方法eat(){document.write(吃饭...);}}//定义Worker类继承Personclass Worker extends Person{constructor(name,age,salary){super(name,age);this.salary salary;}show(){document.write(this.name , this.age , this.salary br);}}//使用Workerlet w new Worker(张三,23,10000);w.show();w.eat();
/script
/html1.4、小结 面向对象 把相关的数据和方法组织为一个整体来看待从更高的层次来进行系统建模更贴近事物的自然运行模式。 类的定义 class 类{} 字面量定义 类的使用 let 对象名 new 类名(); 对象名.变量名 对象名.方法名() 继承 让类和类产生子父类关系提高代码的复用性和维护性。 子类 extends 父类 Object 顶级父类
2、JavaScript内置对象
2.1、Number
方法介绍 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleNumber/title
/head
body/body
script//1. parseFloat() 将传入的字符串浮点数转为浮点数document.write(Number.parseFloat(3.14) br);//2. parseInt() 将传入的字符串整数转为整数document.write(Number.parseInt(100) br);document.write(Number.parseInt(200abc) br); // 从数字开始转换直到不是数字为止/script
/html2.2、Math
方法介绍 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleMath/title
/head
body/body
script//1. ceil(x) 向上取整document.write(Math.ceil(4.4) br); // 5//2. floor(x) 向下取整document.write(Math.floor(4.4) br); // 4//3. round(x) 把数四舍五入为最接近的整数document.write(Math.round(4.1) br); // 4document.write(Math.round(4.6) br); // 5//4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)document.write(Math.random() br); // 随机数//5. pow(x,y) 幂运算 x的y次方document.write(Math.pow(2,3) br); // 8
/script
/html2.3、Date 方法说明 构造方法 成员方法 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDate/title
/head
body/body
script//构造方法//1. Date() 根据当前时间创建对象let d1 new Date();document.write(d1 br);//2. Date(value) 根据指定毫秒值创建对象let d2 new Date(10000);document.write(d2 br);//3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)let d3 new Date(2222,2,2,20,20,20);document.write(d3 br);//成员方法//1. getFullYear() 获取年份document.write(d3.getFullYear() br);//2. getMonth() 获取月份document.write(d3.getMonth() br);//3. getDate() 获取天数document.write(d3.getDate() br);//4. toLocaleString() 返回本地日期格式的字符串document.write(d3.toLocaleString());
/script
/html2.4、String 方法说明 构造方法 成员方法 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleString/title
/head
body/body
script//1. 构造方法创建字符串对象let s1 new String(hello);document.write(s1 br);//2. 直接赋值let s2 hello;document.write(s2 br);//属性//1. length 获取字符串的长度document.write(s2.length br);//成员方法//1. charAt(index) 获取指定索引处的字符document.write(s2.charAt(1) br);//2. indexOf(value) 获取指定字符串出现的索引位置document.write(s2.indexOf(l) br);//3. substring(start,end) 根据指定索引范围截取字符串(含头不含尾)document.write(s2.substring(2,4) br);//4. split(value) 根据指定规则切割字符串返回数组let s3 张三,23,男;let arr s3.split(,);for(let i 0; i arr.length; i) {document.write(arr[i] br);}//5. replace(old,new) 使用新字符串替换老字符串let s4 你会不会跳伞啊让我落地成盒。你妹的。;let s5 s4.replace(你妹的,***);document.write(s5 br);
/script
/html2.5、RegExp
正则表达式是一种对字符串进行匹配的规则。 方法说明 构造方法成员方法 规则 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleRegExp/title
/head
body/body
script//1.验证手机号//规则第一位1第二位358第三到十一位必须是数字。总长度11let reg1 /^[1][358][0-9]{9}$/;document.write(reg1.test(18688888888) br);//2.验证用户名//规则字母、数字、下划线组成。总长度4~16let reg2 /^[a-zA-Z_0-9]{4,16}$/;document.write(reg2.test(zhang_san123));
/script
/html2.6、Array
成员方法 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleArray/title
/head
body/body
scriptlet arr [1,2,3,4,5];//1. push(元素) 添加元素到数组的末尾arr.push(6);document.write(arr br);//2. pop() 删除数组末尾的元素arr.pop();document.write(arr br);//3. shift() 删除数组最前面的元素arr.shift();document.write(arr br);//4. includes(元素) 判断数组中是否包含指定的元素document.write(arr.includes(2) br);//5. reverse() 反转数组元素arr.reverse();document.write(arr br);//6. sort() 对数组元素排序arr.sort();document.write(arr br);/script
/html2.7、Set
JavaScript 中的 Set 集合元素唯一存取顺序一致。
方法说明 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleSet/title
/head
body/body
script// Set() 创建集合对象let s new Set();// add(元素) 添加元素s.add(a);s.add(b);s.add(c);s.add(c);// size属性 获取集合的长度document.write(s.size br); // 3// keys() 获取迭代器对象let st s.keys();for(let i 0; i s.size; i){document.write(st.next().value br);}// delete(元素) 删除指定元素document.write(s.delete(c) br);let st2 s.keys();for(let i 0; i s.size; i){document.write(st2.next().value br);}
/script
/html2.8、Map
JavaScript 中的 Map 集合key 唯一存取顺序一致。
方法说明 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleMap/title
/head
body/body
script// Map() 创建Map集合对象let map new Map();// set(key,value) 添加元素map.set(张三,23);map.set(李四,24);map.set(李四,25);// size属性 获取集合的长度document.write(map.size br);// get(key) 根据key获取valuedocument.write(map.get(李四) br);// entries() 获取迭代器对象let et map.entries();for(let i 0; i map.size; i){document.write(et.next().value br);}// delete(key) 根据key删除键值对document.write(map.delete(李四) br);let et2 map.entries();for(let i 0; i map.size; i){document.write(et2.next().value br);}
/script
/html2.9、Json JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。 它是基于 ECMAScript 规范的一个子集采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写同时也易于计算机解析和 生成并有效的提升网络传输效率。 方法说明 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJSON/title
/head
body/body
script//定义天气对象let weather {city : 北京,date : 2088-08-08,wendu : 10° ~ 23°,shidu : 22%};//1.将天气对象转换为JSON格式的字符串let str JSON.stringify(weather);document.write(str br);//2.将JSON格式字符串解析成JS对象let weather2 JSON.parse(str);document.write(城市 weather2.city br);document.write(日期 weather2.date br);document.write(温度 weather2.wendu br);document.write(湿度 weather2.shidu br);
/script
/html2.10、表单校验
案例说明 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单校验/titlelink relstylesheet hrefcss/style.css/link
/head
bodydiv classlogin-form-wraph1黑马程序员/h1form classlogin-form action# idregist methodget autocompleteofflabelinput typetext idusername nameusername placeholderUsername... value/labellabelinput typepassword idpassword namepassword placeholderPassword... value/labelinput typesubmit value注册/form/div
/body
script//1.为表单绑定提交事件document.getElementById(regist).onsubmit function() {//2.获取填写的用户名和密码let username document.getElementById(username).value;let password document.getElementById(password).value;//3.判断用户名是否符合规则 4~16位纯字母let reg1 /^[a-zA-Z]{4,16}$/;if(!reg1.test(username)) {alert(用户名不符合规则请输入4到16位的纯字母);return false;}//4.判断密码是否符合规则 6位纯数字let reg2 /^[\d]{6}$/;if(!reg2.test(password)) {alert(密码不符合规则请输入6位纯数字的密码);return false;}//5.如果所有条件都不满足则提交表单return true;}/script
/html2.11、小结
内置对象是 JavaScript 提供的带有属性和方法的特殊数据类型。数字日期 Number Math Date字符串 String RegExp数组集合 Array Set Map结构化数据 JSON
3、JavaScript BOM
BOM(Browser Object Model)浏览器对象模型。将浏览器的各个组成部分封装成不同的对象方便我们进行操作。 3.1、Windows窗口对象
定时器 唯一标识 setTimeout(功能毫秒值)设置一次性定时器。clearTimeout(标识)取消一次性定时器。唯一标识 setInterval(功能毫秒值)设置循环定时器。clearInterval(标识)取消循环定时器。 加载事件 window.onload在页面加载完毕后触发此事件的功能。 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlewindow窗口对象/titlescript//一、定时器function fun(){alert(该起床了);}//设置一次性定时器//let d1 setTimeout(fun(),3000);//取消一次性定时器//clearTimeout(d1);//设置循环定时器//let d2 setInterval(fun(),3000);//取消循环定时器//clearInterval(d2);//加载事件window.onload function(){let div document.getElementById(div);alert(div);}/script
/head
bodydiv iddivdddd/div
/body
!-- script//一、定时器function fun(){alert(该起床了);}//设置一次性定时器//let d1 setTimeout(fun(),3000);//取消一次性定时器//clearTimeout(d1);//设置循环定时器//let d2 setInterval(fun(),3000);//取消循环定时器//clearInterval(d2);//加载事件let div document.getElementById(div);alert(div);
/script --
/html3.2、Location地址栏对象 href 属性 就是浏览器的地址栏。我们可以通过为该属性设置新的 URL使浏览器读取并显示新的 URL 的内容。 代码实现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlelocation地址栏对象/titlestylep{text-align: center;}span{color: red;}/style
/head
bodyp注册成功span idtime5/span秒之后自动跳转到首页.../p
/body
script//1.定义方法。改变秒数跳转页面let num 5;function showTime() {num--;if(num 0) {//跳转首页location.href index.html;}let span document.getElementById(time);span.innerHTML num;}//2.设置循环定时器每1秒钟执行showTime方法setInterval(showTime(),1000);
/script
/html3.3、案例-动态广告
案例分析和实现
!-- 广告图片 --
img srcimg/ad_big.jpg idad_big width100%/在 css 样式中display 属性可以控制元素是否显示
styledisplay: none;设置定时器3 秒后显示广告图片
//1.设置定时器3秒后显示广告图片
setTimeout(function(){let img document.getElementById(ad_big);img.style.display block;
},3000);设置定时器3 秒后隐藏广告图片
//2.设置定时器3秒后隐藏广告图片
setTimeout(function(){
let img document.getElementById(ad_big);
img.style.display none;
},6000);3.4、小结
**BOM(Browser Object Model)**浏览器对象模型。将浏览器的各个组成部分封装成不同的对象方便我们进行操作。 Window窗口对象Location地址栏对象Navigator浏览器对象History当前窗口历史记录对象Screen显示器屏幕对象 Window 窗口对象 setTimeout()、clearTimeout()一次性定时器setInterval()、clearInterval()循环定时器onload 事件页面加载完毕触发执行功能 Location 地址栏对象 href 属性跳转到指定的 URL 地址
4、JavaScript封装
封装思想 **封装**将复杂的操作进行封装隐藏对外提供更加简单的操作。 获取元素的方法 document.getElementById(id值)根据 id 值获取元素document.getElementsByName(name值)根据 name 属性值获取元素们document.getElementsByTagName(标签名)根据标签名获取元素们 代码实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title封装/title
/head
bodydiv iddiv1div1/divdiv namediv2div2/div
/body
script srcmy.js/script
scriptlet div1 getById(div1);alert(div1);// let div1 document.getElementById(div1);// alert(div1);// let divs document.getElementsByName(div2);// alert(divs.length);// let divs2 document.getElementsByTagName(div);// alert(divs2.length);
/script
/htmljs封装 function getById(id){return document.getElementById(id);
}function getByName(name) {return document.getElementsByName(name);
}function getByTag(tag) {return document.getElementsByTagName(tag);
}我们之前的操作都是基于原生 JavaScript 的比较繁琐。 JQuery 是一个前端框架技术针对 JavaScript 进行了一系列的封装使得操作变得非常简单 期待吧……
