JavaScript的高大强
1,JavaScript的引入方式
1.1>Script标签内写代码
<Script>
//这里写JS代码的地方
</Script>
1.2>引入额外的JS文件
<Script src="myScript.js"></Script>
2,JavaScript的语言规范(注释是代码之母)
//这是单上注释
/*
这是多行注释
*/
3,结束符
JavaScript的中放入语法要以分号(;)为结束符.
4,JS的历史及ECMAScript
ECMAScript------->一个标准 ES5/ES6
node.js------>跑在服务端的JS
5,JS学习的内容:
5.1>基础语法
5.2>操作浏览器对象 BOM
2.3>操作文档上的标签 DOM
5.1.1>变量的声明:
1>JavaScript的变量名可以使用_,数字,字母,$组成不能以数字开头.
2>声明的变量使用var 变量;的格式来进行声明.
var name="xuexue";
var age = 18;
注意:1>变量名是区分大小写的,2>推荐使用驼峰式命令规则,3>保留字不能用做变量名
补充:ES6新增了let命令,用于声明变量,用法类似于var,但是所声明的变量只在let命令所在的代码快内有效.列如:for循环的计数器就很适合使用let命令.
for (let i=0;i<arr.lenth;i++){....}
ES6新增condt用来声明常量,一旦声明,其值就不能改变.
const PI = 3.1415;
PI // 3.1415
PI = 3
//TypeError: "PI" is read only
5.1.2>JavaScript的基础数据类型
5.1.2.1>数值(Number)
JavaScript不区分整型和浮点型,就只有一种类型(数值型)
var a = 12.536;
var b = 20; var c = 123e5; //12300000表示123*10的5次方,这里只能用e表示,别问我为什么,其他的不好使 var d = 123e-5;//0.0012表示123*10的-5次方,同样这里只有e表示10,别的不好使
还有一种NaN,表示不是一个数字(Not a Number).
常用方法:
parseInt("123") //返回123 parseInt(123.456)//返回123,没有四舍五入,直接取整 parsefloat("123.456")//返回的是123.456 parseInt("abc")//返回NaN,NaN属性是代表非数值特殊值,该属性用于指示某个值不是数字 parsefloat("abc")//返回NaN,NaN属性是代表非数值特殊值,该数字能够用于指示某个值不是数字
5.1.2.2>字符串(string)
var a = "hello";
var b = "world";
var c = a + b;
console.log(c);//得到helloworld
方法 | 说明 |
.length | 返回长度 |
.trim() | 移除字符串两端的空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value,...) | 拼接 |
.indexOF(substring,start) | 查找子序列的位置,并且可以指定从哪个位置开始查 |
.substring(from,to) | 根据索引获取子序列括号里边放数字,是根据所以去查找,(顾头不顾尾) |
.slice(start,end) | 切片和上边一个尿性 |
.toLowerCase() | 字符串里的字母全部小写 |
.toRightCase() | 字符串里的字母全部大写 |
.split(dellimiter,limit) | 切割返回的智力边如果那个limit传几个数字就会把切割后的前几个元素返回来 |
###注意:对字符串的任何操作都不会影响源字符串的内容,只是会生成一个新的字符串###
拼接一般用"+"
string.slice(start,stop)和string.substring(start,stop);
两者的相同点:如果start等于end,返回空字符串
如果stop参数省略,则去到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度 substring()的特点:
如果start > stop, start和stop将被交换
如果参数是负数或者不是数字,将会被0替代 silce()特点:
如果 start >stop,不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符串开始(包括该字符串的字符)
如果stop小于0,则切割在从字符串末尾往前数第abs(stop)个字符串结束(不包含该位置字符)
string.slice("元素",2)表示从字符串中第"元素开始切片"切2个元素
补充:ES6中引入模板字符串,用反引号()标识,它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串里嵌入变量
//普通字符串
.这时普通字符串.
// 多行文本
.文本.
//字符串中嵌入变量
var name = "xuexue", time = "today";
'Hello ${name}, how are you ${time}?'
如果字符串中需要使用反引号,则在前面要用反斜杠转义
5.1.2.3>布尔值(Boolean)
区别于python,true和false都是小写.
var a = true;
var b = false;
空字符.0.null.undefined.NaN都是false
5.1.2.4>null和undefined
1>null表示值是空,一般在需要指定或清空一个变量时才会使用,如name=null;
2>undefined表示声明一个变量但未初始化时,该变量的默认值是undefined,还有就是函数无明确的返回值,返回的也是undefined.
null表示变量事物值是空,undefined则表示只声明了变量,但还没有赋值.
5.1.2.5>对象(object)
JavaScript中的所有事物都是对象:字符串,数值,数组,函数...此外,JavaScript允许自定义对象.
JavaScript提供多个内建对象,比如String,Date,Array等等.
对象只是带有属性和方法的特殊数据类型.
5.1.2.6>数组
数组对象的作用是:使单独的变量名来储存一系列的值.类似于python中的列表
var a = [123,"ABC"];
console.log(a[1]);//输出的是ABC
方法 | 数组的大小 |
.length | 不加括号是内置方法,计算数组的大小的 |
.push(element) | 在尾部追加元素(类似于python中的list的append(),但是.push能一次放多个元素(items)) |
.pop() | 获取尾部的元素,并把数组的最后一项删除,传参数也没用 |
.unshift(element) | 在头部插入元素(items)返回的是数组的长度 |
.shift() | 头部移除元素(item)一次移除一个. |
.slice(start,end) | 切片就是在是纯数组的列表会有问题,剩下的和字符串的拿个slice一毛一样 |
.reverse() | 将有序的数组反转 |
.join(separator) | 将数组每个元素用括号里边的元素隔开,变成字符串 |
.concat(items) | 是在数组的后边加许多的元素这个元素也可以是数组 |
.sort() | 排序根据第一个字符或者第一个数字的ASCII码进行排的序 |
forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组中添加一个或多个新元素 |
map() | 返回一个数组的元素调用函数处理后的值的新元素 |
说明:splice(index,howmany,,item1,...itemX)
参数 | 描述 |
index | 必须,规定从何处添加删除元素,该参数是开始插入和(或)删除的数组元素的下标,必须是数字 |
howmany | 必须,规定删除多少元素,必须是数字,但可以是"0".如果未规定此参数,则删除从index开始到原数组结尾的所有元素 |
item1,...itemX | 可选,要添加到数组的新元素 |
补充说明:数组for循环出来的是数组的索引.
5.1.2.7>类型查询(查询这个数据的类型的)
typeof "abc" //"string"
typeof null //"object"
typeof true //"boolean"
typeof 123 //"number"
typeof是一个元运算符(就像++,--,!,-等一元运算符),不是函数,也不是一个语句.
对变量或者调用typeof运算符将返回下列值之一:
undefined--如果变量是Undefined类型的
boolean--如果变量是Boolean类型的
number--如果变量是Number类型的
string--如果变量是String类型的
object--如果变量是一种引用类型或null类型的
5.1.2.8>运算符
算数运算符
+ - * / % ++ --
比较运算符
> >= < <= != == === !==
###注意有坑###
1 =="1" // true这个是比较,先把数值转化成字符串,在比较内容相等和内存地址向等
1 === "1" // false这个是全等于,即比较数值,还比较数据类型,还比较他俩的内存地址
逻辑运算
&& || !
赋值运算符
= += -= *= /=
5.1.2.9>流程控制语句
if - else语句
var a = 10;
if (a >5){
console.log("yes");
}else { console.log("no")
;}
if-else-if-else語句
var a = 10;
if (a > 5){
console.log("a>5");
}else if (a <5) {
console.log("a<5");
}else { console.log("a=5")
}
switch语句
var day = new Date().getDay();...............获取当前是时间(数值)
switch (day) {.............................switch里边的括号放变量
case 0:...............................加入变量值是0,
console.log("Sunday");......................就打印Sunday
break;...............................必须加break,否则程序会执行后续case找那个的语句
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
for语句
for (var i = 0;i<10;i++) {
console.log(i);
}
while语句
var i = 0;
while (i<10) {
console.log(i);
i++;
}
三元运算
var a = 1;
var b = 2;
var c = a < b ? a :
判断a和b前边的不等式是否成立,成立就是冒号前边的变量,否则是后边的变量
5.1.3>JS中的函数和python中非常类似,只是定义方式有点区别
5.1.3.1>普通函数
function foo() {
console.log("Hello world")
console.log("my Javascript")
console.log("so hard")
}
function foo(a,b) {
console.log(arguments);..............内置的argumens对象
console.log(arguments.length);
console.log(a,b);
}
function sum(a,b) {
return a + b;
} sum(1,2);// 调用函数
5.1.3.2>匿名函数
var f = function() {.................匿名函数需要声明一个变量去接,调用的时候用变量去调用,就是把函数名var 成了变量
console.log(123);
}
f()..................................//打印的结果是123
5.1.3.3>立即执行函数(一次性执行函数,想再执行,那是不可能的了)
(function (a,b){return a+b})(10,20)
//30.................在定义完函数就立即执行,执行完就没有了,不能多次执行
补充:
ES6中允许使用"箭头"(=>)定义函数.(在匿名函数中应用),是匿名函数的缩写
var f = v =>v;.............箭头函数是匿名函数的缩写,当函数包括多个参数的时候要用()包起来
//等同于
var f = function(v){
return v;
}
var f = (a,b) =>a*b;..............多个参数的时候需要用括号=>之前是参数,之后是return的值
f(10,20).....................//返回的是200
var f = () => 5;..................当函数中的括号没有参数时,就用括号表示
f().....................//返回的是5
5.1.3.4>函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(arguments.length)
} ......//打印结果是3 ......//打印结果是2
###函数只能返回一个值,如果返回多个值,只能将其放在数组或对象中返回.###
5.1.3.5>函数的全局变量和局部变量
局部变量:在JavaScript函数内部声明的变量(使用var)是局部变量,so只能在函数的内部访问它(该变量的作用域是函数内部).只要函数运行完毕,本地变量就会被删除
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它
变量生存周期:
JavaScript变量的声明周期从它们被声明的时间开始.
局部变量会在函数运行后被删除.
全局变量会在页面关闭后被删除.(JS系统的垃圾回收机制删除)
5.1.3.6>作用域:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层.
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner() {
var city = "shenzhen";
console.log(city);
}
inner();
} f();.............输出的结果是:ShenZhen,返回离自己最近的变量
var city = "BeiJing" function Bar { console.log(city);
} function f() {
var city = "ShangHai";
return Bar;
} var ret = f(); ret();.....................//打印的结果是BeiJing
闭包:是内部函数胡对玩不函数变量的访问
var city = "BriJing";
function f() {
var city = "ShangHai";
function inner() {
console.log(city);
}
return inner
} var ret = f();.........先执行f()函数,return的值返回给ret ret();..........ret+()调用inner()函数
5.1.3.7>词法分析:在JavaScript调用函数的那一 瞬间,会先进性词法分析.
词法分析过程:当函数调用的前一瞬间,会形成一个激活对象:active Object(AO),分析以下三个方面:
1>函数参数,如果有,则将此参数赋值给AO,且值为undefined,如果没有,则不做任何操作.
2>函数局部变量,如果AO上有同名的值,则不做任何操作.如果没有,则将此变量赋值给AO,并且值为undefined.
3>函数声明,如果AO上有,则会将AO上的对象覆盖.如果没有,则不做任何操作.
函数内部无论是使用参数还是使用局部变量都到AO上找
var age = 18;
funcyion foo() {
console.log(age);
var age = 22;
console.log(age);
} foo();
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
} foo()
5.1.3.8>内置方法和对象
JavaScript中所有事物都是对象:字符串,数值,数组,日期,等等.在JavaScript中,对象是拥有属性和方法的数据
5.1.3.8.1>自定义对象:JavaScript的对象本质上是键值对的集合(Hash),但是只能用字符串做为键.
var a = {"name":"Alex","age":18};
console.log(a.name).....................//Alex
console.log(a["age"]);...................//Alex
通过万能的.去查询对象的键来查找值,还有就是通过类似于python中的字典的查询
遍历对象中的内容:
var a = {"name":"alex","age":18};
for (var i in a){
console.log(i,a[i]);
}
创建对象:
var person = new Object(); //创建一个person对象
person.name = "Alex"; //person对象的name属性
person.age = 18; //person对象的属性
###ES6中提供了map数据结构,它类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型的值(包括对象)都可以当做键
也就是说,Object结构提供了"字符串--值"的对应,map结构提供了"值-值"的对应,是一种更完善的Hash结构实现
5.1.3.8.2>创建Date对象
//方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());.............获取到的是当前的年月/日
//方法2:参数为日期字符串
var d2 = new Date("2018/3/31 11:12");
console.log(d2.tolocalestring());
var d3 = new Date("18/03/31 11:12");
console.log(d3.tolocaiestring());
//方法3:参数为毫秒数
var d3 = new Date(5000);
console.log(d3.tolocalestring());
console.log(d3.toUTCString());
//方法4: 参数为年月日小时分钟秒毫秒
var d4= new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
Date对象的方法:
var d = new Date();
d.getDate()................//获取日
d.getDay()................//获取星期
d.getMonth()............//获取月(这里的月是从0-11)锁以每次得到的月份+1即可
d.getFullyear()...........//获取完整年份
d.getYear().................//获取年
d.getHours()..............//获取小时
d,getMinutes().............//获取分钟
d.getSecond()...............//获取秒
d.getMilliseconds()............//获取毫秒
d.getTime()................//返回累计毫秒数
5.1.8.4>JSON 对象
var str1 = "{"name":"alex","age":18}";
var obj1 = {"name":"alex","age":18};
//json字符串转换成对象................反序列化
var obj =JSON.parse(str1);
//对象转化成json字符串....................序列化
var str = JSON.stringify(obj);
5.1.8.5>RegEXP对象
RegEXP创建正则对象方式1:
var reg1 = new RegEXP("^[a-zA-Z][a-z0-9]{5,11}$");创建RegEXP对象方式(逗号后面不要加空格)
//匹配响应字符串
var s1 = "bcd123";
//RegEXP对象的text方法,测试一个字符串是否符合对应的正则规则,返回值是true或false
reg1.text(s1); // true
创建正则对象方式的参数说明:
1>正则表达式(不能由空格)
2>匹配模式:常用g(全局匹配,找到所有匹配,而不是在第一个匹配后停止)和i(忽略大小写)
创建方式2:
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/;
reg2.test(s1);...................//true
在使用正则匹配的时候有以下几个坑:
当我们不加参数调用RegEXPObj.test()方法时,相当于执行RegEXPObj.test("undefined"),并且/undefined/.test()默认返回true
5.1.8.6>Math对象
Math.abs(-5)............//返回值是5,返回的值是绝对值
Math.exp(5)................//148.41315返回的是e的指数
Math.floor(5.9)................//对数进行下舍入(取整)5
Math.log(5).....................//1.6094返回自然数的对数(底为e)
Math.max(x,y)..................//取最大值
Math.min(x,y)....................//取最小值
Math.pow(x,y)....................//返回x的y次幂,但有多个参数>2的时候,也是只有前两个有效
Math.random()....................//括号不加参数,默认是从0-1随机取数
Math.round(x).......................//把x这个数四舍五入
Math.sin(x).........................//返回数的正弦
Math.sqrt(x)........................//返回数的平方根
Math.tan(x)............................//返回角的真切值
JavaScript的高大强的更多相关文章
- 以优美方式编写JavaScript代码
英文原文:CoffeeScript: The beautiful way to write JavaScript 我用 JavaScript 编程很多年了,写了大量的 JavaScript 代码,即便 ...
- Integrating JavaScript into Native Applications
JavaScriptCore 简介 iOS7 中新加入的 JavaScriptCore.framework 可能被大多数开发人员所忽略,但是如果你之前就在项目中用过自己编译JavaScriptCore ...
- 研究 Javascript的&&和||的另类用法
这篇文章主要介绍了Javascript的&&和||的另类用法,需要的朋友可以参考下 最近也没什么心思写文章了,感觉总有忙不完的事情,呵. 不过这些天又开始研究起 Titanium 来, ...
- Javascript中call和apply
在上一章http://www.cnblogs.com/meiyh/p/6207671.html 我有提到javascript很重要的this关键字,现在我们结合这个关键字使用的下面的两个关键字: ca ...
- JavaScript概述-第1章
目录 初始JavaScript 学会使用编辑工具 如何引入脚本代码 常用语句 常见浏览器兼容性问题 了解前端开发技术JavaScript,JavaScript的发展,JavaScript特点,Java ...
- Javascript的&&和||的另类用法
Javascript的&&和||的另类用法. 又开始研究起 Titanium 来,发现其官方出品的MVC框架(Alloy)还是挺不错的,刚开始苦于没有好的代码来学习,文档又少,所以一直 ...
- 为什么我要放弃javaScript数据结构与算法(第一章)—— JavaScript简介
数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...
- 极度简约 最小 Linux 发行版 Tiny Core Linux 7.1 发布
感谢Linux Story的投递 Tiny Core Linux 是一个极度简约但是也高度可扩展的 GNU/Linux 发行版,其之精简甚至可以小到只有 10MB 大小,昨天 5月23日刚刚发布的 T ...
- php 语言特点
PS:绝大多数用php的企业/ 项目 活不到雇佣得起月薪35k以上的php程序员那一天,也是php码农在10年经验的时候普遍不如java程序员的原因之一. PS2: 由于薪资提升太快,很多php码农跳 ...
随机推荐
- float 和 clear
float 特性1:可以为行内浮动元素设置宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- 如何用纯 CSS 创作条形图,不用任何图表库
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...
- JS中的方法运用笔记
1.警告(alert 消息对话框) alert(字符串或变量); <script type="text/javascript"> var mynum = 30; ale ...
- 【CodeForces 426】div1 B The Bakery
Some time ago Slastyona the Sweetmaid decided to open her own bakery! She bought required ingredient ...
- keepalived安装脚本
keepalived_install.sh: #cat keepalived_install.sh #!/bin/bash pkg=keepalived-2.0.10.tar.gz tar xf $p ...
- 阿里巴巴集团加入W3C,成为W3C会员
根据W3C官方推特最新消息:阿里巴巴集团正式加入W3C,成为W3C会员. W3C官方推特:https://twitter.com/w3c/status/566244180372889601 同时可以在 ...
- POJ-1061青蛙的约会,扩展欧几里德求逆元!
青蛙的约会 以前不止一次看过这个题,但都没有去补..好吧,现在慢慢来做. 友情提示 ...
- 洛谷P1276 校门外的树(增强版)未完工
题目描述 校门外马路上本来从编号0到L,每一编号的位置都有1棵树.有砍树者每次从编号A到B处连续砍掉每1棵树,就连树苗也不放过(记 0 A B ,含A和B):幸运的是还有植树者每次从编号C到D 中凡是 ...
- 博弈 Nim问题 POJ2234
定义: 通常的Nim游戏的定义是这样的:有若干堆石子,每堆石子的数量都是有限的,合法的移动是 “选择一堆石子并拿走若干颗(不能不拿)”,如果轮到某个人时所有的石子堆都已经被拿空了, 则判负(因为他此刻 ...
- websocket个人理解总结
WebSocket 释义:聊天室.服务.套接字.协议 引用:https://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/index ...