零基础js第一周

Day1

1、概述：JavaScript：

简称JS，是一个运行在客户端浏览器的【解释型】【弱类型】【面向对象】脚本语言

       1、编译型：在运行程序之前，需要先检查语法是否正则，如果不正确，直接不允许运行 - 严格，比如：Java/C++/C#...

             解释型：在运行程序之前，不需要先检查语法是否正确，直接执行，但是碰到错误就会停止后续代码 - 更加自由，比如：JavaScript、PHP、Node.js...

       2、弱类型：变量保存的数据是可以随意的，数据类型是由数据来决定的 - 更加的自由

              1     -     Number 数字

              “1”   -     String     字符串

            强类型：变量保存的数据，是由数据类型来决定的 - Java - 更加的严格

       3、面向对象 - 很难

              以后可能会经常看到一种写法

                     对象名.属性名;

                     对象名.方法名();

              在编程界有一句话：万物皆对象 - 未来有非常多的对象（很多很多的属性和方法）等待我们学习

       4、特点：

             1、可以使用一切编辑器工具编写js代码，编辑器并不代表你的实力

             2、解释型

             3、弱类型

             4、面向对象编程方式

             5、可以做一切css完成不了的效果（轮播/选项卡/购物车/验证/数据渲染...）

2、如何使用JS

       1、使用方式：2种

              1、直接在HTML页面上写一个script标签，里面就可以书写你的js代码 - 上课使用

                     <script>js代码</script>

              2、外部js，进行引入 - 正式开发时使用

                     1、创建一个xx.js的文件，里面书写js代码

                     2、在HTML页面引入

                            <script src="js文件路径">

                                   只要有了src属性，此处就不可以在写代码了

                            </script>

       2、输出方式/打桩输出：帮助我们检查错误：3种

                     *1、在控制台输出日志：console.log(想要输出/查看的东西); - 会在F12的console显示日志

              2、在页面上输出日志：document.wrtie(想要输出/查看的东西); - document当前文档 write写入：在页面上输出，而且支持识别标签 - 垃圾：如果绑定了点击事件后输出，会把页面上原来的HTML和CSS都全部替换掉

              3、在警告弹出框输出日志：alert(想要输出/查看的东西); - 在一个浏览器自带的弹出框中输出日志，但是弹出框会卡住页面，用户只能看到一个白板 - 垃圾

       3、*变量和常量：

                     *变量：创建后，值可以再次修改

              何时使用：以后反复使用到的数据，都要提前把他保存在一个变量中，以后使用变量名，相当于就是在使用变量的值

              如何使用：var 变量名=值;

              特殊：

                     1、变量名其实不是随意的

                            1、不能以关键字命名

                            2、不能以数字开头

                            3、建议下划线命名法 或 小驼峰命名法

                                   name,age,gender,weight,height,hobby - 推荐

                                   xingming,nianling,xingbie,tizhong,shengao,aihao - 不推荐：虽然也能简明之意，逼格低！

                                   更不推荐：a,b,c,d,d1,d2,d3... - 此变量名无意义

                     2、如果你的变量名是name，不管你保存的数据是什么数据类型，都会悄悄的给你转变成一个字符串

                     3、多个变量创建可以简写：

                            var 变量名1=值1,变量名2=值2,....;

                       常量：创建后，值不可以再次修改，只能设置一次值

                     生活中的常量：

                            PI - 3.1415926....

                            一个小时60分钟....

                            一天24个小时

                            一年365/366天

                     语法：const 常量名=值; - 垃圾

       4、*算术运算符：+ - * / %

              跟小时候学的一摸一样，但是：

                     1、%：读作取余，俗称模，两个数相除，不去商，而取除不尽的余数

                            固定套路：

                            1、*判断奇偶性：num%2，结果为0说明是偶数，结果为1说明奇数 - 以后可以用于判断

                            2、获取一个数字的倒数n位

                                   1234%10       ->   4

                                   1234%100      ->   34

                                   1234%1000    ->   234

                     2、*****特殊：其实算数运算符具有隐式类型转换，默认转为数字在运算

                            +运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接

                            -*/%：字符串也可以变为数字，但是前提：必须是纯数字组成的字符串才可以

                                                         如果字符串包含了非数字字符，直接转为NaN:Not A Number - 不是一个数字，但是确实是数字类型，全是缺点：

                                                                             1、参与任何算术运算，结果仍为NaN

                                                                             2、参与任何比较运算，结果都是false

       5、*数据类型：分两大类

              1、原始/基本/值类型：5个

                     1、Number - 数字，取值：无数个

                     2、String - 字符串，取值：无数个，必须写上'' 或 ""

                     3、Boolean - 布尔，取值：两个：true/false - 往往用于判断比较的条件处使用

                     4、Undefined - 取值：1个：undefined，创建了一个变量，但是没有赋值，默认值为undefined，祖师爷犯的错，用来做大部分操作都会报错！

                     5、Null - 空，取值：1个：null，释放变量/内存，节约内存空间

             

              2、引用/对象类型：11个引用类型的对象（很多很多的属性和方法）

                           

       扩展：

              1、分支结构：判断条件的不同选择对应的代码去执行，执行了一条路就不会再走别的路***

                     如何使用：

                            一个条件，一件事，满足就做，不满足就不做

                            if(判断条件){

                                   操作;

                            }

                            一个条件，两件事，满足就做第一件，不满足就做第二件

                            if(判断条件){

                                   操作;

                            }else{

                                   默认操作;

                            }

      

                            多个条件，多件事，满足谁就做谁

                            if(条件1){

                                   操作1;

                            }else if(条件2){

                                   操作2;

                            }else if(条件3){

                                   操作3;

                            }else{

                                   默认操作;

                            }

                     特殊：

                            1、else if...你想写多少个随便，根据你的需求自己判断

                            2、最后else可以省略不写，如果条件都不满足，那么什么事都不会执行，你的分支就白写了

                            3、书写判断顺序，需要根据你的需求来写，不能乱写顺序

                           

              2、用户输入弹出框：

                     var user=prompt("提示文字","默认值")

作业：

   要求：能用户输入的就让用户输入

   1、计算圆的周长和面积，并且用控制台输出最后答案

       周长：2*pi*r;

       面积：pi*r*r;

   2、根据分数送礼物

   3、计算标准体重bmi

       计算公式为：BMI=体重÷身高2。（体重单位：千克；身高单位：米。）

       BMI正常值在20至25之间，超过25为超重，30以上则属肥胖，低于20偏瘦

   4、PPT44页，两道题，计算弧度

       1、新建4.html页面，使用常量保持圆周率t。再使用程序分别计算30度角和60度角对应的弧度是多少?

       2、尝试在计算30度角弧度和60度角弧度的代码之间修改Π的值，观察程序运行结果?