美文网首页
Web 基础 3 JavaScript 入门

Web 基础 3 JavaScript 入门

作者: 小熊先生很不开心 | 来源:发表于2018-03-23 18:18 被阅读19次

    1.1JavaScript的概述

    1.1.1什么是JavaScript

      JavaScript是web上一种功能强大的编程语言,用于开发交互式的web页面。它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行。

    • JavaScript 被设计用来向 HTML 页面添加交互行为。
    • JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
    • JavaScript 由数行可执行计算机代码组成。
    • JavaScript 通常被直接嵌入 HTML 页面。
    • JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
    • JavaScript的组成:
      • 核心(ECMAScript)
        • ECMAScript:语法,语句.
      • 文档对象模型(DOM)
        • BOM:浏览器对象
      • 浏览器对象模型(BOM)
        • DOM:Document Object Model.操作文档中的元素和内容.

    1.1.2 JavaScript的作用

      使用JavaScript添加页面动画效果,提供用户操作体验。主要应用有:嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

    1.1.3 JavaScript的引入

      在HTML文件中引入JavaScript有两种方式,一种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式,另一种是链接外部JavaScript脚本文件,称为外联式。对他们的具体讲解如下:

    • 内嵌式,在HTML文档中,通过<script>标签引入,如下
    <script type="text/javascript">
        //此处为JavaScript代码
    </script>
    
    • 外联式,在HTML文档中,通过<script src=””>标签引入.js文件,如下:
    <script src="1.js" type="text/javascript" charset="utf-8"></script>
    

    1.2 JavaScript语法及规则

      JavaScript的语法和Java的语法有很多相似之处,这里就进行简明的介绍

    1.2.1 注释

    -单行注释

    //
    Hbuilder快捷键 ctrl+/
    
    • 多行注释
    /* */
    Hbuilder快捷键 ctrl+shift+/
    

    1.2.2 变量

    • 变量简述

      • 变量:标示内存中的一块空间,用于存储数据,且数据是可变的。
      • 变量的声明:
        • var 变量名; //变量赋予默认值,默认值为undefined (未定义的)
      • 变量的声明和赋值:
        • var 变量名=值; //变量赋予对应的值
      • 在声明JavaScript变量时,需要遵循以下命名规范:
        • 必须以字母或下划线开头,中间可以是数字、字符或下划线
        • 变量名不能包含空格等符号
        • 不能使用JavaScript关键字作为变量名,如:function、this、class
        • JavaScript严格区分大小写。
    • 基本数据类型

      • 类似于java中的基本数据类型
        • string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
        • boolean 布尔类型。 固定值为true和false
        • number 数字类型。 任意数字
        • null 空,一个占位符。
        • undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未 定义具体的值。
        • 注:因为undefined是从null中派生出来的,所以undefined==null
      • JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值
      • 通过typeof运算符可以分辨变量值属于哪种基本数据类型
    • 引用数据类型

      • 引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
      • 标准创建方式:
        • var str = new String();//和java相同
        • var str = new String; //js独有的方式

    1.2.3 运算符

    • 这里就列举与Java中不同的

    • 比较运算符

      • == 表示值相等
      • === 表示值相等且数据类型相等
      • "10" 和 10 == 为true === 返回 false
    • 逻辑运算符

      • 有 && || !
      • 没有 & |

    1.2.4正则对象

    • RegExp对象的创建方式

      • var reg = new RegExp("表达式"); (开发中基本不用)
      • var reg = /^表达式$/; 直接量(开发中常用)
      • 直接量中存在边界,即^代表开始,$代表结束
      • 直接量方式的正则是对象,不是字符串,别用引号
    • test方法

      • 正则对象.test(string);
        • 用来校验字符串是否匹配正则。
        • 全部字符匹配返回true;有字符不匹配返回false
    • 正则对象使用注意事项

      • /^表达式$/
        • 只要有无法成立正则的字符存在,即为false。
        • 全部符合为true(检查严格,眼睛不揉沙子)
        • 适用于表单校验
      • /表达式/
        • 只要有成立正则的字符存在,即为true。
        • 全部不符合为false(检查不严格,懒人思想)
        • 适用于字符串查找、替换

    1.2.5 JS数组对象

    • JS 数组的特性
      • JS数组可以看做 Java中的ArrayList 集合。
        • 数组中的每一个成员没有类型限制,及可以存放任意类型
        • 数组的长度可以自动修改
    • JS 数组的四种创建方式
      • var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5
      • var arr = new Array();创建一个数组对象,数组长度默认为0
      • var arr = new Array(4);
        • 数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)
      • var arr = new Array(“a”,”b”,true); //创建了一个数组,长度3, 数组元素是”a”,”b”,true
    • JS 数组的常用属性/方法
    方法摘要
    length() 设置或返回数组中元素的数目。
    join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
    pop() 删除并返回数组的最后一个元素
    push() 向数组的末尾添加一个或更多元素,并返回新的长度。
    reverse() 颠倒数组中元素的顺序。

    物理翻转:就是把元素下标进行互换

    1.2.6全局函数(global)

    • 执行
      • eval() 计算JAVAScript字符串并把它作为脚步来执行
      • 作用:用于增强程序的扩展性。
      • 只可以传递原始数据类型string,传递String对象无作用。
    • 编码和解码
      • encodeURI() 把字符串编码为URI
      • decodeURL() 解码某个编码的URI
      • URL/URI编码:中文及特殊符号 %16进制
      • 作用:保证数据传递的完整性。
    • URI和URL的区别
      • URI是统一资源标识符。 标识资源详细名称。
      • URL是统一资源定位器。 定位资源的网络位置。
      • 资源:可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS等等。。。。)
      • URI标识资源的详细名称,包含资源名。
      • URL定位资源的网络位置。包含http://
    http://www.itcast.cn/           是URL
    /a.html                     是URI
    http://www.itcast.cn/a.html     既是URL,也是URI
    
    
    • 字符串转数字
      • parseInt(string);

        • string按照字面值转换为整数类型,小数点后面部分不关注。
      • parseFloat(string);

        • string按照字面值转换为小数类型。
      • 注意事项

        • 如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值。(例如:11.5a55,parseInt结果11,parseFloat结果11.5)
        • 如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaN:
          NaN(Not A Number,一个数字类型的标识,表示不是一个正确的数字)

    1.2.7 自定义函数/自定义方法

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

    1.2.8 自定义对象(扩展)

    • function 构造函数
      • 我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。相当于java中创建某个class类
    无參格式
        function 对象名(){
            函数体
        }
        
    
    function Person(){
        alert("hahah")
    }
    
    var p = new Person();
    
    
    带参数格式
        function 对象名(参数列表){
            函数体
        }
    
    
    function Person(a,b){
        alert(a + "--" + b);
    }
    
    var p = new Person(1,2);
    
    有属性格式:
        function 对象名(){
            this.属性名1=属性值1;
            this.属性名2=属性值2;
            …….
    }
    this表示当前对象。
    
    function Person(){
        this.name = "小米";
        this.age = 18;
    }
    
    function Student(a,b){
        this.name = a;
        this.age = b
    }
    
    function Person(){
        
    }
    
    var p = new Person();
    p.name = "aa";
    p.age = 16;
    

    应用场景:适用于对象构建及代码复用。

    • 对象直接量
      • 开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。
    格式:
        var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};
    

    注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可

    var p = {name:"小米",age:18}
    

    应用场景:适用于快速创建实例对象及数据封装。

    1.3 BOM对象

    1.3.1 BOM对象简述

    • BOM(Browser Object Model)浏览器对象模型

      • 浏览器:IE、火狐、谷歌等
      • 作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)
    • window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。

    1.3.2 BOM :Window对象

    • 方法:定时器
    函数名 描述
    setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
    clearInterval() 取消由 setInterval() 设置的 timeout。
    setTimeout() 在指定的毫秒数后调用函数或计算表达式
    clearTimeout() 取消由 setTimeout() 方法设置的 timeout
    • 定时器的案例
      • 循环定时器的启动和取消
      • 启动循环定时器-setInterval()
        循环定时器,调用一次就会创建并循环执行一个定时器。
    格式
        setInterval(调用方法,毫秒值);
        //毫秒值:  循环周期
    
    
    
    function run1(){
        alert("我是run1");
    }
    //执行下句后,每隔1秒就会调用一次run1方法
    setlnterval("run1()",1000)
    
    • 停止循环定时器-clearInterval()
      • etInterval方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
        此定时器ID在当前页面是不重复的。

      • 我们可以通过clearInterval方法,指定某个循环定时器 停止

    格式:
        clearInterval(定时器ID);
    
    
    function run1(){
        alert("我是run1");
    }
    //设置一个定时器,定时器ID保存在变量i中
    var i = setlnterval("run1()",1000);
    //取消这个ID对应的定时器
    clearInterval(i);
    
    • 一次性定时器的设置和取消
      • 启动一次性定时器-setTimeout()
      • 一次性定时器,调用一次就会创建并执行一个定时器一次。
    格式
    setTimeout(调用方法,毫秒值);
    
    
    function run1(){
        alert("我是run1");
    }
    //设置一个定时器,定时器执行一次
    setTimeout("run1()",1000)
    
    • 停止一次性定时器clearTimeout()

      • etTimeout方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
      • 此定时器ID在当前页面是不重复的。
      • 我们可以通过clearTimeout方法,指定某个一次性定时器 停止
    • 消息框

    函数名 描述
    alert() 显示带有一段消息和一个确认按钮的警告框。
    confirm() 显示带有一段消息以及确认按钮和取消按钮的确认框。
    prompt() 显示可提示用户输入的提示框 ,点击确定获得用户输入数据
    • 消息框案例
    • 警告框,用来弹出警告消息。
    alert("你好")
    
    alert.png

    注:不同浏览器显示的组件样式不同,这里我们无需关注组件样式。

    • 确认框,用于告知用户信息并收集用户的选择
    confirm("确定或者取消");
    
    
    comfirm.png

    该方法有返回值,用户通过选择“确定”或者“取消”,方法结束会返回boolean类型的值。

    • “确定”返回true;
    • “取消”返回false;

    1.3.3BOM :Location对象

    • href属性:设置或返回完整的 URL。
    header 1 header 2
    row 1 col 1 row 1 col 2
    row 2 col 1 row 2 col 2
    <script type="text/javascript">
        function change(){
            location.href = "http://www.itheima.com";
        }
    </script>
    
    <input type="button" value="点我" onclick="change()"/>
    
    

    1.3.4BOM :History对象(了解)

    • go() 方法:跳转到指定页面
      • go(-1) 加载前一个连接,等效back()
      • go(1) 加载后一个链接,等效forward()

    相关文章

      网友评论

          本文标题:Web 基础 3 JavaScript 入门

          本文链接:https://www.haomeiwen.com/subject/tmgxcftx.html