1js基础内容

Posted 2020-12-02 飞刀还问情

js基础内容

1. 编辑器

编译环境 浏览器
编辑软件 sublime DW H5Build Atom
==【注】尽可能多的去使用编辑器去编辑代码。==

html+css
==JS 逻辑==

比作建设一栋摩天大厦
Html 结构
css 装修
javascript 物业 (==和用户交互==)
如何和用户进行交互。

2.认识JavaScript

基于对象和事件驱动的客户端脚本语言。

++JavaScript是一种专为与网页交互而设计的客户端脚本语言。++
网页交互 和网站进行互动
客户端

客户端和服务端（相对概念）资源提供
++服务端 资源提供方
客户端 获取资源++

3.js的基础

<script type = "text/javascript">

/* javascript组成

graph TB
javascript-->ECMAScript
javascript-->BOM
javascript-->DOM

++1、ECMAScript
2、BOM Browse Object Model 浏览器对象模型
3、DOM Document Object Model 文档对象模型++
*/

/【注】javascript代码全部写在script标签里。
==src: 引入外部文件【引入js文件】== css href /

/第一个js程序
==alert() 弹出警告框
document.write() 在页面上输出文本==
/
// alert("Hello World!");
//document.write("Hello World!");

            alert(1);
        </script>
        <script>
            alert(2);
        </script>
        <script src = "demo.js">
            /*
                如果用户引入外部文件  
                这里就不能再写代码了
            */   
            alert("执行不到");
//  单行注释   快捷键（ctrl + /）     
/*  
        多行注释  快捷键（ctrl + shift + /） 
*/
        </script>

4.js注意

            /*document.write("<h1>标题</h1>"); */
            /*  document.write 会自动解析文本内标签内容
            */
            /*
                转义字符 &lt  <    &gt  >
            */
            document.write("&lt/script&gt");
            /*
                【注】要求每一条js语句后都加分号。
            */

5.变量和常量

++常量/直接量/字面量++
100 3.14 "hello" true

数据类型：
==基本数据类型：==
++Number/数字++ 10 3.14
++String/字符串++ 所有带单引号或双引号
++Boolean/布尔值++ true false

==复合数据类型：对象==
++==特殊数据类型==++：==NaN(not a number) 　undefined(未声明)　 null(空)==

1、变量的声明/定义
==var 关键字(特殊功能的单词) 声明变量==
==var num 在内存中开辟/申请一块空间，名字叫做num==
num = 20;

2、初始化
声明变量的时候，直接赋值，叫做初始化。

                /*var num = 20;  
                alert(num);*/  
                /*var num;  
                alert(num); //undefined*/

3、为了避免上述操作，一般情况下，会把变量赋值成null

                /*var num = null;
                num = 30;*/
            /*
                typeof 输出当前变量或者常量的数据类型
            */
            
            // alert(typeof num); //number

            /*var str = "hello";
            alert(typeof str); //string*/

            var isYes = true;
            alert(typeof isYes); //boolean

==1、=号前后加空格==
==2、每一条语句后加分号。==

==组成电脑的部件
外设

==CPU 内存 硬盘 主板 显卡(GPU)==
运行程序 程序被CPU运行
写好程序存储硬盘
硬盘 -> 内存(程序是在内存中被CPU运行)

6.变量命名规则

/
++【注】用户自定义的名称，都叫做标识符。++
1、==只能由数字、字母、下划线、$组成==
2、==不能以数字开头==
3、==区分大小写age Age 两个变量==
4、==见名思意==
5、==多个单词驼峰式命名 className 烤串式 class_name== 6、==禁止用拼音，英文单词用全拼==
7、==不能是关键字和保留字==
++【注】JS变量，弱类型。变量的数据类型可以根据赋值改变。++
【注】禁止这么做，会歧义。
/

            // var 1nu$m = 10;
            /*var num = 10;
            var num1 = 10, num2 = 20, num3 = 30;
            var str = "hello";
            var name = "qf"
            var className = "青岛1802";*/
            /*var num = 10;
            num = "hello"
            alert(typeof num);*/

7.运算符

/
++算数运算符
逻辑运算符
关系运算符
赋值运算符
自增、自减运算符++
...
/

