JavaScript_Day_01入门笔记

最新推荐文章于 2024-10-18 17:51:23 发布

我喜欢大太阳

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量405

点赞数 3

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_64954239/article/details/121761530

版权

JavaScript:

一、JavaScript的基本介绍：

JS（行为层）是一门世界上最流行的脚本语言，是一门弱类型的脚本语言，其源码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。

脚本语言：(依赖其他的程序，不能独立运行)；

弱类型：语法要求不严格，数据类型分类相对于其他语言没有那么严格细腻；

直译型：直接翻译。

二、JavaScript 能干嘛？

(javaScript 最早是为了解决表单验证的问题)

1. 加强页面动画效果，操作 html+css，动态渲染数据；

2. 接收后端传输来的数据（数据交互）；

3. 给后端传输数据；

三、JavaScript 引入方式：

1.内部样式: <script> js代码 </script>

    <script>

        // script:脚本
        alert('Hello World');
        // alert:弹窗

    </script>
    <!-- 必须写在Scrpit标签内写javaScript代码 -->

2.外部样式： <script src="js路径"> </script>

<script src="路径"></script>

3.行内样式： <body οnclick="alert(...)"> </body>

<body onclick="alert(...)">  </body>

(js文件也可以写在body下)

<body>

     <script>
     
           alert('Hello World');

     </script>
    
     <!-- js文件也可以写在body下 -->
</body>

JavaScript 输出规则：

先找到对应对象（主动查找），也就是div，然后找到这个对象干点啥;

在JS代码中，如果不输出，也就是没对页面进行任何操作时，不显示基本无效;

一、JS中的 alert 输出语句：

alert ：警告,页面弹窗效果；

alert ( ... ); 可输出：

1. 数字： number ；

2. 布尔值：true / false ；

3. 字符串：字符串必须加引号，加了引号的都是字符串；

字符串控制台输出为黑色，数字和布尔值为蓝色

(注意：引号不分单引号和双引号但是,单引号只能套双引号，双引号里面只能套单引号)

* alert 弹窗不在文档中，所以不识别标签，可以识别空格。

        alert('hello             world');

* 数字可以不打引号，非数字(字符串)必须打引号，单引号或者双引号都可以！

// 'a123'   ',.w13.123'   ';.,.'   '呵呵'     '22'
        alert("'呵呵',js真简单");
        alert('999');
        alert(666);

* 布尔值不打引号（ true ，false ）

        alert(true);
        alert(false);

二、JS中的 write 输出语句：

document ：文档；

document.write( ... )

* 文档写入可以识别标签;

  <script>

        document.write(666);

        document.write('hello');

        document.write('hello &nbsp;&nbsp;&nbsp;world');

        document.write('<h1>hi</h1>');

    </script>

三、JS中的 console 输出语句：

console ：控制台；

console.log( ... );


    <script>


        // console 控制台

        console.log(666);   // 蓝色的数字

        console.log('666');   // 黑色的字符串

        console.log(true);  // 蓝色的布尔值

        console.log('hello     world');

        console.log('<h1>hi</h1>');

    </script>

对比三种输出语句：

alert() 每次只要一个参数，警告,页面弹窗效果；

document.write() 文档写入，只有这个方法识别标签；

console.log() 用户看不到的，主要用于代码测试；

常见报错：

not defined 没有找到/定义

not a function 无效函数

Invalid or unexpected token/missing 缺失

浏览器构成：文档（用户可见界面）+控制台+弹窗+地址栏

