JavaScript

为什么学习JavaScript

  • HTML定义网页的内容
  • CSS描述网页的布局及渲染
  • JavaScript网页的行为
  • 三者之间相辅相成

定义

javascript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时动态的交互。

javascript是由三部分组成：ECMAScript、DOM、BOM

  • ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）
  • DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口(着重点)
  • BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口

Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的. 

ECMAScript 描述了以下内容：

  • 语法 
  • 类型 
  • 语句 
  • 关键字 
  • 保留字 
  • 运算符 
  • 对象 (封装 继承 多态) 基于对象的语言.使用对象.

引入方式

　　存在形式

　　存放位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

　　为什么推荐存放位置在body代码块的底部

  • HTML文档代码依次由上自下执行,预先加载CSS样式,而不会让用户看到单纯的文本内容
  • 如果head中js代码耗时严重,则导致用户长时间无法看到网页内容;如果放在底部,不会影响网页效果,减少等待时间

变量

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号，也可以在声明变量时对其赋值

推荐在每行js代码加一个分号，代表语句的结束

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
  
    // 全局变量
    name = 'Tony';
  
    function func(){
        // 局部变量   声明一个age变量
        var age;
         
        // 赋值操作
        age = 18;
         
        // 全局变量
        gender = "男"
    }
</script>

JavaScript中代码注释（此注释仅在Script块中生效）：

  • 单行 //
  • 多行 /*  */

常量和标识符

常量 ：直接在程序中出现的数据值

标识符的规范即变量规范在上文已介绍过

  

           

语句描述
break 用于跳出循环。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出（生成）错误 。
try 实现错误处理，与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时，执行语句块。

 

运算符

　　算数运算符

　　递增，递减

　　一元加减法

　　逻辑运算符

　　　　逻辑and运算符(&&)

　　　　逻辑and运算符(||)

　　　　&&常用操作

　　　　||常用操作

　　赋值运算符

　　运算符更新中

 

控制语句

1、条件控制语句

javascript支持俩个条件语句if和switch(选择控制语句)

　　if

　　switch

　　结语

2、循环控制语句

JavaScript中支持四种循环语句，分别是：for、for in、while、do-while

　　for、for in 

　　while、do while

3、label语句

　　更新中...

4、异常处理语句

数据类型

null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。
null、undefined

基本数据类型

　　Number

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换：

  • parseInt(..)    将某值转换成数字，不成功则NaN
  • parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

  •  NaN，非数字。可使用 isNaN(num) 来判断。
  • Infinity，无穷大。可使用 isFinite(num) 来判断。
Number 对数字的支持
Number.MAX_VALUE 最大数值
Number.MIN_VALUE 最小数值
Number.NaN 非数字
Number.NEGATIVE_INFINITY 负无穷大
Number.POSITIVE_INFINITY 正无穷大
Number.toExponential( ) 返回四舍五入的科学计数法，加参数为保留几位
Number.toFixed( ) 小数点后面的数字四舍五入，加参数为保留几位
Number.toPrecision( ) 四舍五入，自动调用toFixed()或toExponential()
Number.toLocaleString( ) 把数字转换成本地格式的字符串
Number.toString( ) 将数字转换成字符串
Number.valueOf( ) 返回原始数值

更多数值计算

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。
Math

　　String

String.length 字符串的长度
String.trim() 移除空白
String.trimLeft() 移除左侧空白
String.trimRight() 移除右侧空白
String.concat(value, ...) 拼接
String.slice(start, end) 切片
String.split( ) 分割
String.search( ) 从头开始匹配，返回匹配成功的第一个位置(g无效)
String.match( ) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个
String.replace( ) 替换，正则中有g则替换所有，否则只替换第一个匹配项；
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
String.charAt( ) 返回字符串中的第n个字符
String.charCodeAt( ) 返回字符串中的第n个字符的代码
String.fromCharCode( ) 从字符编码创建—个字符串
String.indexOf( ) 查找子字符串位置
String.lastIndexOf( ) 查找子字符串位置
String.localeCompare( ) 用本地特定的顺序来比较两个字符串
String.substr( ) 抽取一个子串
String.substring( ) 返回字符串的一个子串
String.toLocaleLowerCase( ) 把字符串转换小写(针对地区，在不知道程序在哪个语言环境中运行时用)
String.toLocaleUpperCase( ) 将字符串转换成大写(针对地区)
String.toLowerCase( ) 小写
String.toUpperCase( ) 大写
String.toString( ) 返回原始字符串值
String.toString() 返回原始字符串值
String.valueOf( ) 返回原始字符串值

