JavaScript教程之快速入门

简介: JavaScript教程之快速入门

JavaScript教程


js简介


javaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。


在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。[1]

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。


快速学习


一、使用语法规范


① 在html代码里边引入js语言
1. <script  type=”text/javascript”>具体js代码</script>
2. <script  type=”text/javascript” src=”js文件”></script>
1. ② 代码大小写敏感
2. 
3. true/false       布尔值
4. TRUE/FALSE   非布尔值
5. 
6. ③ 结束符号
7.   每个简单语句使用”;”分号结束,与php类似


在javascript里边,该分号不是必须的,但是推荐使用

④ 注释

// 单行注释

/多行注释/

⑤ 变量

其值可以发生改变的量就是变量。

变量是内存中运行的最小单位


var name = “tom”;
var age = 23;
var address_123 = ‘北京’;

变量名字命名规则:

js里边:字母、数字、下划线、$符号、汉字 等5个组成部分,数字不能作为名字的开始内容。


1. var  shoudu = “xxxx”;
2. var abc_$_123 = “hello”;
3. var  首都 = “北京”;
4. var 99_num = 101;  //错误变量名字


⑥ 数据类型

1. javascript(6种):  number(int/float)  string   boolean   null   undefined   object
2.       (数组是对象的一部分)
3. 
4. null类型:空对象 类型。


问:什么时候使用null?

答:使用null声明变量可以提高代码可读性,

可以预先声明一个null类型的变量,后期使用一个具体对象进行赋值。


1. var  name = “”;
2. var  age  = 0;
3. var  per  = null;   //先声明,后期再使用具体对象进行赋值


undefined未定义类型:使用一个没有声明的变量。

⑦ typeof 判断变量的数据类型

判断变量的数据类型


console.log(typeof 10);//number• 1


二、Number数值数据类型


1、分为十进制、八进制、和十六进制

例如:

1. console.log(10);//十进制
2. console.log(065);//八进制
3. console.log(0xbcd);//十六进制


2、浮点数:即点小数点的数

1. console.log(10.0);
2. console.log(0.23);
3. console.log(14.3);


3、最大数和最小数

1. Number.MAX_VALUE
2. Number.MIN_VALUE


4、无穷大数

两个最大数的算术和超出了javascript的表示范围,就显示无穷大infinity

或者一个数去除以0,获得的结果也是infinity

console.log(Number.MAX_VALUE*2);• 1


三、运算符


1、算数运算符


1. +  -   *   /   %取余数(模)    ++  --
2. i++ : 先赋值、再++计算  
3. ++i : 先++计算,再赋值


注意:

i++和++i在没有赋值的时候进行运算的时候结果是一样的,但是

在赋值的情况下:i++是先赋值再运算,而++i是先自增加一再进行运算。


2、比较运算符

1. >    <    >=     <=     !=     ==
2. ===全等于    !==不全等于
3. 
4. 全等于===:比较值的类型和数据大小
5. 等于==: 比较值的数据大小
6. console.log(10==’10’);      //true
7. console.log(10===’10’);     //false
8. console.log(10===10);       //true
9. 
10. 比较运算符的返回信息是boolean结果信息


3、逻辑运算符

1. 逻辑或||:其中之一为真,结果为真
2. 逻辑与&:都为真,结果为真
3. 逻辑或!:结果和运算结果相反


四、流程控制


1. ***顺序结构***
2. 分支选择结构:if  else if  else    switch
3. 循环结构:while(){}   do{}while()   for()


switch用法:


1. switch(变量){
2. case  常量:
3. 分支;break;
4. case  常量:
5. 分支;break;
6. case  常量:
7. 分支;break;
8. default:
9. 分支;break;
10. }

两个关键字:break和continue

1. break:在循环、switch里边有使用
2.        结束当前的本层循环,跳出switch的分支结构
3. continue:在循环里边使用
4.    跳出本次循环,进入下次循环


注意:可以通过设置标志位来改变


1. for1
2. flag:
3. for2
4. pig:
5. for3
6. for4
7. break  flag/pig;   //把flag/cat标志的循环给结束
8. continue  flag/pig;     //结束flag/cat标志的当前循环,进入下次循环


六、函数function


函数声明


1、第一种方式(常规方式):


1. function  函数名(){}
2.     该方式的函数有“预加载”过程,允许我们先调用函数、再声明函数
3.     **预加载**:先把函数的声明放入内存。代码看起来是先调用、后声明,本质是先声明、后调用的。
4. 
5. 函数名();
6. function  函数名(){}
7. 
8. 函数先调用、后声明的条件是:全部代码在同一个”<script>”标记里边。

2、声明函数赋值(匿名函数):

1. var  函数名 = function(){}
2. 在javascript里边,函数就是一个变量,数据类型是对象。
3. 该方式没有“预加载”,必须“先声明、后调用”。


