Web基础入门-JavaScript

简介: JavaScript(通常缩写为JS)是一种进阶的、直译的程式语言(动态执行语言与Python,Java等语言类似),JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支援物件导向程式设计,指令式编程,以及函式语言程式设计,它提供语法来操控文字、阵列、日期以及正则表达式等,不支援I/O,比如网络、储存和图形等,但这些都可以由它的宿主环境提供支援。它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实作语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器( Chrome、 IE、 Firefox、 Safari、Opera)支持。

JavaScript语言简述:
JavaScript(通常缩写为JS)是一种进阶的、直译的程式语言(动态执行语言与Python,Java等语言类似),JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支援物件导向程式设计,指令式编程,以及函式语言程式设计,它提供语法来操控文字、阵列、日期以及正则表达式等,不支援I/O,比如网络、储存和图形等,但这些都可以由它的宿主环境提供支援。它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实作语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器( Chrome、 IE、 Firefox、 Safari、Opera)支持。
JavaScript为Web2.0而生:
--1993年,国家超级电脑应用中心(NCSA)发表了NCSA
Mosica最早流行的图形介面网页浏览器,它在万维网的普及上发挥了重要作用。
--1995年,网景招募了布兰登·艾克,目标是把Scheme语言嵌入到Netscape Navigator浏览器当中。
最初命名为Mocha,1995年9月在Netscape Navigator 2.0的Beta版中改名为LiveScript,同年12月,Netscape Navigator 2.0 Beta 3中部署时被重新命名为JavaScript。
[以上内容来自wiki百科]
JavaScript教程:
在浏览器中调用Javascript,打开Chorm浏览器中的更多工具-开发者模式(Windows操作系统中使用F12)-console中执行一条JavaScript语句。
console.log("Hello World!")
JavaScript语言会被嵌入HTML前端代码中,一般由以下五种常见的形式:
直接插入代码块

加载外部 JS 文件

使用 HTML 标签中的事件属性

JavaScript数据类型:
var pi=new String;
var pi=new Number;
var pi=new Boolean;
var pi=new Array;
var pi=new Object;
var pi=3.14;
var pi='Hello JavaScript';
JavaScript编程逻辑:
if条件语句
if (condition)
{
代码块;
}
else
{
代码块;
}
switch 条件语句:
switch(n)
{
case 1:

代码块
break;

case 2:

代码块
break;

default:

代码块

}
for/for in 循环语句:
for (代码1;代码2;代码3)
{
代码块
}
for (x in xs)
{
代码块
}
while/do while 循环语句:
while (条件)
{
代码块
}
do
{
代码块
}
while (条件);
JavaScript打印数据:
函数:window.alert("TEST") document.write("TEST") console.log("TEST")
作用:弹出警告框 写入HTML文档 写入浏览器控制台
JavaScript框架:
更多JavaScript框架内容可以参考[JQuery,Angular,React,Vue菜鸟教程]
jQuery
jQuery 封装了常用的JS功能,通过选择器的机制来操纵DOM节点,完成复杂的前端效果展示。
jQuery 是一个JavaScript函数库。JQuery库包括了HTML元素选取,HTML 元素操作,CSS操作
HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改,AJAX,Utilities
Angular
AngularJS是一个JavaScript框架,AngularJS是以一个JavaScript文件形式发布的,可通过 script 标签添加到网页中,实现了前端的MVC架构,通过动态数据绑定来简化数据转递流程。

React
利用组件来构建前端UI的框架,React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于2013年5月开源。
React项目开源地址:https://github.com/facebook/react/
Vue
Vue是一套构建用户界面的渐进式框架,Vue只关注视图层,采用自底向上增量开发的设计。
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
JavaScript DOM和BOM
DOM:文档对象模型,JS通过操纵DOM可以动态获取、修改HTML中的元素、属性、CSS样式,这种修改有时会带来XSS攻击风险。
BOM:浏览器对象模型,类比于DOM,赋予JS对浏览器本身进行有限的操纵,获取Cookie、地理位置、系统硬件或浏览器插件信息等。
JavaScript混淆:
混淆前的代码:console.log('Hello World!');
混淆后的代码:console"\x6c\x6f\x67";
加密后的代码:
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p;}('1.0(\'3 2!\');',4,4,'log|console|World|Hello'.split('|'),0,{}))
无论JS代码被如何加密都会被浏览器执行。
JavaScript代码混淆开源项目介绍:
JavaScript 混淆器
https://github.com/javascript-obfuscator/javascript-obfuscator
JavaScript Obfuscator 是一款功能强大的免费 JavaScript 混淆器,包含多种功能,可为您的源代码提供保护。
JavaScript代码在线混淆站:ChinaZ.com
https://tool.chinaz.com/tools/jscodeconfusion.aspx
混淆前的代码:
window.alert("XSS")
混淆后的代码:
window"\x61\x6c\x65\x72\x74"
本地运行JavaScript代码:
Node是JS语言的编译器,我们能通过NodeJS运行JS代码[Node]https://nodejs.org/en/download/
1.在任意一个编辑软件中编写JS代码,并保存为test.js
console.log("Hello World");
2.执行JavaScript:
node test.js
JavaScritp安全问题:
参考资料:
CTF-ALL-IN-ONE
[中文维基百科JavaScript]https://zh.m.wikipedia.org/zh-hk/JavaScript
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript

目录
相关文章
|
2月前
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
|
11天前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
27 6
Spring Boot 入门:简化 Java Web 开发的强大工具
|
14天前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
17天前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
31 4
|
17天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
31 2
|
2月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
44 1
JavaScript控制台:提升Web开发技能的秘密武器
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
35 4
|
2月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
47 12
|
2月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
25 1
|
2月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用