• JavaScript


    一、Javascript介绍

    1、JavaScript的诞生

    1994 年,网景公司(NetScape)发布了Navigator浏览器0.9版, 这是历史上第一个比较成熟的浏览器,引起了广泛关注。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。网景公司急需要一门网页脚本语言,使得浏览器可以与网页进行互动。

    1995年5月,网景公司做出决策,未来的网页脚本语言必须"看上去与Java足够相似",但是比Java简单,使得非专业的网页作者也能很快上手。

    1995年4月,网景公司录用了34岁的系统程序员Brendan Eich,他只用10天时间就把Javascript设计出来。

    2、JavaScript语言的前世今生

    • 1995.2月 Netscape公司发布LiveScript,后临时改为JavaScript,为了蹭上Java的热浪。
    • 欧洲计算机制造商协会(ECMA)英文名称是European Computer Manufacturers Association
    • 1997 年,以JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39(ECMA的小组) 锤炼出了 ECMA-262,也就是ECMAScript1.0。
    • 1998年6月,ECMAScript 2.0版发布。
    • 1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。
    • 2007年10月,ECMAScript 4.0版草案发布:分歧太大,失败告终。
    • 2009年12月,ECMAScript 5.0版正式发布
    • 2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015。

    ...

    3、JavaScript来源于借鉴

    • 借鉴C语言的基本语法;
    • 借鉴Java语言的数据类型和内存管理;
    • 借鉴Scheme语言,将函数提升到"第一等公民"(first class)的地位;
    • 借鉴Self语言,使用基于原型(prototype)的继承机制。

    4、什么是JavaScript?

    JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

    解释型语言:程序执行之前,不需要编译,直接运行时边解析边执行的语言

    编译型语言:程序执行之前,需要一个专门的编译过程,把程序编译成为机器语言的文件,比如exe文件

    5、JavaScript的特点

    • 简单易用:可以使用任何文本编辑工具编写;只需要浏览器就可以执行程序。
    • 解释执行(解释语言):事先不编译;逐行执行;无需进行严格的变量声明。
    • 基于对象:内置大量现成对象,编写少量程序可以完成目标。

    6、JavaScript的组成

    ECMAScript +DOM+BOM

    ECMAScript

    • JavaScript的语法标准
    • ECMA是一个组织,即欧洲计算机制造商协会
    • ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
    • JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容

    DOM

    • JavaScript操作网页上的元素的API

    BOM

    • JavaScript操作浏览器的部分功能的API

    7、JavaScript的使用场景

    随着JavaScript这门语言的完善,我们可以用它来进行前端开发、后端开发和移动端开发。当然,学习这门语言最开始的突破口在于前端开发。我们一起看看在前端领域它能做什么吧!

    1. 页面特效
    2. 动态数据处理
    3. 网页小游戏
    4. 动画特效
      .....

    8、JavaScript和HTML、CSS的关系

    • Html:是用来制作网页,简单来说就是编写网页结构
    • CSS: 美化网页(样式)
    • Javascript:实现网页与客户之间互动的桥梁,让网页具有丰富的生命力

    二、JavaScript基本语法

    1、JS的书写形式

    行内式

    方式一:

    <button onclick="alert('今天天气很好!');">今天天气?</button>
    

    虽然可以写在标签的属性中,但是结构与行为耦合,不方便维护,不推荐使用

    方式二:

    <a href="javascript:alert('你点疼我了!!');">点我</a>
    

    页内式

    写法:

    <body>
          ......
         <script type="text/javascript">
            alert("今天天气很好!");
         </script>
    </body>
    

    注意事项:

    <script></script>标签中的 js 代码一般写在文档的尾部;

    网页是从上至下加载,而js代码通常是给标签添加交互(操作元素),所以需要先加载HTML,否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);

    HTML页面中出现<script>标签后,就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。

    所以如果把 js 代码如果写在head中,那么js代码执行完毕之前后续网页无法被加载。

    外链式

    写法:

    <script type="text/javascript" src="01-js书写格式.js"></script>
    

    注意事项:

    外链式的script代码块中不能编写js代码,即便写了也不会执行

    <script type="text/javascript" src="index.js">
          alert("今天天气很好!"); // 不会被执行
    </script>
    

    由于每次加载外链式的js文件都会发送一次请求,这样非常消耗性能,所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。

    2、JS的注释

    单行注释

    // 这是单行注释
    

    多行注释

    /* 这是多行注释 */
    

    标准注释

    /**
     * 文件名:xx.js
     * 作者:xxx
     * 描述:本js的功能
     * 修改人:xxx
     * 修改时间:
     * 修改内容:
     */
    

    3、JS常见的输出方式

    弹窗

    弹出框:

    alert("提示信息!"); // window.alert("提示信息!"); 
    

    提示框:

    //利用对话框返回的值 (true 或者 false)  
    if (confirm("你确定提交吗?")) {
        alert("点击了确定");
    } else {
        alert("点击了取消");
    }
    

    对话框:

    var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name
    //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值  
    if (name) //如果返回的有内容  
    {
        alert("欢迎您:" + name)
    }
    

    控制台输出

    console.log('输出信息');
    console.warn('警告信息');
    console.error('错误信息');
    

    向body中输出

    document.write('你好');
    document.write('<h3>你好</h3>');
    

    JS 细节点

    1. 编写Javascript注意语法规范,一行代码结束后必须在代码最后加上 ;
    2. 在JavaScript中是严格区分大小写的
    3. JavaScript中会忽略多个空格和换行

    4、字面量、变量、常量

    概念

    • 字面量:字面量就是一个值,比如变量的值和常量的值。(字母、数字、字符串 ……)
    • 变量:定义完成后,可以修改的数据。
    • 常量:定义完成后,固定且不能改变的数据。

    变量

    • 概念:变量可以用来保存字面量,而且变量的值是可以改变的。

    • 定义变量:在JS中用var关键字来声明一个变量。

      • 格式:var 变量名 ,比如: var name; var age;
      • 同时声明多个变量:var name, age;
    • 变量初始化

      • 先定义后初始化:
      var a;
      a = 100;
      
      • 定义的同时初始化:
      var a = 100;
      
    • 变量的默认值:如果变量初始化时没有赋值,则里面存储的是 undefined

    • 变量的命名规范和规则

      • 命名规则:必须遵循,不遵循则报错。
      1. 由字母、数字、下划线、$符号组成,不能以数字开头。
      2. 不能是关键字和保留字。
      3. 区分大小写
      • 命名规范:建议遵循,不遵循不会报错。
      1. 变量名最好见名知意
      2. 遵守驼峰命名法:首字母小写,后面单词首字母大写。例如:myName

    常量

    在ES6之前并没有声明常量的方法,在ES6中新增加了const来定义常量。

    建议常量的命名全部大写,如果由多个单词构成,可以用下划线隔开。

    5、数据类型

    数据类型定义

    数据类型指的就是字面量的类型。程序在运行过程中会产生各种各样的临时数据, 为了方便数据的运算和操作,JavaScript对这些数据进行了分类,提供了丰富的数据类型。

    数据类型划分

    • 基本数据类型
      • String:字符串
      • Number:数值
      • Boolean:布尔值
      • Null:空值
      • Undefined:未定义
    • 引用数据类型
      • Object:对象

    数据类型查看

    typeof 操作符,会将检查的结果以字符串的形式返回给我们。

    var a = '34';
    console.log(typeof(a));
    

    Number

    • 定义:在JS中所有的数值都是Number类型,包括整数和浮点数(小数)
    • 最大数和最小数:由于内存的限制,ECMAScript 并不能保存世界上所有的数值。
    // 最大值:Number.MAX_VALUE
    console.log(Number.MAX_VALUE);
    // 最小值:Number.MIN_VALUE
    console.log(Number.MIN_VALUE);
    // 无穷大:Infinity, 如果超过了最大值就会返回该值
    console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
    // 无穷小:-Infinity, 如果超过了最小值就会返回该值
    console.log(typeof Infinity); // number
    console.log(typeof -Infinity); // number
    
    • NaN:是一个特殊的数字,表示 非法数字 Not A Number;使用typeof 检查一个NaN也会返回number。

    注意事项:

    1. 在JS中整数的运算可以保证精确的结果
    2. 在JS中浮点数的运算可能得到一个不精确的结果。所以千万不要使用JS进行对精确度要求比较高的运算

    String

    字符串是由单引号和双引号括起,ES6 模板字符串 ``

    var a = "Hello";
    console.log(typeof(a)); // string
    var b = 'Hello';
    console.log(typeof(b)); // string
    var c = `Hello`;
    console.log(typeof(c)); // string
    

    注意事项:

    1. 不能一单一双,引号必须成对出现。
    2. 相同引号不能嵌套,不同引号可以嵌套。

    Boolean

    概念:布尔型也被称为逻辑类型或者真假值类型,只有能够获取真(true)和假(false)两种数值。

    虽然 Boolean 类型的字面值只有两个,但ECMAScript中所有类型的值都有与这个Boolen值等价的值

    • 任何非零数值都是true,包括正负无穷大。只有 0 和 NaN是false
    • 任何非空字符串都是true,只有空字符串是false
    • 任何对象都是true,只有null和undefined是false

    Null 和 Undefined

    • Undefined 是一种比较特殊的类型,表示变量未赋值,这种类型只有一种值就是undefined

    • undefined 是 Undefined 类型的字面量

      • undefined 和 168、“like”一样是一个字面量
      • Undefined 和 Number、String 一样是一个数据类型
      • typeof 对没有初始化和没有声明的变量都会返回 undefined
    • Null 类型也是只有一个值的数据类型,这个特殊的值是 null

      • 从语义上看null表示的是一个空的对象,所以使用 typeof 会返回一个Object
      var str = null;
      console.log(typeof str); // object
      
    • undefined值实际上是由null值衍生出来的,所以如果比较undefined和n ll是否相等,会返回true

    var str1 = null;
    var str2 = undefined
    console.log(str1 == str2);	// true
    console.log(str1 === str2);	// false
    

    6、数据类型转换

    定义

    将一个数据类型转换为其他的数据类型,比如:将String类型转换为Number类型,将Number类型转换为Boolean类型...

    类型转换主要指,将其他的数据类型,转换为String Number Boolean

    将其他的数据类型转换为String

    方式一:调用被转换数据类型的toString()方法

    注意:

    1. 该方法不会影响到原变量,它会将转换的结果返回
    2. null和undefined这两个值没有toString()方法,如果调用它们的方法,会报错
    3. number 类型的 toString()方法可以带一个进制参数

    使用:

    var num = 12306;
    var str = num.toString();
    console.log(typeof num ); // number
    console.log(str); // 12306
    console.log(typeof str); // string
    
    var num1 = true;
    var str1 = num1.toString();
    console.log(str1); // true
    console.log(typeof str1); // string
    
    var num2 = undefined;
    var str2 = num2.toString(); // 报错
    console.log(str2);
    
    var num3 = null;
    var str3 = num3.toString(); // 报错
    console.log(str3);
    
    var num4 = NaN;
    var str4 = num4.toString();
    console.log(str4); // NaN
    console.log(typeof str4); // String
    
    var num5 = 123.5;
    var str = num5.toString(2);
    console.log(str); // 1111011.1
    console.log(typeof str); // string
    

    方式二:调用String()函数,并将被转换的数据作为参数传递给函数

    注意:

    使用String()函数做强制类型转换时,对于Number和Boolean实际上就是调用的toString()方法,但是对于null和undefined,就不会调用toString()方法,它会将 null 直接转换为 "null", 将 undefined 直接转换为 "undefined"。

    使用:

    var a = null;
    a = String(a);
    console.log(typeof a);	// string
    console.log(a);	// null
    a = undefined;
    a = String(a);
    console.log(typeof a);	// string
    console.log(a);	// undefined
    

    方式三:拼接字符串

    任何数据和 + " " 连接到一起都会转换为字符串,其内部实现原理和String()函数一样。

    使用:

    var num1 = 100;
    var res1 = num1 + "";
    console.log(res1); // 100
    console.log(typeof res1); // string
    
    var num2 = true;
    var res2 = num2 + "";
    console.log(res2); // true
    console.log(typeof res2); // string
    
    var num3 = undefined;
    var res3 = num3 + "";
    console.log(res3); // undefined
    console.log(typeof res3); // string
    
    var num4 = null;
    var res4 = num4 + "";
    console.log(res4); // null
    console.log(typeof res4); // string
    

    将其他的数据类型转换为Number

    方式一:Number() 函数

    字符串 -> 数字

    1. 如果是纯数字的字符串,则直接将其转换为数字
    2. 如果字符串中有非数字的内容,则转换为NaN
    3. 如果字符串是一个空串或者是一个全是空格的字符串,则转换为0

    使用:

    var str1 = "123";
    var res1 = Number(str1);
    console.log(res1); // 123
    console.log(typeof res1); // number
    var str2 = "itlike123";
    var res2 = Number(str2);
    console.log(res2); // NaN
    var str3 = "";
    var res3 = Number(str3);
    console.log(res3); // 0
    
    var str4 = "    ";
    var res4 = Number(str4);
    console.log(res4); // 0
    

    布尔 -> 数字

    true 转成 1, false 转成 0

    使用:

    var bool1 = true;
    var n1 = Number(bool1);
    console.log(n1); // 1
    
    var bool2 = false;
    var n2 = Number(bool2);
    console.log(n2); // 0
    

    null -> 数字

    var str1 = null;
    var n1 = Number(str1);
    console.log(n1); // 0
    

    undefined -> 数字

    var str1 = undefined;
    var n1 = Number(n1);
    console.log(n1); // NaN
    

    方式二:parseInt() 和 parseFloat() 专门用来处理字符串

    使用注意:

    1. 使用Number()函数中无论混合字符串是否存在有效整数都会返回NaN,但parseInt()/parseFloat()可以提取字符串中的有效整数。
    2. parseInt()和parseFloat()的区别是前者只能提取整数,后者可以提取小数

    使用1:

    var str1 = "300px";
    var n1 = parseInt(str1);
    console.log(n1); // 300
    
    var str2 = "300px250";
    var n2 = parseInt(str2);
    console.log(n2); // 300
    console.log(parseInt("abc123")); //返回NaN,如果第一个字符不是数字或者符号就返回NaN
    console.log(parseInt("")); //空字符串返回NaN,Number("")返回0
    

    使用2:

    var str1 = "20.5px";
    var n1 = parseFloat(str1);
    console.log(n1); // 20.5
    
    var str2 = "20.5.5.5px";
    var n2 = parseFloat(n2);
    console.log(n2); // 20.5
    

    注意:

    如果对非String使用parseInt()或parseFloat(), 它会先将其转换为String然后在操作

    var a = true;
    a = parseInt(a);
    console.log(typeof a);	// number
    console.log(a); // NaN
    

    将其他的数据类型转换为Boolean

    使用Boolean()函数

    数字 -> 布尔:除了0和NaN,其余的都是true

    字符串 -> 布尔:除了空串,其余的都是true

    null和undefined都会转换为false,对象转换为true

  • 相关阅读:
    XML中对于一个books.xml的详情显示,删除按钮,修改并保存按钮 和 添加按钮。完成这些按钮所对应的功能(XmlDocument)。
    如何写一个验证码
    Binary Search
    数据库排行榜
    mac os 下 sublime text 2 和 iterm2 便捷配置
    HttpGet,HttpPost,HttpPut,HttpDelete
    Compile C/C++ In Eclipse for Android
    To Use EGit(Git for Eclipse)
    Android NDK about Library (static library , share library and 3rd party library)
    Dealing with bitmap object in android NDK
  • 原文地址:https://www.cnblogs.com/xzh0717/p/11450912.html
Copyright © 2020-2023  润新知