初学JavaWeb需要的前端js,JavaScript是什么样的?

文章目录

    • 一、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>
<html><head><meta charset="utf-8"><title>HelloWorld</title></head><body><!-- 在HTML代码中定义一个按钮 --><button type="button" id="helloBtn">SayHello</button></body><!-- 在script标签中编写JavaScript代码 --><script type="text/javascript">// document对象代表整个HTML文档// document对象调用getElementById()方法表示根据id查找对应的元素对象var btnElement = document.getElementById("helloBtn");// 给按钮元素对象绑定单击响应函数btnElement.onclick = function(){// 弹出警告框alert("hello");};</script>
</html>

3、显示效果
在这里插入图片描述


三、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" type="text/javascript" charset="utf-8"></script><script type="text/javascript">	// 调用外部JavaScript文件中声明的方法showMessage();
</script>

2、声明和使用变量
①JavaScript数据类型
基本数据类型

数值型:JavaScript不区分整数、小数字符串:JavaScript不区分字符、字符串;单引号、双引号意思一样。布尔型:true、false在JavaScript中,其他类型和布尔类型的自动转换。true:非零的数值,非空字符串,非空对象false:零,空字符串,null,undefined

引用类型

所有new出来的对象
用[]声明的数组
用{}声明的对象

②变量
关键字:var
数据类型:JavaScript变量可以接收任意类型的数据
标识符:严格区分大小写

变量使用规则:

如果使用了一个没有声明的变量,那么会在运行时报错
Uncaught ReferenceError: b is not defined
如果声明一个变量没有初始化,那么这个变量的值就是undefined

3、函数
①内置函数
内置函数:系统已经声明好了可以直接使用的函数。
[1]弹出警告框

alert("警告框内容");

[2]弹出确认框
用户点击『确定』返回true,点击『取消』返回false。

var result = confirm("你确定要删除吗?");
if(result) {console.log("点了确定");
}else{console.log("点了取消");
}

[3]在控制台打印日志

console.log("日志内容");

②声明函数
写法1:

function sum(a, b) {return a+b;
}

写法2:

var sum = function() {return a+b;
};

写法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>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#eventArea {border: 1px solid black;width: 100px;height: 100px;}</style></head><body><!-- 用div作为鼠标移动区域 --><div id="eventArea"></div><!-- 在p标签内显示鼠标坐标 --><p id="showData"></p></body><script type="text/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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/347412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

踩坑+排雷新版IDEA2021.1创建配置Javaweb项目并部署在Tomcat容器,完整详细

前些天发现了十分不错的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;没有广告&#xff0c;分享给大家&#xff0c;大家可以自行看看。&#xff08;点击跳转人工智能学习资料&#xff09; 微信公众号&#xff1a;创享日记 发送&#xff1a;tomcat 获取…

微机原理实验1:字符串匹配程序实验

一、实验目的 1&#xff0e;掌握分支程序的设计方法。 2&#xff0e;熟悉在PC机上建立、汇编、链接、调试和运行8086汇编程序的过程。 二、实验内容 1&#xff0e;比较两个字符串STRING1和STRING2所含的字符是否相同&#xff0c;若相同则显示‘Match’&#xff0c;否则显示‘…

终于让Web前端和Tomcat(Java服务器)和MySQL(数据库)连在一起了

文章目录一、先在Web前端来个表单二、添加Tomcat依赖三、引入jdbc和dbutils四、编写Servlet类五、关联模块《踩坑排雷新版IDEA2021.1创建配置Javaweb项目并部署在Tomcat容器》 一、先在Web前端来个表单 如图在web项目目录下创建一个html文件。 文件内容可以参考如下。 <!D…

微机原理实验2:多字节BCD加法实验

一、实验目的 掌握数据传送、算术指令和循环指令的用法。 二、实验内容 将两个多位十进制数相加。要求加数,被加数均以ASCII码形式存放在以DATA1和DATA2为首的5个内存单元中( 低位在前)&#xff0c;结果存在DATA1处。 三、程序清单 CRLF MACRO …

微机原理实验3:键盘输入与显示实验

一、实验目的 了解移位指令的使用方法。 掌握子程序的调用方法&#xff0c;了解子程序的入口参数和出口参数。 二、实验内容 将键盘接收的四位十六进制数转换为二进制数&#xff0c;并显示在屏幕上。 三、程序清单 CRLF MACRO ;建立宏命令&a…

【JavaWeb】HTTP协议请求响应全解

文章目录一、HTTP简介二、请求报文三、请求方式四、媒体类型五、响应报文一、HTTP简介 HTTP&#xff1a;Hyper Text Transfer Protocol 超文本传输协议。HTTP最大的作用就是确定了请求和响应数据的格式。浏览器发送给服务器的数据&#xff1a;请求报文&#xff1b;服务器返回给…

【JavaWeb】一文Servlet全解:继承关系、生命周期、容器和请求转发与重定向等

文章目录一、Servlet 概述二、Servlet HelloWorld三、Servlet 继承关系四、Servlet 生命周期五、ServletConfig 和 ServletContext六、请求转发与重定向七、获取请求参数一、Servlet 概述 1、Servlet名字 Servlet Server applet Server&#xff1a;服务器 applet&#xff1a;…

微机原理实验4:统计学生成绩

