JavaScript基本语法

目录

遵循的语言规范:ECMAScript

执行环境

script标签

严格模式

变量:使用let声明的变量

常量: 使用const声明的变量

数据类型

类型转换

模态窗口

函数

---

遵循的语言规范:ECMAScript

执行环境

可以在浏览器内执行,也可以在服务端执行,甚至还能在任意搭建了JavaScript引擎的设备中执行
JavaScrpit引擎:也称javaScript虚拟机

常用浏览器和引擎
        引擎                    浏览器
        V8                      Chrome和Opera
        SpiderMonkey            FireFox
        Trident/Chakra          IE
        ChakraCore              Microsoft Edge
        Nitro/SquirrelFish      Safari

script标签

当浏览器遇到<script>标签,代码会自动运行

属性 :

• type:在HTML4标准中,要求标签要有type属性,通常是type="text/javascript",HTML5已经不需要该属性了
• languag:显示脚本使用的语言,这个属性没有任何意义,默认的脚本语言就是Javascript,(不在需要使用该属性了)
• src:表示引入外部脚本,值通常是一个URL.如果包含该属性,那么<script>标签内部的代码将不会工作

 严格模式

2009年ECMAScript5规范增加了语言特性并修改了一些已经存在的特性,为了保证旧的功能能够使用,大部分的修改是默认不生效的.需要使用特殊的指令---use strict 来明确得说明使用这些特性

使用方式
1. 在脚本文件的顶部使用use strict,作用于整个脚本文件.如       

"use strict";        // 代码以严格模式工作

2. 放在函数的顶部,严格模式只在函数中启用   

 变量:使用let声明的变量

在严格模式下,给一个未声明的变量赋值会抛出一个错误

let message;        //声明一各名称为message的变量
message = 'Hello';      //为变量赋值,该字符串保存到与该变量相关联的内存区域
alert(message);

num = 5;            // Uncaught ReferenceError: num is not defined
alert(num);     

 常量: 使用const声明的变量

const COLOR_RED = "#F00";       // 在执行前就已经知道常量的值了,采用大写命名
const pageLoadTime = num;       // 在执行期间被计算出来,但初始赋值之后不再改变.采用常规命名

数据类型

number类型--用于整数和浮点数

特殊数值
Infinity 代表数学概念中的无穷大∞。是一个比任何数字都大的特殊值。
          alert( 1 / 0 ); // Infinity
NaN 代表一个计算错误.它是一个不对的或者一个未定义的数学操作所得到的结果,如
          alert( "not a number" / 2 );        //NaN
NaN是粘性的,任何对NaN的操作都会给出NaN

string类型

表示方式

1. 双引号:"Hello"
2. 单引号:'Hello'
3. 反引号: `Hello`:反引号是功能扩展的引用,允许通过${...},将变量和表达式嵌入到字符串中.${...}内的表达式会被计算,成为字符串的一部分,仅仅在反引号内有效

boolean类型

"null"值 

不属于上述任何一种类型,自成一种类型,表示无,空或值未知的特殊值

"undefined"值

不属于上述任何一种类型,自成一种类型,表示未被赋值,如果变量被声明,而未被赋值,那么它的值就是undefined

object类型和symbol类型

object对象类型,用于储存数据集合和更复杂的实体。
 symbol类型,用于创建对象的唯一标识符。

typeof运算符-------返回参数的类型
用法

1. 作为运算符:typeof x
2. 函数形式: typeof(x)

注:

• typeof null结果是object,这是不对的,是语言中的一个错误
• typeof alert结果是function,在语言中没有一个特别的funciton类型,函数属于object类型,但是typeof会对函数区分对待

     <script>
        let str = "World!";
        alert(`Hello,${str}`);     // Hello,World!
        alert(`2+5=${2+5}`);       // 2+5=7

        alert(typeof undefined);
        alert(typeof 0);
        alert(typeof true);
        alert(typeof "foo");
        alert(typeof Symbol("id"));
        alert(typeof Math);
        alert(typeof null);
        alert(typeof alert);
    </script>