* JS报错以后，后面的代码都不会执行

   <script>

        // js报错以后，后面的代码都不会执行

         console.log(hehe);     // hehe is not defined 

         console.log(666);

         consol.log(888);       // consol is not defined

         console.logo(999);     // is not a function 

         alerrt(33);            // is not defined 

         document.writee(99);   // is not a function 

         console.log(6666');    // invalid    // missing 
 
    </script>

变量：

变量： 会改变的值。

常量： 不会改变的值。

 console.log('hehe');  // 常量

* 声明变量的方式：

   <script>
       
        var x ;
        x = 1 ; // 赋值
        console.log(x);
        x = 2 ;
        console.log(x);
        x = 3 ;
        console.log(x);

        x = 'haha' ;
        console.log(x);

        x = true ;
        console.log(x);

        x = false ;
        console.log(x);
        
    </script>

* 交换两个变量的值：

<script>

        var x ;
        x = 1 ;

        var y ;
        y = 2 ;

      
        // 交换x和y的值   x->2   y->1

        // =是指把等号右边的值，赋值给左边  

        // x = y ;    // x = 2
        // y = x ;    // y = 2

        // 拿一个空杯子
        var z ;
        z = x ;
        x = y ;
        y = z ;

        // 变量不能加引号
        console.log(x);
        console.log(y);
        console.log(a);   // is not defined   没有定义这个变量

    </script>

一、变量的声明：

var

* 变量的命名要求 --- 底线

1. 数字不能开头；

2. 不能使用关键字和保留字；

3. 只能是数字，字母，下划线以及$；

关键字：js当中正在使用的，具有特殊意义的单词

保留字：js将来可能定义为关键字的单词

* 变量命名的规范 --- 建议

1. 不用拼音；

2. 建议使用驼峰命名或者组合命名；

3. 命名尽量做到见名知意；

 <script>

        // var var = 3 ;

        // user_name 组合命名
        var user_name = '小花'; 

        // 不推荐使用
        // var yong_hu_ming = '小花';

        // 小驼峰
        var userName = '小花';

        // 大驼峰  不要使用
        var UserName = '小花';

        var $a = 3 ;

        console.log($a);

        var _a = 2 ;

        var _var = 1 ;

        var _left = 1 ;

        var $left = 2 ;


        var x ;
        x = 1 ;

        var y = 2 ;


        var a , b ;


        var a = 1 , b = 2 ;

    </script>

二、输出变量：

* 变量输出时不能加引号

<body>

    <script>

        var p = 1 ;

        console.log(P);   // 区分带小写

        var x = 1 , y = 2 ;
        console.log(x , y);   // 可以写多个参数

        alert(x , y);  // alert只有一个参数

        document.write(x, y) ;  // 也可以有多个参数

    </script>
    
</body>

三、基本数据类型：

基本数据类型：数字 + 字符串 + 布尔值 + null undefined ；

基本数据类型的判断方法 ： typeof

 <script>

        var x = 1 ;              // js                // 其他语言

        console.log(typeof x);  // number 数字        // int

        var y = 1.2 ;
        console.log(typeof y); // number             // float


        var user_name = 'yy' ;
        console.log(typeof user_name); // string字符串    // char

        var bool = true ;
        console.log(typeof bool);  // boolean布尔值    


        var a ;
        console.log(typeof a);  // undefined    这种数据类型只有js有


        var b = null ;
        console.log(typeof b);  // object  空对象


    </script>

四、数据类型之间可以相互转化

1.其他类型转成字符串：

* 把数字变成字符串

* 把布尔值转字符串

* 把null转字符串 'null'

* 把undefined转字符串 'undefined'

   <script>

        var x = 1 ;
        console.log(x);     // 1

        var str = String(x) ;

        console.log(str);   // '1'  1

        var boo = true ;

        var str2 = String(boo) ;

        console.log(str2);

        var n = null ;

        var str3 = String(n) ;

        console.log(str3);  // 'null'

        var u ;

        var str3 = String(u) ;

        console.log(str3);  // 'undefined'


    </script>

2. 其他类型转数字：

* 字符串转数字

* 字符串都是数字直接转数字

* 字符串包含非数字 NaN

* 空字符串和空格字符串都转为0

* 布尔值转数字：true 1 ；false 0

* null 转数字 0

* undefined 转数字 NaN

<body>

    <script>

        var str = '123' ;

        var n = Number(str) ;

        console.log(n);


        var str2 = '123q' ;

        var m = Number(str2) ;

        console.log(m);  // NaN   not a number  不是一个数字

        var str3 = '' ;

        var n2 = Number(str3) ;

        console.log(n2);   // 0

        var str3 = ' ' ;

        var n2 = Number(str3) ;

        console.log(n2);   // 0


        var str3 = ' 1   ' ;
        var n3 = Number(str3) ;
        console.log(n3);


        var bool = false ;

        var n4 = Number(bool) ;

        console.log(n4);


        var bool = null ;

        var n4 = Number(bool) ;

        console.log(n4);

        var b ;

        var n6 = Number(b) ;

        console.log(n6);


    </script>
    
</body>

3.其他类型转布尔值

* 数字转布尔值 0和NaN为false,其他数字都是true

* 字符串转布尔值

* 字符串有东西就是true

* 空字符串 false

* null转布尔值 false

* undefined转布尔值 false

  <script>

        var x = -2 ;
        var bool = Boolean(x) ;
        console.log(bool);   // true

        var y = NaN ;
        console.log(y);
        console.log(typeof y);

        var bool2 = Boolean(y) ;
        console.log(bool2);    // false 


        var str = 'hi' ;

        var bool3 = Boolean(str) ;
        console.log(bool3);


        var str = ',你好啊' ;

        var bool3 = Boolean(str) ;
        console.log(bool3);   // false


        var n;

        var bool3 = Boolean(n) ;
        console.log(bool3);   // false


    </script>

字符串：带字母的字符串 'hello'

纯数字字符串 '123'

数字：纯数字 123

带字母的数字 NaN

五、数据类型小结

alert()

document.write()

console.log()

* typeof 判断基本数据类型：number / string / boolean / null / undefined

Number() 强制转为数字

String() 强制转为字符串

Boolean() 强制转为布尔值

（括号里面写变量和常量都可以）

 <script>

        var x = 123 ;
        var str = String(x) ;
        console.log(str);


        var b = String(true) ;
        console.log(b);

        var boo = true ;
        var c = String(true) ;

    </script>

JS 运算符：

算数运算符、逻辑运算符、赋值运算符、比较运算符

一、算数运算符：

* 算术运算只有数字；

* 正常的数字：NaN 、Infinity；

算术运算符： + - * / %

         var x = 1 + 2 ;
         var y = x + 1 ;
         var z = y - 1 ; 
         var m = z * 2 ;
         var n = m / 1 ;

* 1被除数 0除数,除数不能为0;

        var s = 1 / 0 ;
        console.log(s);   // Infinity 无穷大

* 求余数 (模);

        var a = 7 % 3 ;
        console.log(a);

        var b = 3 % 7 ;
        console.log(b);


        var x = '1' ;
        var y = 2 ;
        var z = x + y ;
        console.log(z);

加号的两种含义：

1. 遇到字符串就是拼接的意思

2. 没有字符串就是求和的意思

    <script>
  
        var x = 'hello' ;
        var y = ' world' ;
        console.log(x + y);  // 字符串拼接

        var a = 1 ;
        var b = 2 ;
        console.log(a + b);  // 数字求和

        var m = '1' ; 
        var n = 2 ;
        console.log(m + n);  // 12  字符串拼接


        var a1 = true ;
        var a2 = false ;
        console.log(a1 + a2);  // 1


        var b1 = 'hi' ;
        var b2 = 2 ;
        console.log(b1 + b2);  // hi2

    </script>

算数运算符其他运算：

* 只有数字可以做减法，乘法，除法，求模运算；

  <script>

        var x = '23' ;
        var y = 2 ;
        console.log(x - y);


        var x = 'hi' ;
        var y = 2 ;
        console.log(x * y);  // NaN

        console.log(null + 2);  // 2

        console.log(undefined + 2);   // NaN


        console.log(null + undefined);  // NaN

        console.log(null + true);  // 1

    </script>

隐式转换：

1. 其他转字符串：强制转换 String() + ''

1. 其他类型转数字: 强制转化 Number() -0 /1 *1 %更大的数

        // var x = 1 ;
        // var str = x + '' ;
        // console.log(str);

        // console.log(true + '');

        var x = '123';
        // x = x - 0 ;
        // x = x / 1 ;
        // x = x * 1 ;
        x = x % 1000000000000;
        console.log(x);

变量在使用的过程中，是值在做计算，不是变量在做计算，变量只有通过赋值才会改变

        var m = '23' ;
        var n = m * 1 ;   // 看到的是m*1  实际上程序是先找到m对应的值，再做计算  '23'*1
        console.log(m);  // '23'
        console.log(n);  // 23

二、比较运算符：

比较运算符得到布尔值

===

!= 值不相等 == 反义词

!== 值或者数据类型不相等 === 反义词

* 关于等号：

= 赋值

== 判断值相等

=== 值和数据类型都要相

    <script>

        console.log(3 >= 2);  
        console.log(3 <= 3);  // true
        console.log(3 >= 3);  // true
        console.log(3 == 3);  // true
        console.log(3 == '3');  // true
        console.log(3 === '3');  // false

        console.log(2 !== '3');  // true
        console.log(3 !== '3');  // true

        // 0 < 10 < 20
        //   只有数学可以这么写
        //   js不能这样写   js没有连等式
        
        // console.log(0 < 10 < 2);
        //  解读： 0 < 10  得到true
        //        true < 2  得到true


        console.log(1 + 2 + '');   // '3'
        // 解读
        //   1+2=3
        //   3+''='3'

        console.log('' + 1 + 2);  // '12'
        // 解读：
        //   ''+1='1'
        //   '1'+2='12'

    </script>

三、逻辑运算符：

与： 并且，多个条件同时满足 &&

或： 只要有一个条件满足 ||

非： 取反 !

        // 0 < 10 < 20  改变成js 
        console.log(10 > 0 && 10 < 20);  // true

        console.log(10 > 0 || 10 > 20);  // true


        // 18   女的  +  有钱   +  身材好     &&  
        // 28   女的  或者   有钱   或者  身材好   ||
        // 38   不是男的    !

关于短路：

* 逻辑与运算中见假即假见假就短路了

* 逻辑或运算中见真即真见真就短路了

       console.log(1 > 10 && 1 < 100 && 1 < 1000);

       console.log(1 > 10 || 1 < 100 || 1 < 1000);

四、赋值运算：

// =

// +=

// -=

// *=

// /=

// %=

        var x = 1 ;
        // x = x + 1 ;
        x += 1 ;


        var y = 2 ;
        y *= 2 ;    // y = y * 2 ;
        console.log(y);  // 4



        var m = '2' ;
        m *= 1 ;

五、自增运算：

* ++在前面，先自增再赋值；

* ++在后面，先赋值，再自增；

    <script>


        // ++在前面，先自增再赋值，
        // ++在后面，先赋值，再自增


        // ++ 在后面  

        var x = 1 ;
        // x = x + 1 ;
        // x += 1 ;


        // x++ ;   x = x ; x = x + 1 ;
        // console.log(x);


        // var y = x++ ;
        // //  y = x = 1 ;
        // //  x = x + 1 = 2 ;
        // console.log(y);  // 1
        // console.log(x);  // 2


        // ++在前  

        // var m = 1 ;
        // // ++m ;  // m = m + 1 ; m = m
        // // console.log(m); // 2

        // var n = ++ m ;
        // //  m = m + 1 ;
        // //  n = m
        // console.log(n);  // 2
        // console.log(m);  // 2


        var a = 2 ;
        // var b = a++ + a ;
        // a++   2   a=3
        // 2 + 3 = 5

        // console.log(b);


        // var c = ++a + a ;
        // // ++a a=3  3
        // // 3 + 3
        // console.log(c);


        var d = a++ + ++a + a;
        // a++  2  a=3
        // ++a  a=4 4
        // 2+4
        console.log(d);

        console.log(NaN === NaN);
        

    </script>