/
算符运算符
==+
-

/
% 取余运算符==
0.01
*/

++++            /*++++var num = 12 % 10;
            alert(num);*/

            /*var num = -10 / 0;  //Infinity无穷大  -Infinity无穷小
            alert(num)*/

/
其他数据类型的算数运算
++表达式：变量/常量和任何运算符组成的式子叫做表达式。
1、功能
2、值++
/
// alert(100 + 200);

8.自动数据类型转换

/
自动数据类型转换：
【注】==不同数据类型的数据，不能直接用于计算，转化成同一类型，才能进行计算。==
/

/
==+==
==1、当运算符是加法，并且其中一个操作数是字符串的情况下，另外一个操作数也会被转成字符串进行拼接。==
/

            // var str = "hello" + "world";
            // var str = "hello" + 100
            // var str = "hello" + true;
            /*var str = "hello" + undefined;
            alert(str);*/

/
2、当运算符不是加号，如果操作数是字符串，操作数会直接转成数字进行运算。
如果操作数不是纯数字字符串的话，转成数字会直接转成NaN,NaN和任何数据进行运算，都是NaN(not a number)。
/

            /*var str = "200" - "100";
            alert(typeof str); //number*/

            /*var str = "200" - "10a";
            alert(str); //NaN*/

/
3、布尔值和数字进行算数运算。
<1>将布尔值转成数字，再进行运算
<2>true => 1 false => 0
/

            // var num = 1 + true;
            // var num = 1 + false;
            // var num = 10 - true;
            /*var num = "10" - true;
            alert(num);*/

9.强制数据类型转换

/*
++Boolean(数据);
【注】将别的数据类型强制转换成布尔值。++

==1、非零即真
2、非空即真
3、undefined NaN null => false==
*/

            // alert(Boolean(-10)); //true
            // alert(Boolean(0)); //false

            // alert(Boolean("10")); //true
            // alert(Boolean("")); //false

            // alert(Boolean(undefined)); //false
            // alert(Boolean(NaN)); //false
            // alert(Boolean(null)); false

10.数字强制数据类型转换

    <script>

/*
==Number() 将别的数据类型转成数字
parseInt() 取整
parseFloat() 取浮点数(带小数点的数)==
*/

            // alert(Number(true));
            // alert(Number(false));

            // alert(Number("200a")); //NaN



            // alert(parseInt("3.14"));

            // alert(parseInt("20a")); //20

            // alert(typeof parseFloat("3.14")); //number

/
++【注】不要用小数进行运算，计算机不会计算小数运算。++
/

        // alert(3.14 + 5.33);
        alert(0.8 - 0.1);
    </script>

11.练习

<script>
            /*
                a.入职薪水10K，每年涨幅入职薪水的5%，50年后工资多少？
            */  

            /*var money = 10000;
            var salary = money * 0.05 * 50 + money;
            alert(salary);*/

            /*
                b.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
            */
            /*var hour = 89;
            var date = parseInt(hour / 24);
            var newHour = hour % 24;

            alert("共" + date + "天零" + newHour + "小时");*/

            /*
            c.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
            它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
            提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)
            */

            /*var Fahrenheit = 90;
            var centigrade = 5 / 9 * (Fahrenheit - 32);
            alert(centigrade)*/


            /*
                d.给定一个三位数，分别把这个数字的百位、十位、个位算出来并显示。
            */
            var num = 123;
            var unit = num % 10;
            var decade = parseInt(num / 10) % 10;
            var hundreds = parseInt(num / 100);

            alert("百位：" + hundreds + "，十位：" + decade + "，个位：" + unit);

/*
1、代码缩进(JS/html) 一个tab键 == 四个空格
2、=号两边的空格 + 号两边的空格，所有运算符前后都要加空格。
3、语句最后的 ; 号
*/

    </script>

12.运算符格式

<script>
        /*
            格式：*=  += -= /= %=
        */
        var num = 10;
        // num = num + 20;
        // num += 20;

        // num = num * 10;
        num *= 10;
        alert(num);
    </script>

13.一元运算符

