JavaWeb - JavaScript 细解

         JavaScript 细解 

   一 . 概述介绍

                HTML：就是用来写网页

                CSS ：  就是用来美化网页

                JavaScript 是WEB上强大的脚本语言

                             脚本语言 ： 无法独立执行，必须嵌入到其他语言中，结合使用，直接被浏览器解析执行

                             Java 编程语言 ： 独立写程序，独立运行 编译 - 执行

             作用 ： 控制页面特效显示

                                    JS对HTML元素进行动态控制

                                    JS可以对表单进行校验

                                     JS可以控制CSS样式

 

    二 . JavaScript 基本信息

                1.语言特征及编程注意事项 ：

                                    特征 ：JavaScript无需编译，直接被浏览器解析并执行           

                                                JavaScript无法单独运行，必须嵌入到HTML代码中运行        

                                                 JavaScript 的执行过程由上到下依次执行

                                    注意 ： JavaScript 没有访问系统文件权限(安全)

                                                 由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程

                                                 JavaScript 和 Java 没有任何直接联系

                     

                  2.JavaScript组成

                       ECMScript （ 核心 ）  - - -  规定了JS的语法和基本对象

                        DOM                           - - - 文档对象模型 ： 处理网页内容的方法和接口

                        BOM                           - - -  浏览器对象模型 ： 与浏览器交互方法和接口

                     

                   3.JavaScript 引入方式

                                         内部脚本 ： 在当前页面内部写script标签，script内部即可书写JavaScript代码          

                                                             格式 <script type="text/javascript"> JavaScript 的代码 </script>

                                                             注 ： script 标签理论上可以书写在HTML文件的任意位置

                                         外部引入 ： 在HTML文档中，通过<script src = "">标签引入.js文件

                                                             格式 ： <script type = "text/javascript" src = "javascript 文件路径"></script>

 

                    4.标签规范化

                                          开发规范规定，script标签的放置位置为： Body 结束标签前

                                          优点 ： 保证HTML展示内容优先加载，最后加载脚本，增强用户体验性

      三 . 语法及规则

               1.基本数据类型  ： 类似于Java中的基本数据类型   - - 五大数据类型

                               String ： 字符串类型 , “ ”  和 ’ ‘  都表示字符串，JavaScript 中没有单个字符串

                               Boolean ： 布尔类型 固定值为 true 和 false

                               number ： 数字类型 ， 任意数字

                               null    ：   空 ， 一个占位字符 

                               undefined ： 未定义类型 ， 该类型只有一个固定值，即undefined， 表示变量声明却未定义具体的值

                             

                              注 ：因为 undefined 是从null 中派生出来的，所以 undefined == null

                        JavaScript 区别于java是弱类型语言，变量的使用不要严格遵循规范，所以一个变量声明好之后是可以赋予任意类型的值

               2.引用数据类型 ： 引用类型通常叫做类（class），但在JavaScript中 ，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象

                                 var str = new String();

                                 var str = new String; JS 独有的方式

 

                3.变量 ：  标示内存中的一块空间，用于存储数据，且数据是可变的

                                  变量的声明 ： var 变量名； // 变量赋予默认值，默认值为undefined

                                  变量的声明和赋值 ： var 变量名 = 值 ； //变量赋予对应的值

                                   命名规范 ：  必须以字母或者下划线开头，中间可以是数字，字符或下划线

                                                        变量名不能包含空格等符号

                                                        不能使用JavaScript关键字作为变量名 ： eg ： function

                                                        JavaScript严格区分大小写

                 4.运算符 ： JavaScript 运算符与 Java运算符基本一致

                                       比较运算符
                                                    ==  逻辑等 ，仅仅对比值
                                                    === 全等 对比值并且对比类型   如果值和类型都相同，则为true ；值和类型有一个不同，则为false

                                        逻辑运算符
                                                      JavaScript 逻辑运算符没有&， | 等单独

                  5.注释

                                         单行注释 //
                                         多行注释  ：  / * * /

                   6.正则对象

                                           RegExp对象的创建方式 ： 
                                                                 var reg = new RegExp（表达式）； 开发中基本不用
                                                                 var reg = / ^ 表达式$/
                                                                 直接量中存在边界，即^代表开始， $代表结束

                                           test 方法 ：
                                                    正则对象 .test (string); 用来校验字符串是否匹配正则 ，全部字符匹配返回true ; 有字符不匹配返回false
                                                    普通方式 ： 除非全部字符不符合正则，返回false 只要有一个字符符合正则就返回true

                                            注意事项 ：
                                                     /^  表达式  $ /  只要有无法成立正则的字符存在，即为false 全部符合为true 适用于表单校验
                                                     /表达式/ 只要有成立正则的字符存在，即为true 全部不符合为false 适用于字符串查找，替换

    四 . JS数组对象

                        1 . JS数组的特性 ：  JS数组可以看做Java中的ArrayList 集合         

                                                数组中的每一个成员没有类型限制，及可以存放任意类型
                                                数组的长度可以自动修改

                        2 . 四种创建方式

                                                 1. var arr =  [ 1, 2, 3 ];
                                                 2. var arr = new Array();  数组默认长度为0
                                                 3. var arr = new Array (4); 
                                                     数组长度是4，相当于开辟了长度为4空间，每个元素都是undefined ，仅在显示数组时进行处理，undefined 为了方便显示变成了空字符串形式，其本质还是undefined
                                                  4. var arr = new Array(1, 2); 数组元素是1，2

                         3 . JS数组的常用属性/方法

                                                  length :  设置或返回数组中元素的数目
                                                  join()  :  把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔，不计入数组长度
                                                  pop()  :   删除并返回数组的最后一个元素
                                                  push()  ：  向数组的末尾位置添加一个或更多元素，并返回新的长度

                                                  reverse()  ：  颠倒数组中元素的顺序，物理反转

    

     五 . 函数

                     1 .  全局函数

                                             执行  ：  eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行
                                             作用  ：增强程序的扩展性
                                             注意  ： 只能传递基本数据类型的字符串，而不能传入字符串对象

                                             编码和解码
                                                       URL 编 码作用 ： 保证数据传递的完整性  中文及特殊符号  - > %16进制
                                                       encodeURI() 把字符串编码为URI
                                                       decodeURI()  解码某个编码的URI
                                             URI 和 URL 
                                                        URI 是统一资源标识符 标识资源详细名称
                                                        URI 标识资源的详细名称 包含资源名
                                                        URL 是统一资源定位器 定位资源的网络位置
                                                        URL 定位资源的网络位置 包含 http://
                                                       资源 ： 可以通过浏览器访问的信息统称为资源 (图片 ， 文本 ， HTML ， CSS等等)

                                            字符串转数字
                                                        parseInt() 解析一个字符串并返回一个整数
                                                        parseInt(string)  String 按照字面值转换为整数类型，小数点后面部分不关注 
                                                        parseFloat()  解析一个字符串并返回一个浮点数
                                                        parseFloat(string );  string 按照字面值转换为小数类型 
                                                       如果字符串的某个字符从字面上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。eg ： 11.5a55 -> 11.5

                     

                    2 .  自定义函数/自定义方法

                                               简述及作用
                                                         如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中
                                                          作用 ： 增强代码的复用性
                                                函数格式  ：  function 方法名(参数列表){ 函数体}
                                                           JavaScript 函数定义必须用小写的function
                                                           JavaScript函数无需定义返回值类型，直接再function后面书写方法名
                                                           参数的定义无需使用var 关键字，否则报错
                                                           JavaScript 函数体中 ，return可以不写 ，也可以return 具体值，或者仅仅写return；
                                                 注意事项
                                                           JavaScript 函数调用执行完毕一定有返回值，值及类型根据return 决定，如果未return具体值，返回值为undefined  
                                                            JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义
                                                            因为 JavaScript 不存在函数重载，所有JavaScript 仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用
                                                            如果形参为赋值，就使用默认值undefined

 

                     3 . 自定义对象

                                                function 构造函数
                                                            JavaScript 中的引用数据类型都是对象，而对象在JavaScript 中 可以用函数来表示
                                                            无形参格式 ： function 对象名 () { 函数体 }
                                                                                    为属性赋值 ： 1，构造参数赋值 ； 2. 创建对象后，调用属性进行赋值
                                                                                   属性定义方式 : 1.this 关键字， 在对象声明定义阶段，定义一个属性； 2. 创建对象后， 使用对象，属性方式，动态定义属性
                                                            带参数格式 ： function 对象名(参数列表){  函数体 }
                                                                                   eg ： function Persion (a,b){ alert( a + " -- - "+ b);} var p = new Persion(1,2);
                                                                                   应用场景 ： 适用于对象构建及代码复用
                                                对象直接量
                                                           开发中可以用一种简单的方式直接创建自定义大JavaScript 对象 ，这种方式称为“对象直接量”
                                                           格式 ： var 对象名 = { 属性名1：“ 属性值 ”，属性名2 ：“属性值2”， ...... };
                                                           注 ： 该方式直接创建出实例对象，无需构建函数 ，无需new 创建实例对象，直接使用即可
                                                           应用场景 ： 适用于快速创建实例对象及数据封装