类型转换

 大多数情况下,运算符和函数会将值自动转换为正确的类型,下面只讨论显示的进行类型转换

 将一个值转换为字符串形式

        // 1. 自动转换
        let value;
        alert(value);
        value = true;
        alert(value);
        value ="字符串类型";
        alert(value);
        value = null;
        alert(value);
        value = Math;
        alert(value);

        // 2. 使用 String(value)
        let value2 = true;
        alert(typeof value2);    //boolean

        value = String(value2);
        alert(typeof value2);    // string

在算术函数和表达式中,会自动进行number类型转换

        // 1.自动转换
        alert('6'/'2');

        // 2. 使用Number(value)显示转换
        let value3;
        alert(Number(value3));
        value3 = true;
        alert(Number(value3));
        value3 ="字符串类型";
        alert(Number(' 123'));
        alert(Number('   '));
        alert(Number(value3));
        value3 = null;
        alert(Number(value3));
        value3 = Math;
        alert(Number(value3)); 

在逻辑操作时会自动进行boolean类型转换

        // 自动转换 :
            // 0,空的字符串,null,undefined,NaN变成false
            // 其他值变为true
        // 使用Boolean(value)显示转换
        alert('Boolean类型转换');
        let value4;
        alert(Boolean(value4));     // fasle
        value4 = 1;
        alert(Boolean(value4));     // true
        value4 = NaN;
        alert(Boolean(value4));     // false
        value4 = 0;
        alert(Boolean(value4));     // false
        value4 ="字符串类型";
        alert(Boolean("0"))         // true
        alert(Boolean('   '));      // true
        alert(Boolean(''));         // false
        alert(Boolean(value4));     // ture
        value4 = null;
        alert(Boolean(value4));     // false
        value4 = Math;
        alert(Boolean(value4));     // true

模态窗口

1. alert(message);

弹出一段信息并暂停脚本,直到用户点击了"确定"
这个小窗口被称为模态窗口, 意味着用户不能与页面的其他部分进行交互，点击其他按钮等，直到他们处理完窗口.

2. result = prompt(title[,default])

显示一个带有文本消息的模态窗口,还有input框和确定/取消按钮

• title---显示给用户的文本
• default---指定input框的初始值
• result--- 返回输入的文本,取消输入返回null

注:第二个参数可选。但是如果我们不提供的话，Internet Explorer 会把 "undefined" 插入到 prompt。所以，为了 prompt 在 IE 中有不错的效果，建议始终提供第二个参数 prompt('Test','');

 let password = prompt("输入密码","123");
 alert('你的密码是:'+password);

3. result = confirm(question)

显示一个带有question和两个按钮的模态窗口(确定和取消).点击确定返回 true，点击取消返回 false

let res = confirm("是否选择?");
alert(res);

函数

在javaScript中,函数是一个值,可以像使用其他类型的值一样使用它,可以在代码的任何地方分配，复制或声明。输出函数时将输出函数的源码

    <script>
        /* 1. 函数声明式创建函数
            如果函数在主代码流中声明为单独的语句，那就称为“函数声明”。
                函数声明式可以使一个函数调用优先于声明
                严格模式下，当一个函数声明在一个代码块内运行时，它在该块内的任何地方都是可见的。但块外则相反。
        */
        function sayHi(){
            alert('Hello');
        }

        /* 2. 函数表达式创建函数
            如果该函数是作为表达式的一部分创建的，则称其为“函数表达式”。
                函数表达式在执行到达时创建,并只有在那时起可以使用
        */
        let sayHi2=function(){
            alert('函数表达式创建的函数');
        };
        alert(sayHi2); 
        alert(sayHi);  
        /* 3. 回调函数:以值的方式传递函数 */
        function ask(question,yes,no) { 
            if(confirm(question)){
                yes();
            }else{
                no();
            }
        }
        function showOK(){
            alert('You argreed');
        }
        function showCancel(){
            alert('You canceled the execution.');
        }
        ask("Do you agree?",showOK,showCancel);
        /* 4. 箭头函数
            一个简洁的创建函数的语法
            let func = (arg1,arg2,...) => 表达式
            创建一个函数func,参数是arg1,arg2,...,运行右侧的表达式并返回结果
        */
        let sum = (a,b)=> a+b;
        alert(sum(1,2));
    </script>