常用转义字符

　　Boolean

布尔类型仅包含真假，与Python不同的是其首字母小写。即true和false，也代表1和0，也是常作用于条件语句

  • ==      比较值相等
  • !=       不等于
  • ===    比较值和类型相等
  • !===  不等于
  • ||        或
  • &&      且

　　Array(数组)

Array.length 数组的长度
Array.push() 尾部添加元素
Array.pop() 删除并返回数组的最后一个元素
Array.unshift() 在数组头部插入一个元素
Array.shift( ) 在数组头部移除一个头部元素
Array.slice( ) 切片
Array.reverse( ) 反转
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.concat( ) 拼接
Array.sort( ) 排序 按照最高位
Array 对数组的内部支持
Array.splice( start, deleteCount, value, ...)

插入、删除或替换数组的元素

obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1)    指定位置删除元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串 
 1 Array 对象用于在单个的变量中存储多个值。
 2 语法:
 3 
 4 创建方式1:
 5 var a=[1,2,3];
 6 
 7 创建方式2:
 8 new Array();     //  创建数组时允许指定元素个数也可以不指定元素个数。
 9 new Array(size);//if 1个参数且为数字,即代表size,not content
10     初始化数组对象:
11     var cnweek=new Array(7);
12         cnweek[0]="星期日";
13         cnweek[1]="星期一";
14         ...
15         cnweek[6]="星期六";
16 
17 new Array(element0, element1, ..., elementn)//也可以直接在建立对象时初始化数组元素，元素类型允许不同
18 
19 var test=new Array(100,"a",true);
数组创建方式
//即数组内包含数组