函数参数


1、实参和形参:


1. function(param1,param2){}//在声明的时候,称为形参
2. function(param1,param2);//在调用的时候,称为实参


注意:在javascript里边:实参与形参个数没有严格的对应要求


2、关键字arguments:


1. function  函数名(){}  //函数声明没有形参
2. 函数名(实参,实参);  //调用的时候有传递实参


例如:


1. //声明函数
2. function fun(){
3. var length = arguments.length;//获取参数
4. if(length == 1){
5. console.log(arguments[0]);
6.     }else if(length == 2){
7. console.log(arguments[0] + "---" + arguments[1]);
8.     }
9. }
10. //函数调用
11. fun("hello");//hello
12. fun("hello","world");//hello---world


3、callee关键字


1. 意思:在函数内部使用,代表当前函数的引用(名字)。
2. 作用:降低代码的耦合度。
3. 
4. 耦合度:一处代码的修改会导致其他代码也要发生改变(耦合度高)
5.     在项目里边要开发低耦合度的代码(一处代码修改尽量少地引起其他代码的变化)。


例如:


1. function fun(){
2. arguments.callee();   //调用本函数(或者fun())
3. }
4. fun();


4、函数返回return



1. function 函数名称(){
2.     函数执行体代码...
3. return  信息;
4. }
5. console.log(函数名称());  //可以输出函数的return信息
6. var fun1 = 函数名称();     //可以使得return信息对变量进行赋值
1. 一个函数执行完毕可以通过return关键字返回一定的信息,该信息可以直接输出、也可以进行变量赋值。return本身还有结束函数的执行效果。
2. 在一定意义上看,全部的数据类型(数值、字符串、布尔、对象、null)信息都可以返回(undefined类型无需返回,本身无意义)
3. 
4. 在javascript里边函数return除了可以返回基本类型的信息,其还可以返回function函数。
5. 
6. 在javascript里边,一切都是对象
7. 在一个函数内部,可以声明数值、字符串、布尔、对象等局部变量信息,言外之意就还可以声明函数(函数内部还要嵌套函数)变量信息,因为函数是对象,并且函数可以被return给返回出来。


值传递和引用传递:


值传递:


1. var a = 1;
2. var b = a;//数值与数值之间的传递


引用传递:


1. var fun = function(){
2. console.log(11111);
3. }
4. var fun1 = fun();//对象之间的传递


七、函数调用


1、第一种方式:


函数名();• 1


2、第二种方式:


(function(){})();• 1


八、全局变量/局部变量


1、全局变量


1.     ① 在函数外部声明的变量
2.     ② 函数内部不使用“var”声明的变量(函数调用之后起作用)


例如:


1. var a = 10;
2. function test(){
3.     b = 10;
4. }


2、局部变量:


javascript里边:在函数内部声明的变量,变量前边有”var”关键字。• 1


九、数组


1、什么是数组(what):


1. 有许多变量,它们的名称和数据类型都是一致的,把这些变量的集合称为“数组”。
2. (实际应用中数组内部各个元素的数据类型可以是不同的)


2、数组的声明:


1. 三种方式:
2. ① var arr = [元素,元素,元素。。。];
3. ② var arr = new Array(元素,元素,元素。。。);
4. ③ var arr = new Array();
5. arr[0] = 元素;
6. arr[1] = 元素


3、获取数组的长度:


数组.length;• 1


4、遍历数组:


1. ① for循环 遍历    //适合遍历下标是0/1/2/3..等规则、连续的数组
2. ② for-in遍历       //数组、对象都可以遍历,并且数组的下标没有具体要求


5、常用方法:


1. push() //在数组尾部增加一个元素
2. pop() //在数组尾部删除一个元素
3. indexOf() //从数组的第一个元素开始,判断一个元素第一次出现的位置
4. lastIndexOf()//从数组的最后一个元素开始,判断一个元素第一次出现的位置


十、字符串


1. 定义:通过(单/双)引号把键盘上用于显示的一些信息给括起来,就是一个字符串
2. var  name = ‘JavaScript’;
3. var  addr  = “hello JavaScript”;


十一、eval


1. eval(参数字符串)
2. 该eval可以把内部参数字符串当成表达式,在上下文环境中运行。
3. 该eval()经常用于把其他用户传递过来的字符串信息转变为javascript的实体(对象、数组等)信息。
4. eval(参数字符串):参数要求必须符合js语法规则。

$(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); });

相关文章
|
5月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
209 0
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
45 0
|
4月前
|
JavaScript NoSQL 前端开发
|
5月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
433 3
|
6月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
75 2
|
5月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
240 0
|
5月前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
70 0
|
5月前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
50 0
|
5月前
|
JavaScript
文件查询匹配神器 【glob.js】 实用教程
文件查询匹配神器 【glob.js】 实用教程
71 0