一、实验目的 掌握比较综合性的汇编程序设计流程&#xff0c;以及多分支情况下程序的设计技巧。 二、实验内容 设计程序统计学生数学成绩。分别归类90-99分、80-89分、70-79分、60-69分及60分以下&#xff0c;并将各段的人数及成绩存入对应的内存单元中&#xff0c;并在屏幕…

Spring Boot的Spring Data JPA示例

1.简介 在本文中&#xff0c;我们将演示如何利用功能强大的Spring Data JPA API与本课程中的数据库&#xff08;内存中的H2数据库&#xff09;进行交互。 Spring Data JPA提供了一组非常强大且高度抽象的接口&#xff0c;用于与任何基础数据库进行交互。 数据库可以是MySQL&am…

为什么写路径这事有点复杂?动态Web工程内编写路径【JavaWeb】

文章目录一、为什么要写路径&#xff1f;二、为什么写路径这事有点复杂&#xff1f;三、准则四、写路径的步骤五、动态获取上下文路径一、为什么要写路径&#xff1f; 整个系统要根据功能拆分成许许多多独立的资源资源之间既要完成自身的功能又要和其他资源配合写路径就是为了从…

Windows编程初步(一)

第一节&#xff1a;安装帮助文档 使用C语言进行Windows开发&#xff0c;必然使用到WindowsSDK。Windows SDK指Windows开发人员工具包&#xff0c;是为使用C语言开发Windows程序所提供的工具集。里面提供的工具异常全面丰富&#xff0c;很少有人能全部了解&#xff0c;在开发Wi…

2022大学生免费(24元)申请个人软著专利(微信小程序)

文章目录一、发放的软著证书二、申请流程概览三、官网提交申请四、纸质材料打印五、纸质材料邮寄六、模板及代码统计工具点击查看《再易江南》微信小程序 一、发放的软著证书 挂号信封 软著证书 点击查看《再易江南》微信小程序 二、申请流程概览 一般情况下&#xff0c;按照文…

Windows编程初步(二)

第二节&#xff1a;简单的Windows程序&#xff08;二&#xff09; 下面为这个程序增加一个菜单项&#xff1a; 首先设计用户菜单。在工作区里找到资源视图。点击Menu左边的号&#xff0c;双击出现的IDC_WIN_STEP1菜单。 图7 资源视图中的菜单 将help右边的虚框拖入左侧File菜…

Java数字分类给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字:A1 = 能被5整除的数字中所有偶数的和;A2 = 将被5除后余1的数字按给出顺序进行交错求和,即计算n1-n2+n3

题目描述&#xff1a; 给定一系列正整数&#xff0c;请按要求对数字进行分类&#xff0c;并输出以下5个数字&#xff1a; A1 能被5整除的数字中所有偶数的和&#xff1b; A2 将被5除后余1的数字按给出顺序进行交错求和&#xff0c;即计算n1-n2n3-n4…&#xff1b; A3 被5除后…

Windows编程之互动与动画

第五节&#xff1a; 考虑屏幕左侧一台坦克&#xff0c;向水平方向发射一枚炮弹,穿越屏幕。 很自然地&#xff0c;这场景中有坦克和炮弹两个对象&#xff0c;各自有各自坐标&#xff0c;坦克坐标是固定的&#xff0c;而炮弹坐标是变化的。因此有两个结构体类型&#xff1a;Tank…

Java福尔摩斯的约会大侦探福尔摩斯接到一张奇怪的字条:“我们约会吧 3485djDkxh4hhGE 2984akDfkkkkggEdsb shgsfdk dHyscvnm”。大侦探很快就明白了

题目描述&#xff1a; 大侦探福尔摩斯接到一张奇怪的字条&#xff1a;“我们约会吧&#xff01; 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm”。大侦探很快就明白了&#xff0c;字条上奇怪的乱码实际上就是约会的时间“星期四 14:04”&#xff0c;因为前面…

Windows编程之网络之邮件槽通讯

第6节 使用邮件槽传输数据 网络通讯的理论很复杂&#xff0c;可是初学者不考虑性能的话&#xff0c;可以使用很简单的模式。一般而言网络通讯有两种模式&#xff0c;点对点模式或者广播模式。点对点模式就像一对一辅导&#xff0c;双方都能听清楚对方说什么&#xff0c;并作出…

java 批量处理 示例_Java异常处理教程(包含示例和最佳实践)

java 批量处理 示例异常是可能在程序执行期间发生的错误事件&#xff0c;它会破坏其正常流程。 Java提供了一种健壮且面向对象的方式来处理异常情况&#xff0c;称为Java异常处理 。 我们将在本教程中研究以下主题。 Java异常处理概述 异常处理关键字 异常层次 有用的异常方…

Windows编程之多媒体

一、语音接口的使用: 第一步&#xff0c;安装MSSpeech SDK。 MSSpeech SDK可从网络课堂安装&#xff0c;也可在微软公司直接下载&#xff0c;安装完毕后具有了语音处理能力。 安装过程全选默认即可。 安装完毕后&#xff0c;在开始菜单中会增加MS Speech SDK 5.1&#xff0…

Windows编程之调用Matlab

一、选择matlab&#xff1a; 注意。Matlab的安装需要较长时间&#xff0c;建议本拓展在同学们自己的电脑上运行。 Matlab是大多数工科学生必修的科目&#xff0c;是一个口碑极佳的数学计算工具&#xff0c;可以支持立即运算和程序设计两种形式。Matlab较新的版本均提供32位版本…