var cnweek=new Array(7);
for (var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";
二维数组
//  js中数组的特性
         //java中数组的特性,  规定是什么类型的数组,就只能装什么类型.只有一种类型.
         //js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
         //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
         var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')];
        /*  alert(arr5.length);//8
         arr5[10] = "hahaha";
         alert(arr5.length); //11
         alert(arr5[9]);// undefined */
数组特性

Function函数

1、定义及分类

注意：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以

2、参数

函数传参的个数可以小于实际需传参的个数，没传参的默认为undefined

参数传多默认不起作用

arguments参数   argument 对象包含了函数调用的参数数组。

　　arguments取最大值

　　arguments求和

3、作用域

js的作用域和py相似，if while等控制语句并没有自己作用域；而函数是有自己的作用域的

JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。

切记：所有的作用域在创建函数且未执行时候就已经存在。

3、闭包

闭包就是能够读取其他函数内部变量的函数。

 

4、面向对象

在JS中并没有类、但是它使用了函数充当了类

基于上述代码：

  • Foo充当的构造函数
  • this代指对象
  • 创建对象时需要使用 new
var v = 123;
function foo(){
    var v = 456;
    function inner(){
        console.log(v)   // 456 
    }
    return inner
}

result = foo()
console.log(result())    // undefined

/*    题中、当代码编译完成,函数在未执行
前作用域就已经存在,出现函数嵌套产生作
用域链,寻找值时会从内到外一层一层找,
找不到则出错
*/


Name='root';
Age = 18;
function Foo(name,age){
    // this代指obj
    this.Name = name;
    this.Age = age;
    this.Func = function(){
        console.log(this.Name,this.Age);     // 'alex' 666
        (function(){
            // this代指window
            console.log(this.Name,this.Age); // 'root' 18
        })();
    }
}
obj = new Foo('alex',666);
obj.Func()

/* js中用new的方式创建类对象 */
DEMO

5、补充

 

其它

A，Js时间处理

时间操作中有两种时间：

  • 时间统一时间
  • 本地时间（东8区）
Date                      // 操作日期和时间的对象
Date.getDate( )           // 返回一个月中的某一天
Date.getDay( )            // 返回一周中的某一天
Date.getFullYear( )       // 返回Date对象的年份字段
Date.getHours( )          // 返回Date对象的小时字段
Date.getMilliseconds( )   // 返回Date对象的毫秒字段
Date.getMinutes( )        // 返回Date对象的分钟字段
Date.getMonth( )          // 返回Date对象的月份字段
Date.getSeconds( )        // 返回Date对象的秒字段
Date.getTime( )           // 返回Date对象的毫秒表示
Date.getTimezoneOffset( ) // 判断与GMT的时间差
Date.getUTCDate( )        // 返回该天是一个月的哪一天(世界时)
Date.getUTCDay( )         // 返回该天是星期几(世界时)
Date.getUTCFullYear( )    // 返回年份(世界时)
Date.getUTCHours( )       // 返回Date对象的小时字段(世界时)
Date.getUTCMilliseconds( )// 返回Date对象的毫秒字段(世界时)
Date.getUTCMinutes( )     // 返回Date对象的分钟字段(世界时)
Date.getUTCMonth( )       // 返回Date对象的月份(世界时)
Date.getUTCSeconds( )     // 返回Date对象的秒字段(世界时)
Date.getYear( )           // 返回Date对象的年份字段(世界时)
Date.parse( )             // 解析日期/时间字符串
Date.setDate( )           // 设置一个月的某一天
Date.setFullYear( )       // 设置年份，也可以设置月份和天
Date.setHours( )          // 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段
Date.setMilliseconds( )   // 设置Date对象的毫秒字段
Date.setMinutes( )        // 设置Date对象的分钟字段和秒字段
Date.setMonth( )          // 设置Date对象的月份字段和天字段
Date.setSeconds( )        // 设置Date对象的秒字段和毫秒字段
Date.setTime( )           // 以毫秒设置Date对象
Date.setUTCDate( )        // 设置一个月中的某一天(世界时)
Date.setUTCFullYear( )    // 设置年份、月份和天(世界时)
Date.setUTCHours( )       // 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)
Date.setUTCMilliseconds( )// 设置Date对象的毫秒字段(世界时)
Date.setUTCMinutes( )     // 设置Date对象的分钟字段和秒字段(世界时)
Date.setUTCMonth( )       // 设置Date对象的月份字段和天数字段(世界时)
Date.setUTCSeconds( )     // 设置Date对象的秒字段和毫秒字段(世界时)
Date.setYear( )           // 设置Date对象的年份字段
Date.toDateString( )      // 返回Date对象日期部分作为字符串
Date.toGMTString( )       // 将Date转换为世界时字符串
Date.toLocaleDateString() // 回Date对象的日期部分作为本地已格式化的字符串
Date.toLocaleString( )    // 将Date转换为本地已格式化的字符串
Date.toLocaleTimeString() // 返回Date对象的时间部分作为本地已格式化的字符串
Date.toString( )          // 将Date转换为字符串
Date.toTimeString( )      // 返回Date对象日期部分作为字符串
Date.toUTCString( )       // 将Date转换为字符串(世界时)
Date.UTC( )               // 将Date规范转换成毫秒数
Date.valueOf( )           // 将Date转换成毫秒表示
Date方法

B，Js序列化

  • JSON.stringify(obj)    序列化
  • JSON.parse(str)        反序列化

C，Js转义

  • decodeURI( )                   URl中未转义的字符
  • decodeURIComponent( )   URI组件中的未转义字符
  • encodeURI( )                   URI中的转义字符
  • encodeURIComponent( )   转义URI组件中的字符
  • escape( )                         对字符串转义
  • unescape( )                     给转义字符串解码
  • URIError                          由URl的编码和解码方法抛出

D，eval

Js中的eval既可以运行代码也可以获取返回值

a = eval('1+1');
console.log(a); //2
  • eval() 
  • EvalError   执行字符串中的JavaScript代码

E，Js中的正则表达式

更新中...

BOM、DOM

 

BOM、DOM详情参见下一篇文章<详情点击>

 

posted @ 2019-03-17 16:39  初遇ぃ  阅读(174)  评论(0)  编辑  收藏  举报
//一下两个链接最好自己保存下来，再上传到自己的博客园的“文件”选项中 //一下两个链接最好自己保存下来，再上传到自己的博客园的“文件”选项中