<script>
        /*
        【注】操作数只有一个，叫做一元运算符
            操作数++ 
            1、功能   对原来的数进行+1操作。
            2、值

        【注】表达式  num    num++   ++num

功能：一致，都是对原有的num进行+1操作。==自增==
值：
==num++
++后置，先取值，后运算
++num
++前置，先运算，后取值==

==b=a++——>b=a,a=a+1
c=++a——>a=a+1，c=a==

操作数--

*/
            // var num = 2;
            // alert(num++); //2
            // alert(++num); //3
            // alert(num);   //3

            var num = 2;
            // alert(num--);
            alert(--num);
            alert(num);
    </script>

14.关系运算符

    <script>
        /*
            > < >= <= == != === !==
            

        格式：
            表达式1 关系运算符 表达式2
        值： true   false
        */
        // alert(10 > 20);

/*
【注】别的数据类型之前的关系运算
和其他运算符一样,当关系运算符操作数非数值时要遵循一下规则:
1.两个操作数都是数值，则数值比较；
2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；
逐位进行比较，只要比较出大小，直接得出结果。
3.两个操作数有一个是数字，则将另一个转换为数字，再进行数值比较；
4.NaN和任何数据，进行关系运算都是false。
*/

            // alert("a" > "b"); //ASCII码值 字符和二进制的十进制表示的编码一张对应表

            // alert("abcd" < "ad"); //true

            // alert(10 < "9a");

            // alert(2 > true);
            // alert(true == 1);
            // alert(false == 0);

/*
++在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：
1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；
2.一个操作数是字符串，则比较之前将其转成为数值再比较
3.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；
4.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false++
*/

        // alert(NaN == NaN); //false

        alert("10" === 10);

    </script>
    

15.逻辑运算符

<script>

/*
逻辑运算符

与 && (and符号)
格式： 表达式1 && 表达式2
结果：当两个表达式都为真的时候，与运算为真。
短路操作：
当第一个表达式为假的时候，整个表达式为假，表达式2就不去执行。

或 ||
格式：表达式1 || 表达式2
结果：当两个表达式都为假的时候，或运算为假。
短路操作：
当第一个表达式为真的时候，整个表达式为真，表达式2就不去执行。

非 !
格式：!表达式
结果：表达式的值取反。
*/

            // alert(a);

            // alert(10 < 5 && alert(a));

            // alert(10 > 5 || alert(a)); //true

/
非运算
它的流程是：先将这个值转换成布尔值，然后取反，规则如下：
1.操作数是一个空字符串，返回 true；
2.操作数是一个非空字符串，返回 false；
3.操作数是数值 0，返回 true；
4.操作数是任意非 0 数值(包括 Infinity)，false；
5.操作数是 NaN，返回 true；
6.操作数是 undefined，返回 true；
/

            // alert(!"");  //true
            // alert(!"ss");  //false
            // alert(!0); //true
            // alert(!Infinity); //false
            // alert(!NaN); //true
            // alert(!undefined); //true

/*
位运算
32位操作系统
32位地址总线
32位可最大寻址基数。 2^32

例如：全国
用十进制两位数进行发放电话号码 00~99
用户二进制两位数进行发放电话号码 00 01 10
1132位系统下可识别的最大内存4GB。
64位操作系统 2^32 * 4GB

计算内存：CPU运行程序的场所。
4GB 8GB
相当于一个一个开关组成的一栋摩天大厦，每一个开关一个房间，每一个房间住一个1或者0.
*/

/
字符串运算符
+ 字符串拼接符
/

        var num1 = 10, num2 = 20, num3 = 30;

    </script>

/
十进制
二进制
八进制
十六进制
/

/*
十进制转二进制
52 　　模二取余
110100

二进制转十进制
1 * 2^2 + 1 * 2^4 + 1 * 2^5 =
4 + 16 + 32 = 52

八进制
二进制 => 八进制
【注】自右往左，每三位一组，不足三位用0补齐，将每三位转成十进制数。
110 100
64
4 * 8^0 + 6 * 8^1 = 52;
十六进制 0~9 a b c d e f
【注】自右往左，每四位一组，不足四位用0补齐，将每四位转成十进制数。
0011 0100
34
4 * 16^0 + 3 * 16^1 = 52;
*/

==运算符优先级==