技术标签: css 1024程序员节 JavaScript html javascript
感激相遇
你好
我是阿Ken
于2020年10月24日特此创建 JavaScript 专栏以庆祝10.24程序员节
之后将会持续更新
期待与您再次相逢
以学校相关教材为主整理,帮助 CSDN 小伙伴入门及复习
_
每个人都是一座孤岛
而弱者扎堆
强者自强
JavaScript是Web开发领域中的一种功能强大的编程语言,主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页上,大多数的交互逻辑几乎都是由JavaScript实现的。
语言 | 作用 及说明 |
---|---|
HTML | 结构_决定网页的结构和内容,相当于人的身体 |
CSS | 样式-_决定网页呈现给用户的模样,相当于给人穿衣服,化妆 |
JavaScript | 行为_实现业务逻辑和页面控制,相当于人的各种动作 |
JavaScript内嵌于HTML网页中,通过浏览器内置的JavaScript引擎进行解释执行,把一个原本只用来显示的页面转变成支持用户交互的页面程序。
1995年,Netscape(网景)公司(现在的Mozilla公司)的布兰登·艾奇在网景导航者浏览器上首次设计出了JavaScript。
_
Netscape 最初将这个脚本语言命名为LiveScript,后来Netscape公司与Sun公司(2009年被Oracle公司收购)合作之后将其改名为JavaScript。
_
这是由于当时Sun公司推出的Java语言备受关注,Netscape 公司为了营销借用了 Java 这个名称。实际上,JavaScript 与 Java 的关系就像雷峰塔与雷锋。它们本质上是两种不同的编程语言。
JavaScript 是由 ECMAScript、DOM、 BOM 三部分组成的。
接下来我们对 JavaScript 的组成进行简单的介绍。
(1 ) ECMAScript : 是 JavaScript 的核心。ECMAScript 规定了JavaScript 的编程语法和基础核心内容,是所有浏览器厂商共同遵守的一套 JavaScript 语法工业标准。
(2) DOM : 文档对象模型,是 W3C 组织推荐的处理可扩展标记语言的标准编程接口,通过 DOM 提供的接口,可以对页面上的各种元素进行操作(如大小、位置、颜色等)。
(3) BOM : 浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM,可以对浏览器窗口进行操作 (如弹出框、控制浏览器导航跳转等)。
工欲善其事,必先利其器,一款优秀的开发工具能够极大提高程序开发效率与体验。在 Web 前端开发中,常用的开发工具有 Visual Studio Code、Sublime Text、HBuilder 等,接下来我们就来介绍这些开发工具的特点。
Visual Studio Code (简称VS Code) 是一款由微软公司开发的,功能十分强大的轻量级编辑器。该编辑器提供了丰富的快捷键,集成了语法高亮、可定制热键绑定、括号匹配以及代码片段收集的特性,并且支持多种语法和文件格式的编写。
Sublime Text 是一个轻量级的代码编辑器,具有友好的用户界面,支持拼写检查、书签、自定义按键绑定等功能,还可以通过灵活的插件机制扩展编辑器的功能,其插件可以利用 Python 语言开发。Sublime Text 是一个跨平 台的编辑器,支持 Windows、Linux、macOS 等操作系统。
HBuider 是由 DCloud (数字天堂) 公司推出的一款支持 HTML5 的 Web 开发编辑器,在前端开发、移动开发方面提供了丰富的功能和贴心的用户体验,还为基于 HTML5 的移动端 App 开发提供了良好的支持。
Adobe Dreamweaver 是一个集网页制作 和网站管理于一身的所见即所得的网页编辑器,用于帮助网页设计师提高网页制作效率,简化网页开发的难度和学习HTML5 、CSS 的门槛。但缺点是可视化编辑功能会产生大量冗余代码,而且不适合开发结构复杂、需要大量动态交互的网页。
WebStorm 是 JetBrains 公司推出的一款 Web 前端开发工具,JavaScript、HTML5 开发是其强项,支持许多流行的前端技术,如 jQuery、Prototype、Less 、Sass、AngularJS、 ESLint、webpack等。
行内式是指将单行或少量的 JavaScript 代码写在 HTML 标签的事件属性中(也就是以 on 开头的属性,如 onclick)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
<body>
<input type="button" value="点我" οnclick="alert('行内式')“>
</body>
</head>
</html>
使用行内式编写 JavaScript 代码。实现:单击一个按钮后,弹出一个警告框,显示一些提示信息
第四行声明了网页的编码为 UTF-8,帮助浏览器正确识别网页的编码。在声明编码后,还需要确保文件本身的编码也是 UTF-8。目前大多数代码编辑器新建的文件,编码默认都是UTF-8。另外 Windows 记事本默认的编码是ANSI,在记事本中编写的网页容易出现乱码,因此读者应杜绝使用记事本编写代码文件。
使用行内式需要注意:
内嵌式是只使用 < script > 标签包裹 JavaScript 代码,< script > 标签可以把标签可以写在 < head > 或 < body > 标签中。通过内嵌式,可以将多行 JavaScript 代码写在 < script > 标签中。内嵌式是学习 JavaScript 最常使用的方式。
<head>
......
<script>
alert('内嵌式');
</script>
</head>
第四行是一条 JavaScript 语句,其末尾的分号表示该语句结束,后面可以编写下一条语句。< script > 标签还有一个 type 属性,在HTML5 中,该属性的默认值为 " text / JavaScript ",因此在编写时可以省略 type 属性。
外部式是将 JavaScript 代码写在一个单独的文件中,一般使用 ” js “ 作为文件的扩展名。在 html 页面中使用 < script > 标签进行引入,适合 JavaScript 代码量比较多的情况。
外部式的是 < script > 标签内不可以编写 JavaScript 代码
<head>
......
<script src="test.js"></script>
</head>
和
alert('外部式');
在 html 中还有一种嵌入 JavaScript 代码的方法,就是使用伪协议。
<a href="javascript:alert('伪协议')">点我</a>
在代码中,href 属性中的 “ JavaScript ” 就表示伪协议,后面一段 JavaScript 代码,当单击这个超链接后就会弹出 alert 警告框。在实际开发中不推荐使用这种方式。
在编写JavaScript代码时,应注意基本的语法规则,避免程序出错,具体如下:
<script>
alert('Hello,JavaScript'); // 输出Hello,JavaScript
</script>
<script>
alert('Hello,JavaScript');
/* 输出
Hello,JavaScript
*/
</script>
语句 | 说明 |
---|---|
alert(’msg‘) | 浏览器弹出警告框 |
console.log(’msg‘) | 浏览器控制台输出信息 |
prompt (‘msg’) | 浏览器弹出输出框,用户可以输入内容 |
<script>
alert("这是一个警告框");
console.log ('在控制台输出信息');
prompt ('这是一个输入框');
document.write("输出语句");
</script>
在浏览器的控制台中可以直接输入 JavaScript 代码来执行。
变量是程序在内存中申请的一块用来存放数据的空间
var age; // 声明变量
age = 10; // 为变量赋值
alert(age); // 使用alert()警告框输出age的值
console.log(age); // 将age的值输出到控制台中
var age = 10; //声明变量同时赋值
<script>
var myName = '小明'; //名称
var address = 'xx市xx区'; //地址
var age = 18; //年龄
var email = 'xiaoming@localhost'; //电子邮箱
console.log(myName);
console.log(address);
console.log(age);
console.log(email); //输出相应的值
</script>
<script>
var myName = prompt('请输入您的名字');
alert(myName);
</script>
var myName = '小明'; //变量赋初值
console.log (myName); //输出结果:小明
var myName = '李华'; //更新变量的值
console.log (myName) //输出结果:小红
var myName,age,email; //同时声明多个变量,不赋值
var myName = '小明',
age = 18,
email = 'xiaoming@localhost';
(1)只声明变量,但不赋值,则输出变量时,结果为 undefined
var age;
console.log (age); //输出结果:undefined
(2) 不声明变量,直接输出变量的值,则程序会出错
console.log (age);
如果前一行代码出错,则后面的代码不会执行。因此,在开发中,如果代码没有按照期望的执行,可以打开控制台看一下是否有错误提示,找到具体是哪一行出错了
(3)不声明变量,只进行赋值
age1 = 10; //变量age1没有使用var进行声明
console.log (age1); //输出结果:10
从输出结果可以看出,直接赋值一个未声明的变量,也可以正确输出变量的值。这个情况是 JavaScript 语言的特性,学到全局作用域、window 对象的时候就理解了
在对变最进行命名时,需要遵循变量的命名规范,从而避免代码出错,以及提高代码的可读性
①由字母、数字、下划线和美元符号($)组成,如age、num。
②严格区分大小写,如app和App是两个变量。
③不能以数字开头,如18age是错误的变量名。
④不能是关键字、保留字,如var、for、 while 等是错误的变量名。
⑤要尽量做到“见其名知其意”,如age表示年龄,num表示数字。
⑥建议遵循驼峰命名法,首字母小写,后面的单词首字母大写,如myFirsName。
在 JavaScript 中,关键字分为“保留关键字”和“未来保留关键字”。保留关键字是指在 JavaScript 语言中被事先定义好并赋予特殊含义的单词, 不能作为变量名使用。
未来保留关键字是指 ECMAScript 规范中预留的关键字,目前它们没有特殊功能,但是在未来的某个时间可能会加上。
未来保留关键字建议不要当作变量名来使用,以避免未来它们转换成关键字时出错。
标识符
在 JavaScript 中还有一个标识符的概念。标识符是指开发人员为变量、函数取的名字。例如,变量名 age 就是一个标识符。从语法上来说,不能使用关键字作为标识符,否则会出现语法错误。
文章浏览阅读2.9k次,点赞8次,收藏14次。测试主要做什么?这完全都体现在测试流程中,同时测试流程是面试问题中出现频率最高的,这不仅是因为测试流程很重要,而是在面试过程中这短短的半小时到一个小时的时间,通过测试流程就可以判断出应聘者是否合适,故在测试流程中包含了测试工作的核心内容,例如需求分析,测试用例的设计,测试执行,缺陷等重要的过程。..._测试过程管理中包含哪些过程
文章浏览阅读870次,点赞16次,收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段,对政府政务进行数字化改革,提高政府工作效率,提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展,政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域,包括政策决策、政府服务、公共安全、社会治理等。在这些领域,人工...
文章浏览阅读219次,点赞2次,收藏4次。系统主要的用户为用户、管理员,他们的具体权限如下:用户:用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试,并且查看相关成绩用户可以进行错题集的整理管理员:管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析,并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件
文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式,UML2功能更强大,但是两者生成过程差别不大1.建立Test工程,如下图,uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图
文章浏览阅读174次。需求:一个topic包含很多个表信息,需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project,只有data和name。因为担心data里面会空值,所以根同事商量,让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区,proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka
文章浏览阅读380次。原标题:Java Spring中同时访问多种不同数据库 多样的工作要求,可以使用不同的工作方法,只要能获得结果,就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题,有时是必须把数据归档到某种数据仓库中,有时是要把数据变更推送到第三方数据库中。使用Spring框架时,使用单一数据库是非常容易的,但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库
文章浏览阅读3.6k次,点赞9次,收藏25次。本案例描述了晶振屏蔽以及开关电源变压器屏蔽对系统稳定工作的影响, 硬件设计时应考虑。_eft电路图
文章浏览阅读1.1k次。对于物料价格的更改,可以采取不同的手段:首先,我们来介绍MR21的方式。 需要说明的是,如果要对某一产品进行价格修改,必须满足的前提条件是: ■ 1、必须对价格生效的物料期间与对应会计期间进行开启; ■ 2、该产品在该物料期间未发生物料移动。执行MR21,例如更改物料1180051689的价格为20000元,系统提示“对于物料1180051689 存在一个当前或未来标准价格”,这是因为已经对该..._mr21 对于物料 zba89121 存在一个当前或未来标准价格
文章浏览阅读7.4k次,点赞3次,收藏13次。[文章导读]联想启天M420是一款商用台式电脑,预装的是win10系统,用户还是喜欢win7系统,该台式机采用的intel 8代i5 8500CPU,在安装安装win7时有很多问题,在安装win7时要在BIOS中“关闭安全启动”和“开启兼容模式”,并且安装过程中usb不能使用,要采用联想win7新机型安装,且默认采用的uefi+gpt模式,要改成legacy+mbr引导,那么联想启天M420台式电..._启天m420刷bios
文章浏览阅读2.7k次,点赞2次,收藏9次。一,为什么要冗余数据互联网数据量很大的业务场景,往往数据库需要进行水平切分来降低单库数据量。水平切分会有一个patition key,通过patition key的查询能..._保证冗余性
文章浏览阅读88次。是时候闭环Java应用了 原创 2016-08-16 张开涛 你曾经因为部署/上线而痛苦吗?你曾经因为要去运维那改配置而烦恼吗?在我接触过的一些部署/上线方式中,曾碰到过以下一些问题:1、程序代码和依赖都是人工上传到服务器,不是通过工具进行部署和发布;2、目录结构没有规范,jar启动时通过-classpath任意指定;3、fat jar,把程序代码、配置文件和依赖jar都打包到一个jar中,改配置..._那么需要把上面的defaultjavatyperesolver类打包到插件中
文章浏览阅读909次。1.得下载一个番茄插件,按alt+g才可以有函数跳转功能。2.不安装番茄插件,按F12也可以有跳转功能。3.进公司的VS工程是D:\sync\build\win路径,.sln才是打开工程的方式,一个是VS2005打开的,一个是VS2013打开的。4.公司库里的线程接口,在CmThreadManager.h 里,这个里面是我们的线程库,可以直接拿来用。CreateUserTaskThre..._番茄助手颜色