Javascript基础
2016-09-09 15:53
387 查看
简介
前面我们学习了html和css,但是我们写的网页不能动起来,如果我们需要网页出现各种效果,那么我们就要学习一门新的语言了,那就是JavaScript,JavaScript是世界上最流行的脚本语言,而且Javascript和Python一样也是一门全栈开发语言,并且跨平台。浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。本文转自:http://www.cnblogs.com/wanghzh/p/5805932.html
代码存放位置
理论上放在body和head中都可以,但是推荐放在body代码块底部,因为Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。Js代码可以放在一个单独的文件中,然后通过 可以将其导入进来,或者直接在html文件中直接书写代码,如下面所示,其中两种方式的 type都可以不用写,因为浏览器默认的便是javascript
<script type="text/javascript"> Js代码内容 </script>
变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。name = 'test'; //不加var 定义的是全局变量 function f1() { //name = 123 ; // 不加var 函数里面修改的还是全局变量 var name = 'jason' // 加var 函数里面修改的是局部变量 }
数据类型
数字NumberJavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。下面来看一下代码示例
<script type="text/javascript"> var num1 = new Number(123); //创建了一个数字类型的对象 var num3 = Number(456); // 456 var num2 = 666; var s1 = 's123'; var num4 = parseInt(s1); console.log(num1.valueOf(),num2,num3); console.log(num4); // 返回NaN,非数字值 if(isNaN(num4)){ //isNan函数用于检查其参数是否是非数字值 console.log('not a number'); // not a number } else { console.log('a number'); } console.log(isFinite(num3)); // isFinite()有限数值返回true。 console.log(typeof num3); // 返回'number' var a = 1222.4444444; console.log(a.toFixed(2)); // 1222.44, 四舍五入2位 </script>
字符串
字符串是由字符组成的数组,在JavaScript中字符串是不可变的,下面来看一下代码示例
<script type="text/javascript"> a=' abcd '; a.trim().charAt(2); // 返回c,先去掉空格,然后找索引为2的字符串,从0开始 a.trim().substring(2,4); // 返回cd,切片,找到从索引2开始以及包括2在内的(4-2)=2个字符 a.trim().indexOf('a'); //返回0 a.trim().indexOf('bc'); //返回1 a.trim().indexOf('bc2'); //返回-1,表示不包含 a.trim().length; //返回4,表示字符串长度,注意length无括号,是字符串的一个属性 </script>
布尔值
布尔类型仅包含真假,与Python不同的是其首字母小写。下面来简单的看一下代码示例,
var a = 123; var s = '123'; console.log(a==s); // true console.log(a===s); // false 判断值和类型一样
数组
JavaScript中的数组类似于Python中的列表,里面也提供了一些内置方法,下面我们来看一下
var a = [1,2,3,4]; console.log(a.length); // 4 a.push(5); // 追加元素 console.log(a); // [1, 2, 3, 4, 5] var ret = a.pop(); //从后边拿掉一个元素 console.log(ret); // 5 a.unshift('aaa'); // 头部插入元素 console.log(a); // ["aaa", 1, 2, 3, 4] var ret1 = a.shift(); // 头部移除元素 console.log(ret1); // aaa var ret2 = a.slice(1,3); // 切片,拿到第二个和第三个元素,a.slice()可以复制一个数组 console.log(ret2); // [2,3] // obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 console.log(a); // [1,2,3,4] a.splice(1,0,'first'); // 指定位置插入元素,在第二个元素前边插入'first',第二个位置=0表示插入 a.splice(2,1,'second'); // 指定位置替换元素,在第三个元素的位置,删除一个元素,并替换成'second' a.splice(2,1); // 指定位置删除元素,删除第三个元素 console.log(a); // [1, "first", 3, 4] var b = ['22']; console.log(b.concat(a)); // 连接数组 ["22", 1, "first", 3, 4],把a连接到b上,形成新的大数组 console.log(a.join('-')); // 拼接字符串 1-first-3-4,把数组用-拼接形成字符串,类似python的'-'.join(a) console.log(a.reverse()); // 反转字符串 [4, 3, "first", 1] console.log([3,2,5].sort()) //对number数组进行排序
序列化
序列化就是将JavaScript中的数据类型转换成字符串,反序列化的过程则相反
var a = ['a','b']; typeof(a); // 返回"object",这是一个js对象 ret = JSON.stringify(a); // 序列化转成字符串 typeof(ret); // "string" var obj = JSON.parse(ret); typeof(obj); // "object" 反序列化,变为对象
eval(string)
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
eval('1+2*5-5') //返回6
正则表达式
JavaScript中支持正则表达式,其主要提供了两个功能:
test(string) 用于检测正则是否匹配
exec(string) 用于获取正则匹配的内容
注:定义正则表达式时,“g”、“i”、“m”分别表示全局匹配,忽略大小写、多行匹配。下面来简单的看一下使用
var a = /\d+h/; // 设定正则规则 a.test('123h434'); true a.test('12a34') false a.exec('123h434') ["123h"] a.exec('123e434'); null
时间
在JavaScript中,Date对象用来表示日期和时间。JavaScript中提供了时间相关的操作,分别为获取时间和设置时间,时间操作中分为两种时间,统一时间(UTC),以及本地时间(东8区)
var now = new Date(); now.getFullYear(); now.getMonth(); // 6, 月份,注意月份范围是0~11,6表示7月 now.getDate(); // 7, 表示7号 now.getDay(); // 3, 表示星期三 now.getHours(); // 19, 24小时制 now.getMinutes(); // 49, 分钟 now.getTime(); // 1435146562875, 以number形式表示的时间戳
语句
条件语句if(条件){ }else if(条件){ }else{ } switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }
循环语句
var names = ["alex", "tony", "rain"]; for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); } var names = ["alex", "tony", "rain"]; for(var index in names){ console.log(index); console.log(names[index]); } while(条件){ // break; // continue; }
异常处理
try { //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。 //e是一个局部变量,用来指向Error对象或者其他抛出的对象 主动跑出异常 throw Error('xxxx') } finally { //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。 }
函数
函数类型JavaScript中函数基本上可以分为一下三类,普通函数,匿名函数,自执行函数,此外需要注意的是对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。
// 普通函数 function func(arg){ return true; } // 匿名函数 var func = function(arg){ return "tony"; } func('hello'); //执行函数 // 自执行函数,两个括号包裹一个匿名函数 (function(arg){ // arg是形参 console.log(arg); })('123') // '123'是实参 // 此方法我知道的用法,一般在自定义js插件时使用,jquery也是定义在一个自执行函数中 // 另外还有一种jquery的使用方法,和自执行函数很像,这里说明一下 document.ready()有2种写法,在文档树加载完后执行的动作 $(function(){ }) // 简写 $(document).ready(function(){ })
函数作用域
JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。下面就是一个简单例子其实就是简单的闭包。
name = 'jason'; function f1() { var name = 'kobe'; function f2() { console.log(name); } return f2; } ret = f1(); ret(); //打印出kobef2函数的作用域已经定死,上一级作用域为f1
相关文章推荐
- javascript基础知识
- JavaScript 基础教程
- AJAX基础:JavaScript中类的实现
- javascript基础的动画教程,直观易懂
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->addRange 函数
- javascript学习中的一些心得(基础知识,高手免进)
- Ajax基础之一:JavaScript中的用户自定义类
- JavaScript基础知识
- javascript基础的动画教程,直观易懂
- JavaScript 基础教程(2)
- JavaScript(一、基础知识)
- 1)JavaScript面向对象的基础
- javascript基础知识
- JavaScript的继承(Ajax基础教程)
- JavaScript 基础教程(2)
- JavaScript学习:基础继承机制
- 关于javascript的基础知识
- javascript基础知识
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->add 函数
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->clear 函数