<javascript>简介和基本语法

一时失言乱红尘 2022-06-10 07:36 309阅读 0赞

**一、js的简介**

*1、js是什么*  
js是可以嵌入到html中，是 基于对象(在js中所有东西都可以看成是对象) 和 事件驱动 的 脚本语言（①不需要编译，直接可以运行，解释性语言 ②可以嵌入到其他语言当中）  
特点：  
(1)交互性  
(2)安全性：js不能访问本地磁盘  
(3)跨平台：浏览器中都具备js解析器

JavaScript 与 Java 是两种完全不同的语言

*2、js能做什么*  
(1)js能动态的修改(增删)html和css的代码  
(2)能动态的校验数据

*3、js历史及组成*  
Netscape（网景） 发明了 JavaScript  
1997年由来自由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。  
从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。

javascript的核心ECMAScript描述了语言的语法和基本对象。  
一个完整的javaScript实现是由下面三个不同部分组成的。  
![js的组成部分][js]

*4、js被引入的方式*

(1)内嵌脚本
                <input type="button" value="button" onclick="alert('xxx')" />           
    (2)内部脚本
                <script type="text/javascript">
                    alert("xxx");
                </script>
    (3)外部脚本
                首先先创建一个js文件
                其次在html中引入
                    <script type="text/javascript" src="demo1.js"></script>

*js代码放在哪？*  
放在哪都行 但是在不影响html功能的前提下 越晚加载越好

**二、js基本语法**

*1、变量*

变量是用于存储信息的容器,javascript中的变量与我们在java中的变量一样。
    在javascript中使用用 var 运算符（variable 的缩写）加变量名定义的
    JavaScript 变量名称的规则：
            变量对大小写敏感（y 和 Y 是两个不同的变量） 
            变量必须以字母或下划线开始 
    注意：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。
    
    (1)
        var x = 5;
        x = 'javascript';(在javascript中 "" 和 '' 没有区别)
        var y = "hello";
        var b = true;
    (2)
        x = 5;(js是软类型的语言，不严谨)

*2、原始(基本)数据类型*

(1)number:数字类型，在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。
    (2)string：字符串类型，在javascript中字符串字符串字面值，可以使用单引号或双引号声明。
    (3)boolean:布尔类型
    (4)null:空类型，只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.
    (5)undefined:未定义
    
    注意：number、boolean、string是伪对象
    为什么 typeof 运算符对于 null 值会返回 "Object"？
        这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
    
    类型转换：
    ①number\boolean转成string
            toString();
    
    ②string\boolean转成number
            parseInt()
            parseFloat()
    （没有parseDouble()的方法）
    只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN（非数字）
    
        string可以将数字字符串转换成number 如果“123a3sd5” 转成123
    
    ③number\string不能转成boolean
    
    强制类型转换：
        Boolean()   强转成布尔
        数字强转成布尔  非零就是true   零就是false
        字符串强转成布尔  非“”(空字符串)就是true   空字符串“”就是false
    
        Number()    强转成数字
        布尔转数字 true转成1  false转成0
        字符串转数字 不能强转

![强转为Number][Number]

*4、运算符*

(1)赋值运算符
            var x = 5;
    (2)算数运算符
            + - * / %
            +: 遇到字符串变成连接
            -：先把字符串转成数字然后进行运算
            *: 先把字符串转成数字然后进行运算
            /: 先把字符串转成数字然后进行运算
    (3)逻辑运算符
            &&  ||
    (4)比较运算符
            <   >   >=  <=  !=  ==
            ===:全等：类型与值都要相等
    (5)三元运算符
            3>2?"大于":"小于"
    (6)void运算符
            <a href="javascript:void(0);">xxxxxx</a>
            点击后不让本页面的跳转
    (7)类型运算符
            typeof:判断数据类型 返回我的数据类型
            instanceof：判断数据类型 是否是某种类型
    
        var obj = new Object();
        alert(typeof obj);//object
        alert(obj instanceof Object);//true

*5、逻辑语句*

(1)if-else
            //条件:数字非0 字符串非空====true
    
            if(9){
                    alert("true--");
                }else{
                    alert("false--");
                  }
    
    (2)switch
            var x = "java";
            switch(x){
                case "css":
                    alert("css");
                    break;
            case "js":
                    alert("js");
                    break;
            case "java":
                    alert("java");
                    break;
            default:
                    alert("def");
            }
    
    (3)for
            for(var i = 0;i<5;i++){
                alert(i);
             }
    (4)for in
            var arr = [1,3,5,7,"js"];
            for(index in arr){          //index代表角标
                //alert(index);         //1，2，3，4
                alert(arr[index]);      //3，5，7，js
            }

[js]: /images/20220610/31541f2e5be5452e8ede8123b6259fe6.png
[Number]: /images/20220610/cd27720ce62b406c8f145b96b5ca3fe3.png