JavaScript web 开发人员必须学习的 3 门语言中的一门:
HTML定义了网页的内容CSS描述了网页的布局JavaScript网页的行为1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript ,这个版本就是1.0版。
ECMAScript 和 JavaScript 的关系是,ECMAScript 是一个简单的 JavaScript 标准规范,JavaScript 是 ECMAScript 的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript )。并且,ECMAScript 持续不断的为 JavaScript 添加新功能。
(资料图片)
从 1997年7月 ECMAScript 1.0发布到现在,ECMAScript 已经正式发布了 11 版,下面我们主要介绍从ES6(ES2015)到ES11(最新 ES2020 )期间,每版发布的新功能。
ES6、ES7、ES8、ES9、ES10新特性一览:https://juejin.cn/post/6844903811622912014
本文并没有详细介绍每个知识点,因为官方的文档介绍的更好,建议前往学习(https://www.w3cschool.cn/javascript/),本文主要记录一些重点内容和细节。
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的
和 部分中。那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件。可以在 Chrome 浏览器中创建一个脚本来执行,在开发者工具中点击 Sources 面板,选择 Snippets 选项卡,在导航器中右击鼠标,然后选择 Create new snippet 来新建一个脚本文件。
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert()弹出警告框。使用 document.write()方法将内容写到 HTML 文档中。使用 innerHTML写入到 HTML 元素。使用 console.log()写入到浏览器的控制台。document.getElementById("demo")是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。innerHTML = "Paragraph changed."是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
使用document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。出于测试目的,您可以将JavaScript直接写在HTML 文档中。
我的第一个段落。
<script>
document.write(Date());
</script>
请使用 document.write()仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
在 JavaScript 中有 5 种不同的数据类型:
stringnumberbooleanobjectfunction3 种对象类型:
ObjectDateArray2 个不包含任何值的数据类型:
nullundefined可以使用 typeof操作符来查看 JavaScript 变量的数据类型。
请注意:
NaN 的数据类型是 number数组(Array)的数据类型是 object日期(Date)的数据类型为 objectnull 的数据类型是 object未定义变量的数据类型为 undefinedconstructor属性返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }(3.14).constructor // 返回函数 Number() { [native code] }
可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1;}
字符串(String)字面量可以使用单引号或双引号。函数(Function)字面量定义一个函数,如:function myFunction(a, b) { return a * b;}。var关键词告诉浏览器创建一个新的变量,如var x=5;。可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可,声明也可横跨多行,如:var lastname="Doe", age=30, job="carpenter";。
JavaScript 使用 Unicode 字符集。Unicode 覆盖了所有的字符,包含标点等字符。JavaScript 中,常见的是驼峰法的命名规则。JavaScript 对大小写是敏感的。
JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。在 JavaScript 中,用分号来结束语句是可选的。
可以在文本字符串中使用反斜杠对代码行进行换行。单行注释以 // 开头。多行注释以 /* 开始,以 */ 结尾。
无值的变量。未使用值来声明的变量,其值实际上是 undefined。如果重新声明 JavaScript 变量,该变量的值不会丢失。
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。局部变量比同名全局变量的优先级高,所以局部变量会隐藏同名的全局变量。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
你的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。局部变量,包括 window 对象可以覆盖全局变量和函数。
全局方法 String()可以将其它类型的变量转换为字符串。String(123) // 将数字 123 转换为字符串并返回
将其它类型变量的 方法toString()也是有同样的效果。(123).toString()
全局方法 Number()可以将字符串转换为数字。空字符串转换为 0。其他的字符串会转换为 NaN (不是个数字)。parseFloat()和parseInt(),如parseInt("10")
全局方法 Number()可将布尔值和日期转换为数字。
Operator +可用于将变量转换为数字。
var y = "5"; //stringvar x = + y; //number
当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。
5 + null // 返回 5 because null is converted to 0"5" + null // 返回"5null" because null is converted to "null""5" + 1 // 返回 "51" because 1 is converted to "1" "5" - 1 // 返回 4 because "5" is converted to 5
在 JavaScript 中 null 表示 "什么都没有",是一个只有一个值的特殊类型,表示一个空对象引用。当设置为“null”时,可以用来清空对象
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法。
isNaN(x)可以判断是否为NaN
js支持自增和自减运算符、三目运算符。===是绝对等于(值和类型均相等)
把十进制转换为二进制
function dec2bin(dec){ return (dec >>> 0).toString(2); }
把二进制转换为十进制
function bin2dec(bin){ return parseInt(bin, 2).toString(10); }
js支持for、while、do...while、for in、switch、break、continue等控制语句。Switch case 使用严格比较(===)。
var person={fname:"John",lname:"Doe",age:25};for (x in person){ txt=txt + person[x];}
下面的代码创建名为 cars 的数组:
var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
var cars=["Saab","Volvo","BMW"];
对象属性有两种寻址方式:
name=person.lastname;name=person["lastname"];
声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
可以使用索引位置来访问字符串中的每个字符:var character = carname[7];
可以在字符串添加转义字符来使用引号:var answer = "It\"s alright";
可以使用内置属性 length来计算字符串的长度
可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John"),不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用,如不是绝对等于(===)。
字符串有很多方法,如charAt()和indexOf(),参考:https://www.w3cschool.cn/javascript/js-strings.html
function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("姓必须填写");return false;}}
如需标记 JavaScript 语句,请在语句之前加上冒号:label:statements
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
cars=["BMW","Volvo","Saab","Ford"];list:{document.write(cars[0] + "
"); document.write(cars[1] + "
"); document.write(cars[2] + "
"); break list;document.write(cars[3] + "
"); document.write(cars[4] + "
"); document.write(cars[5] + "
"); }
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
参考:https://www.w3cschool.cn/jsref/dom-obj-event.html
javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。
href="#"与href="javascript:void(0)"的区别
#包含了一个位置信息,默认的锚是#top也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 #来定位页面的具体位置,格式为:# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
点我!,在用户点击链接后显示警告信息
function getValue(){var a,b,c;a = void ( b = 5, c = 7 );document.write("a = " + a + " b = " + b +" c = " + c );}
输出:a = undefined b = 5 c = 7
正则表达式是由一个字符序列形成的搜索模式。字面量的形式(var patt = /school/i)和构造函数形式等价(var patt1=new RegExp("school", "i");)。
var patt = /school/i
/school/i是一个正则表达式。
school是一个模式 (用于检索)。
i是一个修饰符 (搜索不区分大小写)。
在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子字符串的起始位置。
var str = "Visit school";var n = str.search(/school/i);
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式,这时区分大小写,如var n = str.search("school");
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子字符串。
使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 school :var str = "Visit Microsoft!";var res = str.replace(/microsoft/i, "school");
replace() 方法将接收字符串作为参数:varres = str.replace("Microsoft","school");
在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。
test() 方法是一个正则表达式方法。test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
var patt = /e/;patt.test("The best things in life are free!");
或
/e/.test("The best things in life are free!")
exec() 方法是一个正则表达式方法。exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
/e/.exec("The best things in life are free!");
字符串中含有 "e",所以该实例输出为: e
compile() 方法用于改变 RegExp。compile() 既可以改变检索模式,也可以添加或删除第二个参数。var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));patt1.compile("d");document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e",而没有 "d",以上代码的输出是:truefalse
try{ //在这里运行代码
}catch(err){
//在这里处理错误
}
throw 语句允许我们创建自定义错误。创建或抛出异常(exception)。
如果把 throw 与 try 和 catch 一起使用,那么能够控制程序流,并生成自定义的错误消息。
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
在浏览器调试窗口中,你可以设置 JavaScript 代码的断点。
debugger关键字用于停止执行 JavaScript,并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用,debugger 语句将无法工作。
var x = 15 * 5;debugger;document.getElementbyId("demo").innerHTML = x;
React 使用一种名为 JavaScript XML (JSX) 的特殊语法。 借助 JSX,你可将 HTML(或可能会创建的自定义组件)和 JavaScript 集成到一个文件中,甚至可以集成到单个代码行中。 通过使用 JSX,你可以依赖 JavaScript 语法来实现逻辑。
浏览器本机不支持 JSX。 因此,必须从 JSX 文件生成 JavaScript 和 HTML,才能由浏览器呈现它们。 有几种捆绑程序和其他工具可以执行所需完成的任务。 这些工具包括Webpack和Snowpack。
参考:
https://www.w3cschool.cn/react_tutorial/dotlhozt.html
https://www.papermachined.com/React/1.html#%E4%BB%80%E4%B9%88%E6%98%AFjsx
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,当前使用的比较广泛。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。
虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。了解ES6语法之前,我们得先了解下Babel。Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel,具体过程可直接在Babel官网查看。
最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
ES6特性学习参考:
https://segmentfault.com/a/1190000004365693
https://segmentfault.com/a/1190000004368132
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
学习地址:https://www.w3school.com.cn/jquery/index.asp
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择,是由jquery官方维护的ui方向的插件,是免费的界面库。
jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。
官网:https://www.jqueryui.org.cn/
学习地址:https://www.runoob.com/jqueryui/jqueryui-tutorial.html
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,是第三方维护的插件,商业应用要钱的界面库。
jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。本教程将告诉您如何使用 jQuery EasyUI 框架创建应用。
官网:https://www.jeasyui.net/
学习地址:https://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html
javascript知识图谱:https://www.w3cschool.cn/javascript/javascript-skillmap.html
w3cschool:https://www.w3cschool.cn/javascript/
w3cschool:https://www.w3school.com.cn/js/index.asp
菜鸟教程:https://www.runoob.com/js/js-tutorial.html
Copyright © 2015-2022 北冰洋公益网版权所有 备案号:沪ICP备2020036824号-3 联系邮箱:562 66 29@qq.com