zoukankan      html  css  js  c++  java
  • JavaScript (一) js的介绍及基本语法变量

    个人博客网:https://wushaopei.github.io/    (你想要这里多有)

    一、JS 的 介绍

    1、JavaScript :简称 : js

    js 分为三个部分:

    1. ECMAScript 标准----js的基本的语法
    2. DOM------Document Object Model  文档对象模型
    3. BOM------Browser Object Model  浏览器对象模型

    2、JavaScript 是什么?

    ①语言类型

    是一门脚本语言,
    是一门解释性语言,
    是一门动态类型的语言,
    是一门基于对象的语言。

    ②编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行

    
    * 脚本语言:不需要编译,直接执行
    * 常见的脚本语言:t-sql,cmd

    ③ 硬件与 js 的关系

     电脑的硬件---->系统--->客户端的程序--->代码
     电脑的硬件---->系统--->浏览器--->js代码

    ④ js的作用

    解决用户和浏览器之间的交互的问题

    在实际开发中的角色:

     HTML:是标记语言,展示数据的
     CSS:美化页面
     JavaScript:用户和浏览器交互,

    示例:

    <script>
      //js的代码了
      alert("哈哈,我又变帅了");//在页面中弹出一个对话框
    </script>

    效果展示:

      

    3、js 的 代码可以分三个地方写:

    ①在html 的文件中,script 的标签中写 js代码

     <head> 
      <script>
        //js代码
        alert("锄禾日当午,地雷埋下土,小苏走过去,炸成二百五");//在页面中弹出对话框
      </script>
    </head>

    ②js 代码可以在html 的标签中写

    <input type="button" value="按钮" onclick="alert('被点了');"/>

    ③在 js 文件中可以写 js 代码,但是需要在html  的页面中引入 script 的标签中的 src = " js 的路径 "

    <script src="test.js"></script>

     test.js 中的 js 代码 :

    alert("我是外部的js文件中的代码");

    执行效果:

    4、js 代码的注意问题

     1.在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行
     2.如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行
     3.script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以
       但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准
      
     4.有可能会出现这种情况:script标签中可能同时出现type和language的写法.
    
     5.script标签在页面中可以出现多对
     6.script标签一般是放在body的标签的最后的,有的时候会在head标签中
    
     7.如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码
    

    1 和 2 的问题示例:

    	    alert("哈哈;   //少了一个括号,不执行
    
                  alert("嘎嘎");  // 正常执行

    3 和 4 和 5  的实例:

            <script type="text/javascript">
    		alert("又弹出来了");
    	</script>
    	<script type="text/javascript">
    		alert("又执行了");
    	</script>

    6 和 7 的示例:

    <body>
    	<script src="test.js"></script>
    </body>

    二、变量

    1、变量的定义与内存地址:

    ①操作的数据都是在内存中操作

    ②js中存储数据使用变量的方式(名字,值--->数据)

    ③js中声明变量都用var---->存储数据,数据应该有对应的数据类型

    ④js中的字符串类型的值都用双引号或者单引号

    示例---变量的声明与赋值:

     //存储一个数字10
     // 变量的声明及赋值
      var num=10;
     // 存储一个名字
      var name='小黑';

    2、变量的作用于初始化、声明:

    ①作用:

    用来操作数据的(可以存储,可以读取)

    ②变量声明: 有 var  有变量名字,没有赋值

    ③变量初始化: 有var 有变量名字,有赋值

    • 变量声明的方式:

             var   变量名字;

    • 声明与赋值:
    var number;//变量的声明,此时是没有赋值的
    //一次性声明多个变量
    var x,yx,z,k,j;//都是声明,没有赋值
    //变量的初始化(变量声明的同时并且赋值了)
    = 的意义: 赋值的意义
    • 初始化、声明示例:
            // 存储一个数字10
            var  number = 10;
            console.log(number);
    
            //存储一个5
            var number2 = 5;
            console.log(number2);
    
            //存储一个人的名字
            var name = "文兴";
            console.log(name);
    
            //存储真 (true)
            var boolean = true;
            console.log(boolean);
    
            //存储一个null --- > 相当于是空
            var nll = null;
            console.log(nll);
    
            //存储一个对象
            var obj = new Object();
            console.log(obj);

    浏览器查看效果:

    3、变量的规范与注意问题:

    ①注意的基本的代码的规范

     js中声明变量都用var
     js中的每一行代码结束都应该有分号;(写代码有分号的习惯)
     js中的大小写是区分的: var N=10; n
     js中的字符串可以使用单引号,也可以使用双引号,目前我们暂时使用双引号

    ②变量名的注意问题---变量名的命名规范,要遵循驼峰命名法

    1.变量的名字要有意义,
    2.变量名有一定的规范:一般以字母,$符号,下划线开头,中间或者后面可以有$符号,字母,数字
    3.变量名一般都是小写的
    4.变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首字母都是大写的,这种命名方式称为:驼峰命名法
    5.不能使用关键字(系统自带的一些单词,不能使用)
    6.不会单词用拼音,拼音也要遵循驼峰命名法

    示例:

    (1)声明变量并初始化---变量的初始化----声明变量赋值

     //声明了一个num的变量存储了一个数字100
     var num = 100;
     //输出这个变量的值
     alert(num);//弹框
     //浏览器的控制台在浏览器中的开发人员工具中(快捷键:F12)的console的选项中
     console.log(num);//把内容输出在浏览器的控制台中

    效果截图:

    (2)声明多个变量然后一个一个的赋值

            var num1,num2,num3;//声明
    	//一次的赋值
    	num1=10;
    	num2=20;
    	num3=30;
    
    	//声明多个变量并且赋值
    	// var num1=10,num2=20;num3=30;

    4、变量的交换:

    (1)扩展的变量的交换:只需要看代码,不需要理解---位运算

            var num1 = 10;
            var num2 = 20;
        //把num1 这个变量的值取出来放在 temp 变量中
            var temp = num1;
        // 把 num2 这个变量的值取出来放在 num1 变量中
            num1 = num2;
       // 把 temp 变量的值取出来放在num2 变量中
            num2 = temp ;
            console.log(num1); // 20
            console.log(num2); // 10

    (2)第二种方式交换:一般适用于数字的交换

             var num1 = 10;
             var num2 = 20;
        //    //把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量
             num1 = num1 + num2 ; //30
        //    //num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2
             num2 = num1 - num2;  //10
        //    //num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1
             num1 = num1 - num2; //20
            console.log(num1,num2);

    (3)扩展的变量的交换:了解 ---位运算

            var num1 = 10;
            var num2 = 20;
            num1 = num1 ^ num2;
            num2 = num1 ^ num2;
            num1 = num1 ^ num2;
            console.log(num1,num2);

    5、快件键:

    • 快捷键 : Ctrl+Alt+L----->格式化代码的(设置代码有很好的格式,代码是错误的,这个快捷键是没有效果)

    三、注释

    注释 : 是解释代码的含义,给其他的程序员看的

    注释的方式:
         1.单行注释  //
         2.多行注释  /★★/

    说明:

       //   单行注释:一般用在一行代码的上面
        /*  多行注释:一般是用在函数或者是一段代码的上面*/

        //  代码中如果没有注释,不规范,天天会被骂醒

        //  注释后的代码不执行了

    示例:

     //console.log("哈哈,我又变帅了");
     //console.log("第二行");

    四、JS 的 数据类型

    1、JS 的 数据类型有哪些?

    js中的原始数据类型:number,string,boolean,null,undefined,object
    • 说明:
    number:数字类型(整数和小数)
    string:字符串类型(的值一般都是用单引号或者是双引号括起来) "34" 
    boolean:布尔类型(值只有两个,true(真1),false(假0)) 
    null:空类型,值只有一个:null,一个对象指向为空了,此时可以赋值为null 
    undefined:未定义,值只有一个:undefined
    • 什么情况下的结果是undefined
    变量声明了,没有赋值,结果是undefined
    函数没有明确返回值,如果接收了,结果也是undefined
    • 注意:
    如果一个变量的结果是undefined和一个数字进行计算,结果:NaN不是一个数字,也没有意义

    2、如何获取这个变量的数据类型是什么?

    使用typeof 来获取
    
    语法:
         typeof 变量名
         typeof(变量名)

    3、数据类型 - - - 示例:

            var num = 10;
            var str = "文";
            var flag = true;
            var nll = null;
            var undef;
            var obj = new Object();
    
            console.log(typeof num);
            console.log(typeof str);
            console.log(typeof flag);
            console.log(typeof nll);
            console.log(typeof undef);
            console.log(typeof obj);
            console.log(typeof num);
    
            console.log("10");
            console.log(10);

    4、数字类型: 整数和小数

         num=20;整数
         num=98.76;小数(其他的语言中,浮点型---单精度,双精度浮点)
    
         所有的数字都是属于number类型 
    
         其他的语言:
          整数类型:int
          单精度浮点型:float
          双精度浮点型:double

    (1)数字进制:

      二进制:遇到2进一
        
           00000001-----1
           00000010-----2
           00000011-----3
           00000100-----4
           00000101----5
           00000110----6
           00000111-----7
           00001000-----8
           00001001----9
    
      八进制:遇到8进一
    
           00000001
           00000002
           00000003
           00000004
           00000005
           00000006
           00000007
           00000010-----8
           00000011-----9
           00000012-----10
    
      十进制:遇到10进一
    
           0
           1
           2
           3
           4
           5
           6
           7
           8
           9
           10
    
      十六进制:遇到f进一
    
         00000001
         00000002
         00000003
         00000004
         00000005
         00000006
         00000007
         00000008
         00000009
         0000000a----10
         0000000b---11
         0000000c----12
         0000000d---13
         0000000e---14
         0000000f---15
         00000010---16
         00000011---17
         00000012---18
         0f12a

    (2) 示例:

        js中可以表示的进制有:
             var num=10;//十进制
             var num2=012;//八进制
             var num3=0x123;//十六进制
       
        var num=12;//十进制
        console.log(num);
        var num2=012;//八进制
        console.log(num2);
        var num3=0x1a;//十六进制
        console.log(num3);

    (3)数字类型 的 范围 及 验证方式:

    ①范围 --- 最值:

        //数字类型有范围: 最小值和最大值
        console.log(Number.MAX_VALUE);//数字的最大值
        console.log(Number.MIN_VALUE);//数字的最小值

    ②验证: NaN 、isNaN

    • 不要用小数去验证小数.
        var x=0.1;
        var y=0.2;
        var sum=x+y;
        console.log(sum==0.3);
    
    • 不要用小数去验证小数.
        var x=0.1;
        var y=0.2;
        var sum=x+y;
        console.log(sum==0.3);
    • 不要用NaN验证是不是NaN
        var num;
        console.log(num+10==NaN);
        console.log("您好"=="我好");
    • 正确的验证方式:使用 isNaN()
        var num;//-----变量声明了,没有赋值,结果是:undefined
        //是不是不是一个数字----->不是一个数字吗? NaN--->不是一个数字
        console.log(isNaN(10));

    示例:判断结果不是一个数字可以使用isNaN(变量名)

         var str="您好";
         var num;
         var sum=num+10;//NaN
         console.log(sum);
         console.log(isNaN(sum));//不是数字为true,是数字结果为false

    5、布尔类型

    • 布尔类型:的值有两个,一个是true(真),一个是false(假)
        var flag=1;
        console.log(flag);
    
        var fdf=null;
    
        var num=0;

    6、类型转换

    主要有两种:① 转换为数字类型、②转换为字符串类型、③其他类型转布尔类型

    (1) 其他类型转数字类型: 三种方式:

      

        1.parseInt();//转整数
            console.log(parseInt("10"));//10
            console.log(parseInt("10afrswfdsf"));//10
            console.log(parseInt("g10"));//NaN
            console.log(parseInt("1fds0"));//1
            console.log(parseInt("10.98"));//10
            console.log(parseInt("10.98fdsfd"));//10
    
        2.parseFloat()//转小数
            console.log(parseFloat("10"));//10
            console.log(parseFloat("10afrswfdsf"));//10
            console.log(parseFloat("g10"));//NaN
            console.log(parseFloat("1fds0"));//1
            console.log(parseFloat("10.98"));//10.98
            console.log(parseFloat("10.98fdsfd"));//10.98
    
        3.Number();//转数字
            console.log(Number("10"));//10
            console.log(Number("10afrswfdsf"));//NaN
            console.log(Number("g10"));//NaN
            console.log(Number("1fds0"));//NaN
            console.log(Number("10.98"));//10.98
            console.log(Number("10.98fdsfd"));//NaN

    总结  :  想要转整数用parseInt() , 想要转小数用parseFloat()

    注意 : 想要转数字:Number();要比上面的两种方式严格

    (2)其他类型转字符串类型

        1   .toString()
     
        var num=10;
        console.log(num.toString());//字符串类型
    
        2  String();
    
        var num1=20;
        console.log(String(num1));

    注意:

        如果变量有意义调用.toString()使用转换
        如果变量没有意义使用String()转换

       <script> 
        var num2;
        console.log(num2.toString());
        var num3=null;
        console.log(num3.toString());
    
        //这个可以
        var num2;
        console.log(String(num2));
        var num3=null;
        console.log(String(num3));
      </script>

    (3)其他类型转布尔类型

    <script>
       Boolean(值);
    
        console.log(Boolean(1));//true
        console.log(Boolean(0));//false
        console.log(Boolean(11));//true
        console.log(Boolean(-10));//true
        console.log(Boolean("哈哈"));//true
        console.log(Boolean(""));//false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
    
        var str=10;
        console.log(+str);
    </script>
  • 相关阅读:
    Java将对象保存到文件中/从文件中读取对象
    Python爬虫框架--Scrapy安装以及简单实用
    Python--网络爬虫模块requests模块之响应--response
    用Pycharm创建指定的Django版本
    python网络爬虫之requests模块
    Python---异常处理
    Python函数的装饰器修复技术(@wraps)
    Django Rest framework
    Vue的基础使用
    Vue
  • 原文地址:https://www.cnblogs.com/wushaopei/p/11718629.html
Copyright © 2011-2022 走看看