day02_js学习笔记_01_js的简介、js的基本语法

day02_js学习笔记_01_js的简介、js的基本语法

=============================================================================
=============================================================================
涉及到的知识点有:
    一、js的简介 
        1、js是什么?
        2、js能做什么?
        3、js历史及组成
        4、js被引入的方式
            (1)内嵌脚本
            (2)内部脚本
            (3)外部脚本
    二、js的基本语法
        1、变量(js是弱类型的语言)
        2、原始(基本)数据类型(java中叫基本数据类型)
        3、引用数据类型
        4、运算符
            (1) 赋值运算符
            (2) 算术运算符
            (3) 逻辑运算符(js中只有双与和双或)
            (4) 比较运算符(关系运算符)
            (5) 三元运算符(三目运算符)
            (6) void运算符
            (7) 类型运算符
        5、逻辑语句
            (1) if else
            (2) switch
            (3) 普通for循环
            (4) 增强for in循环
=============================================================================
=============================================================================
day02_js学习笔记_01_js的简介、js的基本语法
-----------------------------------------------------------------------------
一、js的简介 
    1、js是什么?
        JavaScript 是因特网上最流行的脚本语言,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站点和 Web 应用程序之间的交互。
        脚本语言:脚本语言又被称为扩建的语言,或者动态语言,是一种解释型语言,由解释器来运行,用来控制软件应用程序,脚本通常以文本保存,只在被调用时进行解释或编译。
        JavaScript 是可插入 HTML 页面的编程代码。
        JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
        
        js是可以嵌入到html中,是 基于对象 和 事件驱动 的 脚本语言(解释型语言)。    Java属于编译型语言。
        js是基于对象的,即js把什么都看成对象。
        Java是面向对象的,即java大多在描述对象。
        
        js的特点:            
            (1) 交互性:信息的动态交互
            (2) 安全性:js不能访问本地磁盘
            (3) 跨平台:浏览器中都具备js解析器(只要是可以解析js的浏览器都可以执行,和平台无关)
    2、js能做什么?
        (1) js能动态的修改(和增删)html和css的代码,即可以改变html内容、改变html样式。
        (2) js能动态的校验数据,即进行验证输入。
    3、js历史及组成
        ECMAScript标准    BOM(浏览器对象模型)  DOM(文档对象模型)
    4、js被引入的方式
        (1)内嵌脚本
            <input type="button" value="button" onclick="alert('xxx')" />    <!--alert"弹框" "提醒框" "警告框"-->    
        (2)内部脚本
            <head>
            <script type="text/javascript">
                alert("xxx");
            </script> 
            </head>
            <body>
                <input type="button" value="button" />
            </body>
        (3)外部脚本
            首先创建一个js文件,其次在html中引入。
            <script type="text/javascript" src="demo1.js"></script>
            js代码放在哪呢?
                放在哪都行,但是在不影响html功能的前提下,越晚加载越好(网站优化时)
                有一种情况是需要必须在前面加载(即页面一加载就需要执行js代码时)
                    比如:二级联动,当页面一加载时,需要在js中使用Ajax的东西。去刷新,去访问数据库的时候。
-----------------------------------------------------------------------------
二、js的基本语法
    1、变量(js是弱类型的语言)
        (1) 用var,var什么都行
            var x = 5;
            x = 'javascript'; // 注意:js中单引号与双引号是一样的
            var y = "hello";
            var b = true;
        (2) 不用var和分号也行
            x = 5;
            x = 5        
    2、原始(基本)数据类型(java中叫基本数据类型)
        (1) number        数字类型
        (2) boolean       布尔类型
        (3) string        字符串类型
        (4) null          空类型(null属于object类型。注意:原始(基本)数据类型怎么还属于object类型呢?答:这是js一直沿用的一个错误)
        (5) underfind     未定义类型
            注意:
                1、原始(基本)数据类型怎么可以调用方法呢?
                    答:因为number、boolean、string是伪对象,可以调用方法。(相当于java中的自动装箱/拆箱)
--------------------------------------        
            原始(基本)数据类型之间的转换:
            number\boolean类型转成string类型
                伪对象名.toString()
                示例:
                    alert(k);            // 什么都没有弹出来
                    alert(typeof k);     // underfind
                    alert(typeof(k));    // underfind    typeof以上这两种写法,效果一样,常用第二种写法
                    var x = 5;
                    var b = true;
                    var n = null;
                    alert(typeof x.toString()); // string    
                    alert(typeof b.toString()); // string
                    alert(typeof(n)); // object                
--------------------------------------                    
            string\boolean类型转成number类型
                parseInt()      // 传入参数
                parseFloat()    // 传入参数
                注意:    
            1、boolean类型不能通过上面两种方式转为number类型。
            2、string类型可以将数字字符串转换成number类型,例如:"123a3sd5"则转成123。
                示例:
                    var b = true;
                    var s = "123x44xx";
                    alert(parseInt(b));     // NuN(not a number)
                    alert(parseFloat(b));   // NuN(not a number)
                    alert(parseInt(s));     // 123
                    alert(parseFloat(s));   // 123
