做服装搭配图的网站,大型网站化方案,推广类电商文案,网站建设相关文章文章目录一、JavaScript简介二、HelloWorld三、JavaScript基本语法四、DOM五、JavaScript事件驱动六、网页制作完全手册分享关于HTML和css详见#xff1a;《JavaWeb中的HTML和css》 一、JavaScript简介
1、起源 1995年#xff0c;JavaScript由Netscape公司的Brendan Eich在网…
文章目录一、JavaScript简介二、HelloWorld三、JavaScript基本语法四、DOM五、JavaScript事件驱动六、网页制作完全手册分享关于HTML和css详见《JavaWeb中的HTML和css》 一、JavaScript简介
1、起源 1995年JavaScript由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript因为Netscape与Sun合作网景公司管理层希望它外观看起来像Java因此取名为JavaScript。
2、特性 ①脚本语言 JavaScript是一种解释型的脚本语言。不同于C、C、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件而是在程序的运行过程中对源文件逐行进行解释。
②基于对象 JavaScript是一种基于对象的脚本语言它不仅可以创建对象也能使用现有的对象。但是面向对象的三大特性『封装』、『继承』、『多态』中JavaScript能够实现封装可以模拟继承不支持多态所以它不是一门面向对象的编程语言。
③弱类型 JavaScript中也有明确的数据类型但是声明一个变量后它可以接收任何类型的数据并且会在程序执行过程中根据上下文自动转换类型。
④事件驱动 JavaScript是一种采用事件驱动的脚本语言它不需要经过Web服务器就可以对用户的输入做出响应。
⑤跨平台性 JavaScript脚本语言不依赖于操作系统仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。 二、HelloWorld
1、功能
2、代码
!DOCTYPE html
htmlheadmeta charsetutf-8titleHelloWorld/title/headbody!-- 在HTML代码中定义一个按钮 --button typebutton idhelloBtnSayHello/button/body!-- 在script标签中编写JavaScript代码 --script typetext/javascript// document对象代表整个HTML文档// document对象调用getElementById()方法表示根据id查找对应的元素对象var btnElement document.getElementById(helloBtn);// 给按钮元素对象绑定单击响应函数btnElement.onclick function(){// 弹出警告框alert(hello);};/script
/html3、显示效果 三、JavaScript基本语法
1、JavaScript代码嵌入方式 ①HTML文档内 a.JavaScript代码要写在script标签内。 b.script标签可以写在文档内的任意位置。 c.为了能够方便查询或操作HTML标签元素script标签可以写在body标签后面。如上的HelloWorld ②引入外部JavaScript文档 在script标签内通过src属性指定外部xxx.js文件的路径即可。注意引用外部JavaScript文件的script标签里面不能写JavaScript代码要先引入再使用。
!-- 使用script标签的src属性引用外部JavaScript文件和Java中的import语句类似 --
!-- 引用外部JavaScript文件的script标签里面不能写JavaScript代码 --
!-- 引用外部JavaScript文件的script标签不能改成单标签 --
!-- 外部JavaScript文件一定要先引入再使用 --
script src/pro02-JavaScript/scripts/outter.js typetext/javascript charsetutf-8/scriptscript typetext/javascript // 调用外部JavaScript文件中声明的方法showMessage();
/script2、声明和使用变量 ①JavaScript数据类型 基本数据类型
数值型JavaScript不区分整数、小数字符串JavaScript不区分字符、字符串单引号、双引号意思一样。布尔型true、false在JavaScript中其他类型和布尔类型的自动转换。true非零的数值非空字符串非空对象false零空字符串nullundefined引用类型
所有new出来的对象
用[]声明的数组
用{}声明的对象②变量 关键字var 数据类型JavaScript变量可以接收任意类型的数据 标识符严格区分大小写
变量使用规则
如果使用了一个没有声明的变量那么会在运行时报错
Uncaught ReferenceError: b is not defined
如果声明一个变量没有初始化那么这个变量的值就是undefined3、函数 ①内置函数 内置函数系统已经声明好了可以直接使用的函数。 [1]弹出警告框
alert(警告框内容);[2]弹出确认框 用户点击『确定』返回true点击『取消』返回false。
var result confirm(你确定要删除吗);
if(result) {console.log(点了确定);
}else{console.log(点了取消);
}[3]在控制台打印日志
console.log(日志内容);②声明函数 写法1
function sum(a, b) {return ab;
}写法2
var sum function() {return ab;
};写法2可以这样解读声明一个函数相当于创建了一个『函数对象』将这个对象的『引用』赋值给变量total。最后加的分号不是给函数声明加的而是给整体的赋值语句加的分号。
③调用函数 JavaScript中函数本身就是一种对象函数名就是这个『对象』的『引用』。而调用函数的格式是函数引用()。
var result sum(2, 3);4、对象 JavaScript中没有『类』的概念对于系统内置的对象可以直接创建使用。
①使用new关键字创建对象 // 创建对象var student01 new Object();// 给对象设置属性和属性值student01.stuName Lily;student01.stuAge 22;student01.stuSubject Java;// 在控制台输出对象console.log(student01);②使用{}创建对象 // 创建对象var obj02 {soldierName:Tom,soldierAge:25,soldierWeapon:gun};// 在控制台输出对象console.log(obj02);③给对象设置函数属性
// 创建对象
var obj01 new Object();// 给对象设置属性和属性值
obj01.stuName tom;
obj01.stuAge 20;
obj01.stuSubject java;obj01.study function() {console.log(this.stuName is studying);
};// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();
或者
// 创建对象
var obj02 {soldierName:john,soldierAge:35,soldierWeapon:gun,soldierShoot:function(){console.log(this.soldierName is using this.soldierWeapon);}
};// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();④this关键字 this关键字只有两种情况
在函数外面this关键字指向window对象代表当前浏览器窗口
在函数里面this关键字指向调用函数的对象// 直接打印this
console.log(this);// 函数中的this
// 1.声明函数
function getName() {console.log(this.name);
}// 2.创建对象
var obj01 {name:tom,getName:getName
};
var obj02 {name:jerry,getName:getName
};// 3.调用函数
obj01.getName();
obj02.getName();5、数组 ①使用new关键字创建数组
// 1.创建数组对象
var arr01 new Array();// 2.压入数据
arr01.push(apple);
arr01.push(orange);
arr01.push(banana);
arr01.push(grape);// 3.遍历数组
for (var i 0; i arr01.length; i) {console.log(arr01[i]);
}// 4.数组元素反序
arr01.reverse();
for (var i 0; i arr01.length; i) {console.log(arr01[i]);
}// 5.数组元素拼接成字符串
var arrStr arr01.join(,);
console.log(arrStr);// 6.字符串拆分成数组
var arr02 arrStr.split(,);
for (var i 0; i arr02.length; i) {console.log(arr02[i]);
}// 7.弹出数组中最后一个元素
var ele arr01.pop();
console.log(ele);②使用[]创建数组
// 8.使用[]创建数组
var arr03 [cat,dog,tiger];
console.log(arr03);6、JSON ①JSON格式的用途 在开发中凡是涉及到『跨平台数据传输』JSON格式一定是首选。
②JSON格式的说明 JSON数据两端要么是{}要么是[]{}定义JSON对象[]定义JSON数组。 JSON对象的格式是
{key:value,key:value,...,key:value}JOSN数组的格式是
[value,value,...,value]key的类型固定是字符串。 value的类型可以是基本数据类型或者引用类型JSON对象或JSON数组。
正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组所以JSON格式是可以『多层嵌套』的所以JSON格式不论多么复杂的数据类型都可以表达。
③JSON对象和JSON字符串互转 [1]JSON对象转JSON字符串
var jsonObj {stuName:tom,stuAge:20};
var jsonStr JSON.stringify(jsonObj);console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string[2]JSON字符串转JSON对象
jsonObj JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: tom, stuAge: 20}四、DOM
1、概念
①名词解释 DOM是Document Object Model的缩写意思是『文档对象模型』——将HTML文档抽象成模型再封装成对象方便用程序操作。
这是一种非常常用的编程思想将现实世界的事物抽象成模型这样就非常容易使用对象来量化的描述现实事物从而把生活中的问题转化成一个程序问题最终实现用应用软件协助解决现实问题。而在这其中『模型』就是那个连通现实世界和代码世界的桥梁。
②DOM树 浏览器把HTML文档从服务器上下载下来之后就开始按照『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』。
而第一个读取到的肯定是根标签html然后是它的子标签head再然后是head标签里的子标签……所以从html标签开始整个文档中的所有标签都会根据它们之间的『父子关系』被放到一个『树形结构』的对象中。 这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象document。
例如下面的标签结构
会被解析为
2、具体概念
①各个组成部分的类型 整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。
其实严格来说JavaScript并不支持真正意义上的『继承』这里我们借用Java中的『继承』概念从逻辑上来帮助我们理解各个类型之间的关系。 ②父子关系
③先辈后代关系
3、DOM操作 由于实际开发时基本上都是使用JavaScript的各种框架来操作而框架中的操作方式和我们现在看到的原生操作完全不同所以下面罗列的API仅供参考。
①在整个文档范围内查询元素节点 ②在具体元素节点范围内查找子节点 ③查找指定元素节点的父节点 ④查找指定元素节点的兄弟节点 ⑤属性操作 ⑥文本操作 ⑦DOM增删改操作 五、JavaScript事件驱动 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css#eventArea {border: 1px solid black;width: 100px;height: 100px;}/style/headbody!-- 用div作为鼠标移动区域 --div ideventArea/div!-- 在p标签内显示鼠标坐标 --p idshowData/p/bodyscript typetext/javascript// 根据id找到div标签对应的元素对象var divEle document.getElementById(eventArea);// 根据id找到p标签对应的元素对象var pEle document.getElementById(showData);// 声明事件响应函数function whenMouseMove(event){pEle.innerText event.clientX event.clientY;}// 将事件响应函数赋值给对应的事件属性 // onmousemove表示在鼠标移动的时候divEle.onmousemove whenMouseMove;/script
/html六、网页制作完全手册分享
百度网盘链接点击下载网页制作完全手册 提取码0909
