网站 备案号查询,网站推广方法素材,手机网站建站价格,wordpress显示不正常文章目录 一、JavaScript介绍二、JavaScript简介1.ECMAScript和JavaScript的关系2.ECMAScript的历史3.什么是Javascript#xff1f;4.JavaScript的作用?5.JavaScript的特点 三、JavaScript基础1.注释语法2.JavaScript的使用 四、JavaScript变量与常量变量关键字var和let的区别… 文章目录 一、JavaScript介绍二、JavaScript简介1.ECMAScript和JavaScript的关系2.ECMAScript的历史3.什么是Javascript4.JavaScript的作用?5.JavaScript的特点 三、JavaScript基础1.注释语法2.JavaScript的使用 四、JavaScript变量与常量变量关键字var和let的区别常量 五、JavaScript数据类型1.数值类型(Number)2.字符类型(String)常见内置方法 3.布尔值(Boolean)4.对象(Object)5.自定义对象6.数组数组常用内置方法 六、运算符算术运算符比较运算符逻辑运算符赋值运算符 七、流程控制分支结构switch分支循环结构for循环while循环三元表达式 八、JavaScript函数函数的语法函数的参数传递匿名函数箭头函数函数中的arguments参数JavaScript函数的特点JavaScript函数的全局变量和局部变量补充知识 九、JavaScript中的内置对象Date对象Json对象RegExp正则对象 一、JavaScript介绍 JavaScript也可以简称为JS是一种浏览器解释型语言嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果用户交互及前后端的数据传输等。 JavaScript实际与Java在使用上没有任何关系但是起源却有些联系感兴趣可以看看https://blog.csdn.net/kese7952/article/details/79357868 JS主要负责网页的各式各样的动态功能因此可以为用户提供更流畅美观的页面浏览效果以及添加页面交互行为给用户更好的视觉和使用体验 二、JavaScript简介
1.ECMAScript和JavaScript的关系 1996年11月JavaScript的创造者–Netscape公司决定将JavaScript提交给国际标准化组织ECMA希望这门语言能够成为国际标准。次年ECMA发布262号标准文件ECMA-262的第一版规定了浏览器脚本语言的标准并将这种语言称为ECMAScript这个版本就是1.0版。 该标准一开始就是针对JavaScript语言制定的但是没有称其为JavaScript有两个方面的原因。一是商标JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA而不是Netscape这样有利于保证这门语言的开发性和中立性。 因此ECMAScript和JavaScript的关系是前者是后者的规格后者是前者的一种实现。 2.ECMAScript的历史
年份名称描述1997ECMAScript 1第一个版本1998ECMAScript 2版本变更1999ECMAScript 3添加正则表达式添加try/catchECMAScript 4没有发布2009ECMAScript 5添加strict mode严格模式添加JSON支持2011ECMAScript 5.1版本变更2015ECMAScript 6添加类和模块2016ECMAScript 7增加指数运算符**增加Array.prototype.includes
3.什么是Javascript 尽管 ECMAScript 是一个重要的标准但它并不是 JavaScript 唯一的部分当然也不是唯一被标准化的部分。实际上一个完整的 JavaScript 实现是由以下 3 个不同部分组成的 核心ECMAScriptES5-ES6规范了JavaScript的基本语法文档对象模型DOM Document object model (整合jscsshtml)提供了一系列操作的文档的方法浏览器对象模型BOM Broswer object model整合js和浏览器提供了一系列操作浏览器的方法 一、ECMA Script ECMAScript是一个标准JS只是它的一个实现其他实现包括ActionScript。“ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力…”即ECMAScript不与具体的宿主环境相绑定如JS的宿主环境是浏览器AS的宿主环境是Flash。ECMAScript描述了以下内容语法、类型、语句、关键字、保留字、运算符、对象。 因此ECMAScript和JavaScript的关系是前者是后者的标准后者是前者的一种实现。ECMAScript也可以称为ES 二、DOM DOM 全称是Document Object Model也就是文档对象模型。DOM 是 W3C 的标准 [所有浏览器公共遵守的标准]DOM的主要中就是为了操作 HTML 中的元素 三、BOM BOM 全称是Browser Object Model浏览器对象模型。BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]window 是 BOM 对象而非 JS 对象JS是通过访问BOM对象来访问、控制、修改浏览器主要作用可以说BOM包含了DOM(对象)浏览器提供出来给予访问的是BOM对象从BOM对象再访问到DOM对象从而JS可以操作浏览器以及浏览器读取到的文档 简单地说ECMAScript 描述了JavaScript语言本身的相关内容。 JavaScript一般用来编写页面脚本来为html页面添加交互行为是前台语言而不是后端语言。 JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后可由所有的现代浏览器执行。 4.JavaScript的作用? 如今JavaScript 不仅可以在浏览器中执行也可以在服务端执行甚至可以在任意搭载了 JavaScript 引擎 的设备中执行。JavaScript 是一种脚本一门编程语言它可以在网页上实现复杂的功能网页展现给你的不再是简单的静态信息而是实时的内容更新交互式的地图2D/3D 动画滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解。 三者之间的作用 HTML是一种标记语言用来结构化我们的网页内容并赋予内容含义例如定义段落、标题和数据表或在页面中嵌入图片和视频。CSS 是一种样式规则语言可将样式应用于 HTML 内容 例如设置背景颜色和字体在多个列中布局内容。JavaScript 是一种脚本语言可以用来创建动态更新的内容控制多媒体制作图像动画还有很多。好吧虽然它不是万能的但可以通过简短的代码来实现神奇的功能。 5.JavaScript的特点 解释执行浏览器就是解释器事先不编译、逐行执行、无需进行严格的变量声明。简单易用可以使用任何文本编辑工具编写只需要浏览器就可以执行程序。基于对象内置大量现成对象编写少量程序可以完成目标 三、JavaScript基础
1.注释语法 // 单行注释/**/ 多行注释2.JavaScript的使用
在HTML中有几种引入的方式 1.head内script标签内编写script// 在这里写你的JS代码/script2.head内script标签src属性引入外部js资源script srcmy.js/script3.body内最底部通过script标签src属性引入外部js资源(最常用)ps注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行JS的语法规范 JS对换行、缩进、空格并不敏感。 一段JS代码写完记得在末尾加上分号; (当然不写也没问题) 但是避免日后JS文件压缩导致无法执行的问题所以最好还是写 四、JavaScript变量与常量 pycharm创建js文件或者html文件适合编写较为复杂的js代码浏览器提供编写js代码的环境 变量 由于JS是一门弱类型、动态语言所以在定义变量时并不需要提前说明变量类型。 首先说说可以编写JS代码的地方1.浏览器右键检查Console2.专门的代码软件在JS中声明变量和常量都需要使用关键字来使用var(全局有效) var x JavaScript;let(如果在局部名称空间中使用 那么仅在局部名称空间中有效) let x JavaScript;注意let关键字是ECMA6推出的新语法如果你的编辑器支持的版本是5.1那么将无法使用let关键字如果是6.0则向下兼容var、let都可以使用const(定义常量) const P 3.1415真正意义上的常量不能更改JS也是动态类型变量名绑定的数据值类型不固定var name jack; console.log(name) //打印结果为jackname tom;console.log(name) // 打印结果为tom变量的命名规范
1、由字母、数字、下划线、$ 组成,但是不能数字开头也不能纯数字2、严格区分大小写3、不能包含关键字和保留字以后升级版本要用的关键字。
如abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、
goto、implements、import、int、interface、long、native、package、private、protected、public、
short、static、super、synchronized、throws、transient、volatile4、推荐驼峰命名法有多个有意义的单词组成名称的时候第一个单词的首字母小写其余的单词首字母写5、匈牙利命名就是根据数据类型单词的的首字符作为前缀关键字var和let的区别 var 在for循环里面定义也会影响到全局let 在局部定义只会在局部生效 关键字varvar i 66;for (var i 0; i 10; i){console.log(i);}console.log(i); //运行完毕循环后执行打印结果为10关键字letlet n 88;for(let n0; n 10; n){console.log(n);}console.log(n); // 运行完毕循环后执行打印结果为88常量 python中没有真正意义上的常量 默认全大写就是表示常量。而JS中是有真正意义上的常量。需要关键字声明 : const const P 3.1415;P 3.15; //报错声明一个常量声明之后就不能改了 五、JavaScript数据类型 JS是动态语言变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同来决定自己的类型。 变量值刚声明时如果未赋值那么默认会存一个值 var x; // x的值为undefined表示未赋值声明一个变量名后可以指向任意的数据类型,但是有一些语言中变量名之间指向一种后续不能更改var x;x hello;x 66x [1,2,3,4];1.数值类型(Number) JavaScript 不区分整型与浮点型只有一种数字类型即number类型。 var z 10;var y 12.3;var c 12e5;var n NaN; // Nan表示not a number 作用与某个值不是数字但它也是数字类型数值类型的一些方法parseint() // 转换为整数parsefloat() // 转换为小数typeof 变量名 // 查询数据类型NaN:Not a number // 报错不是一个数字2.字符类型(String) 字符串是存储字符的变量即String类型。 字符串可以是引号中的任意文本。你可以使用单引号或双引号 var name1 jack; //单引号var name2 tom; //双引号不可以使用下面这种方式必须配对使用var name3 oscar;typeof name1; // String需要注意的是引号内不能包含外部已经使用的引号var x My name is jack; //报错引号里面的字符不能包含外部引号var x this its; //错误写法 报错不支持三单/双引号var s hello; //报错 Uncaught SyntaxError: Unexpected string1.字符串拼接推荐使用加号 方法一字符的拼接 ‘’var a hello;var b world;var c a b;console.log(c); //结果为helloworld方法二支持格式化输出var name jack;var age 19;var user my name is ${name} my age is ${age};console.log(user);注意python 不推荐用加号去拼接而是join方法常见内置方法
方法说明Python中对应的方法.length返回长度len().trim()移除空白strip().trimLeft()移除左边的空白lstrip().trimRight()移除右边的空白rstrip().charAt(n)返回第n个字符.concat(value, …)拼接join().indexOf(substring, start)子序列位置.substring(from, to)根据索引获取子序列[]索引取值.slice(start, end)切片.toLowerCase()小写lower().toUpperCase()大写upper().split(delimiter, limit)分割split()
3.布尔值(Boolean) 布尔只有两个值true、false。即Boolean类型. 布尔常用在条件判断中。 JS里面的布尔值类型为boolean(区别于Python中true和false都是小写)var x true;var y false; // (空字符串)、0、null、undefined、nan都是falsetypeof x; // booleannull与undefined区别
null表示值是空的一般在需要指定或清空一个变量时才会使用如namenullUndefined表示当声明一个变量但未初始化时该变量的默认值是undefined。还有就是函数无明确的返回值时返回的也是undefined。 注意null表示变量的值是空(null可以手动清空一个变量的值使得该变量变为object类型值为null)undefined则表示只声明了变量但还没有赋值。 var s; // undefinedvar name jack;name null; // null 清空了name的值再次显示出来就是null了表示name变量为空4.对象(Object) 对象由花括号分隔。在括号内部对象的属性以名称和值对的形式 (name : value) 来定义。属性之间由逗号分隔ps它与Python内的字典相同 var obj {name:jack,age:19};typeof obj; // object对象有两种取值方式 obj.name; // jackobj[name] // jack对象的属性值可以存放任意数据类型 var obj {name:jack,age:19,hobby:[music,jump,rap]};此时获取hobby属性的值 obj.hobby[0]; // musicJS里面中的所有事物都是对象。(Python也是一切皆对象)所有事物都是对象字符串、数值、数组、函数....,且允许自定义对象。JavaScript提供多个内建对象比如String、Date、Array。对象只是带有属性和方法的特殊数据类型var a [12,21,21,333,15];typeof a; // objectconsole.log(a[1]); // 打印结果为 215.自定义对象 自定义对象相当于Python中的字典快速的操作数据值定义方式1:let user {name:jack,password:123}定义方式2:let d2 new object()自定义对象操作数据值的方式很简单 直接使用句点符就可以直接获取value6.数组 数组对象的作用是使用单独的变量名来存储一系列的值。类似于Python中的列表。 var a[123,jack];console.log(a[1]); // jack数组常用内置方法
方法说明.length数组的大小.push(ele)尾部追加元素.pop()获取尾部的元素.unshift(ele)头部插入元素.shift头部移除元素.slice(start,end)切片操作.reverse()数据反转.join(seq)将数组元素连接成字符串.concat(val,…)链接数组.sort()排序.forEach()将数组的每个元素传递给回调函数.splice()删除元素 并向数组添加新元素.map()返回一个数组元素调用函数处理后的值的新数组 1. forEach(function(currentValue, index, arr), thisValue)
参数描述function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。thisValue可选。传递给函数的值一般用 “this” 值。 如果这个参数为空 “undefined” 会传递给 “this” 值 forEach语法forEach(function(currentValue, index, arr), thisValue)ll[111, 222, 333, 444, 555, 666];一个参数就是数组里面每一个元素对象ll.forEach(function(value){console.log(value)},11)两个参数就是元素元素索引ll.forEach(function(value,index){console.log(value,index)},11)元素元素索引元素的数据来源ll.forEach(function(value,index,arr){console.log(value,index,Array)})2.splice()
参数描述index必需。规定从何处添加/删除元素。 该参数是开始插入和或删除的数组元素的下标必须是数字。howmany必需。规定应该删除多少元素。必须是数字但可以是 “0”。 如果未规定此参数则删除从 index 开始到原数组结尾的所有元素。item1, …, itemX可选。要添加到数组的新元素 splice语法 splice(index,howmany,item1,.....,itemX)l1[111, 222, 333, 444, 555, 666];两个参数第一个起始位置 第二个是删除的个数l1.splice(0,3); // [111, 222, 333]三个参数 先删除前面指定的参数 在添加后面指定的参数(先删除后添加)l1.splice(0,1,888); // a[888, 555, 666]先删除指定前面的参数 在将数组添加到Array内 Array数组l1.splice(0,1,[111,222,333,444]); // [Array(4), 555, 666] Array(4)[111, 222, 333, 444]3.map()
参数描述function(currentValue, index,arr)必须。函数数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象thisValue可选。对象作为该执行回调时使用传递给函数用作 “this” 的值。 如果省略了 thisValue “this” 的值为 “undefined” map语法:map(function(currentValue,index,arr), thisValue)var l2[11,22,33,44,55];l2.map(function(value){console.log(value)},l2);11VM4761:1 22VM4761:1 33VM4761:1 44VM4761:1 55l2.map(function(value,index){return value*2},l2);(5) [22, 44, 66, 88, 110]l2.map(function(value,index,arr){return value*2},l2);(5) [22, 44, 66, 88, 110]六、运算符
算术运算符 - * / % (自增1) --(自减1)var x10;var res1x; 加号在后面 先赋值后自增var res2x; 加号在前面 先自增后赋值比较运算符 !(值不等 弱) (值相等 弱) (值相等 强) !(值不等 强)ps:会不会自动转换类型1 1 // true 弱等于1 1 // false 强等于//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)所以当你用两个等号进行比较时JS内部会自动先将//数值类型的1转换成字符串类型的1再进行比较所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型防止判断错误逻辑运算符 (与) ||(或) !(非)赋值运算符 - * /七、流程控制
分支结构 1.单if分支if(条件){条件成立之后执行的代码}2.if...else分支if(条件){条件成立之后执行的代码}else{条件不成立执行的代码}3.if...else if ....else分支if(条件1){条件1成立之后执行的代码}else if(条件2){条件1不成立条件2成立执行的代码}else{条件1,2不成立之后执行的代码}var x10;if(x5){console.log(yes)}//分支结构之双分支if(x5){console.log(yes);}else{console.log(no);}//分支结构之多分支if(x5){console.log(x5);}else if(x5){console.log(x5);}else{console.log(x5);}如果分支结构中else if很多还可以考虑使用switch语法switch分支 switch(){case 条件1条件1成立执行的代码break; # 如果没有break,就会基于某个case条件一直往下执行case 条件2:条件2成立执行的代码breakcase 条件3条件3成立执行的代码break;case 条件4条件4成立执行的代码break;defualt:条件都不满足执行的代码}var day new Date().getDay();switch(day){case 0:console.log(Sunday);break;case 1:console.log(Monday);break;default:console.log(...);}循环结构
for循环 for起始条件;循环条件;条件处理{循环体代码}1.for 循环列表for(let i0;i10;i){console.log(i);}2.for 循环字典let dd {name:jason,age:18}for(let k in dd){console.log(k);}for(let k in dd){console.log(dd[k]);};while循环 while循环while(循环条件){循环体代码}eg:var i 0;while (i 10) {console.log(i);i;}三元表达式 Python中的三元运算值1 if 条件 else 值2res 1 if 12 else 3条件成立取 1条件不成立取 3JavaScript中的三元运算JS中: 条件?值1:值2eg1:res 12?1:3条件成立 取问号后面的1不成立 取冒号后面的3eg2:var a 1;var b 2;var c a b ? a : b;
//这里的三元运算顺序是先写判断条件ab再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用var a10,b20;var xab ?a:(b20)?a:b;x10八、JavaScript函数 函数就是将代码存储在一个容器内当我们需要时就可以直接调用然后执行里面的代码块。 函数的语法 语法function 函数名(形参){函数体代码;return 返回值}function index(){console.log(helloworld);}index(); //调用这个函数函数的参数传递 我们可以让函数接收外部调用时传递参数然后函数可以拿着传递进来的参数执行。 function func(a,b){if(ab){return a; // 返回值给这个函数的调用者}else{return b;}}var res func(10,20); // 定义一个变量接收调用函数时函数的返回值console.log(res);参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments并且JavaScript函数中只有形参和默认参数没有关键字参数function func(a, b){if(arguments.length2){console.log(a, b) }else{console.log(需要传对应的个数参数!!!)}}注意JavaScript函数只能返回一个值如果要返回多个值那么就先将它们放入到数组或者对象内然后再进行返回。 匿名函数 Js里面的匿名函数定义格式var sum function(a,b){return ab} sum(1,2);除了匿名函数还有立即执行函数 书写立即执行的函数首先先写两个括号()()这样防止书写混乱(function(a, b){return a b;})(1, 2);箭头函数 var f v v;var f fuction(v){return v}eg1:var f () 5; //箭头函数不需要参数var f function(){return 5};eg2:var sum (num1, num2) num1 num2; //需要多个参数var sum function(num1, num2){return num1 num2; ////这里的return只能返回一个值如果想返回多个值需要自己手动给他们包一个数组或对象中}函数中的arguments参数 函数中的arguments参数function add(a,b){console.log(ab);console.log(arguments.length);console.log(arguments[0]);//arguments相当于将出传入的参数全部包含这里取得就是第一个元素1}JavaScript函数的特点 JS中函数的形参与实参个数可以不对应,传少了缺少的那个变量就是undefined传多了多余的不用接收函数体代码中有一个关键字arguments用来接收所有的实参函数的返回值如果有多个需要自己处理成一个整体 JavaScript函数的全局变量和局部变量
局部变量: 在JavaScript函数内部声明的变量使用 var是局部变量所以只能在函数内部访问它该变量的作用域是函数内部。只要函数运行完毕本地变量就会被删除。 全局变量 在函数外声明的变量是全局变量网页上的所有脚本和函数都能访问它。 变量生存周期 JavaScript变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。 作用域 首先在函数内部查找变量找不到则到外层函数查找逐步找到最外层。与python作用域关系查找一模一样 例子 var city shanghai;function func(){var city beij;function inner(){var city shenzhen;console.log(city);}inner();}func();//var city1 beij;function bar(){console.log(city1);}function func1(){var cityshanghai;return bar;}var ret func1();ret();//var city2 beij;function func3(){var city2 shanghai;function inner(){console.log(city2);}inner();}var res1 func3();res1();补充知识 词法分析JavaScript中在调用函数的那一瞬间会先进行词法分析 词法分析的过程
当函数调用的前一瞬间会先形成一个激活对象Avtive ObjectAO并会分析以下3个方面
1:函数参数如果有则将此参数赋值给AO且值为undefined。如果没有则不做任何操作。 2:函数局部变量如果AO上有同名的值则不做任何操作。如果没有则将此变量赋值给AO并且值为undefined。 3:函数声明如果AO上有则会将AO上的对象覆盖。如果没有则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。 eg:var age 18;function foo(){console.log(age);var age 22;console.log(age);}foo(); // 问执行foo()之后的结果是 22eg:var age 18;function foo(){console.log(age);var age 22;console.log(age);function age(){console.log(呵呵);}console.log(age);}foo(); // 执行后的结果是九、JavaScript中的内置对象 类似于python中的内置函数或者内置模块固定语法var 变量名 new 内置对象名();Date对象 Date对象方法var d new Date(); //getDate() 获取日//getDay () 获取星期//getMonth () 获取月0-11//getFullYear () 获取完整年份//getYear () 获取年//getHours () 获取小时//getMinutes () 获取分钟//getSeconds () 获取秒//getMilliseconds () 获取毫秒//getTime () 返回累计毫秒数(从1970/1/1午夜)获取当前时间练习 按照年月日时分星期几格式输出const WEEKMAP { 0:星期天,1:星期一,2:星期二,3:星期三,4:星期四,5:星期五,6:星期六}; //定义一个数字与星期的对应关系对象function showTime() {var d1 new Date();var year d1.getFullYear();var month d1.getMonth() 1; //注意月份是从0~11var day d1.getDate();var hour d1.getHours();var minute d1.getMinutes() 10?0d1.getMinutes():d1.getMinutes(); //三元运算var week WEEKMAP[d1.getDay()]; //星期是从0~6var strTime ${year}-${month}-${day} ${hour}:${minute} ${week};console.log(strTime)}; Json对象 Json对象Js里面Json序列化关键词Json.stringify()Json.parse()var str1 {name: Alex, age: 18};var obj1 {name: Alex, age: 18};// JSON字符串转换成对象var obj JSON.parse(str1); // 对象转换成JSON字符串var str JSON.stringify(obj1);RegExp正则对象 RegExp正则对象语法方式1:var reg1 new RegExp(正则表达式);语法方式2:var reg1 new RegExp(正则表达式);var reg1 new RegExp(^[a-zA-Z][a-zA-Z0-9]{5,11});var reg2 /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;reg1.test(Lebron666)reg2.test(Lebron666)var s1 meijinisdashuaige;var s2 /^[a-zA-Z][a-zA-Z0-9]{5,9}$/gs2.test(meijin)s2.test(mjdashuaige)