--------------------------------------
            强制类型转换
                Boolean()        // 传入参数,强转成布尔类型
                    数字类型强转成布尔类型时     非零就是true            零就是false
                    字符串类型强转成布尔类型时   非空字符串就是true       空字符串("")就是false
                示例:
                    var b = 123;
                    alert(Boolean(b)); // true
                    b = -1;
                    alert(Boolean(b)); // true
                    b = 0;
                    alert(Boolean(b)); // false
                    b = "hello";
                    alert(Boolean(b)); // true
                    b = "   ";
                    alert(Boolean(b)); // true
                    b = "";
                    alert(Boolean(b)); // false                
--------------------------------------                
                Number()        // 传入参数,强转成数字类型
                    布尔类型转数字类型     true转成1        false转成0
                    字符串类型转数字类型   不能强转
                示例:
                    var b = true;
                    alert(Number(b)); // 1
                    b = false;
                    alert(Number(b)); // 0
                    var s = "123ss";
                    alert(Number(s)); // NaN    
--------------------------------------
                String()        // 传入参数,强转为字符串类型
                注意:将number\boolean类型转成string类型,已经有了 对象名.toString()方法了,一般不用该类的构造方法了。
                示例:
                    var b = true;
                    alert(String(b)); // true
                    b = false;
                    alert(String(b)); // false
                    b = 5;
                    alert(String(b)); // 5                                    
--------------------------------------
    3、引用数据类型
        在java中:    
            Object obj = new Object();
        在js中:        
            var obj = new Object();
            var num = new Number();    
            var str = new String();
            示例:
                var obj = new Object();
                alert(typeof obj); // object
                var num = new Number();
                alert(typeof num); // object
                var str = new String();
                alert(typeof str); // object
--------------------------------------
    4、运算符
        (1) 赋值运算符
            var x = 5;
        (2) 算术运算符
            + - * / %
                +: 遇到字符串变成连接
                -:先把字符串转成数字然后进行运算
                *: 先把字符串转成数字然后进行运算
                /: 先把字符串转成数字然后进行运算
            示例:
                var x = "5";
                var y = "12";
                alert(x + y); // 512
                alert(y - x); // 7
                alert(x * y); // 60
                alert(y / x); // 2.4
                alert(1213 / 100 * 100); // 1213    java中为1200
        (3) 逻辑运算符(js中只有双与和双或)
            &&    ||
        (4) 比较运算符(关系运算符)
            <    >    >=    <=    !=    ==等于:只有值相等 
            ===全等:类型与值都要相等
            示例:
                var a = 10;
                var b = "10";
                alert(a == b);  // true
                alert(a === b); // false
                alert(3 < 2 ? "大于" : "小于");            
        (5) 三元运算符(三目运算符)
        (6) void运算符
            <a href="javascript:void(0);">xxx</a>  代表不让跳转(不会重新刷新页面)
            <a href="#">xxx</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循环
            var arr = [ 1, 3, 5, 7, "js" ];
            for (var i = 0; i < arr.length; i++) { // index代表角标
                alert(arr[i]);
            }
        (4) 增强for in循环
            var arr = [ 1, 3, 5, 7, "js" ];
            for (index in arr) { // index代表角标
                alert(arr[index]);
            }
            
            注意:java中的普通for循环与增强for循环
            int[] arr = { 1, 2, 3, 4, 5 };
            // 普通for循环
            for (int x = 0; x < arr.length; x++) {
                System.out.println(arr[x]);
            }
            System.out.println("---------------");
            // 增强for循环
            for (int x : arr) {
                System.out.println(x);
            }
=============================================================================

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端进阶之路

从0到1实现Promise前言正文结束

Promise大家一定都不陌生了,JavaScript异步流程从最初的Callback,到Promise,到Generator,再到目前使用最多的Async/A...

13830
来自专栏MasiMaro 的技术博文

C函数原理

C语言作为面向过程的语言,函数是其中最重要的部分,同时函数也是C种的一个难点,这篇文章希望通过汇编的方式说明函数的实现原理。

15330
来自专栏java一日一条

Java字符串之性能优化

在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值。在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式...

10220
来自专栏java一日一条

Java字符串之性能优化

在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值。在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式...

12520
来自专栏python3

python字典

所不同的是列表的索引只是从0开始的有序整数,不可重复;而字典的索引实际上在字典里应该叫键,虽然字典中的键和列表中的索引一样是不可重复的,但键是无序的,也就是说字...

16620
来自专栏前端儿

ES6笔记(5)-- Generator生成器函数

Generator的声明方式类似一般的函数声明,只是多了个*号,并且一般可以在函数内看到yield关键字

9810
来自专栏java一日一条

基础类型转化成String

在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值。在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式...

9520
来自专栏iOS开发随笔

iOS Swift基础语法(二)

12030
来自专栏华章科技

Python 3 入门,看这篇就够了

链接:https://shockerli.net/post/python-study-note/

47660
来自专栏Linux驱动

25.C++- 泛型编程之函数模板(详解)

本章学习: 1)初探函数模板 2)深入理解函数模板 3)多参函数模板 4)重载函数和函数模板 ---- 当我们想写个Swap()交换函数时,通常这样写: voi...

29840

扫码关注云+社区

领取腾讯云代金券