javaScript基础

1. javaScript的由来【了解】

• 为什么会出现js

  早期出现js的原因就是为了解决一个问题: 用户和浏览器(网页)进行交互其他了解:
  系统程序员Brendan Eich 设计了js语言, js语言1借鉴C语言的基本语法; (2)借鉴Java语言的数据类型和内存管理; (3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位; (4)借鉴Self语言，使用基于原型(prototype)的继承机制。
  

• 为什么要学javaScript？

  1. 现在的js依然可以解决实现用户和浏览器(网页)进行交互
  2. 今天的js能够解决的问题更多☞ js游戏开发☞ 实现应用级别的程序☞ 地理定位
  

2. javaScript学习路径

☞ javaScript学习准备工作

1. 知识点javaScript组成 【了解】

   • ECMASCRIPT : js语法(目前我们这个阶段就是在学习ECMASCRIPT)
   • BOM : 通过js操作浏览器相关的效果
   • DOM: 通过js操作网页中相关的效果(通过js操作网页, 操作网页中的标签和网页中的css)

2. 知识点javaScript书写位置(参照css的书写位置学习)

   • 内嵌式(必须掌握的)

     将js代码嵌入到html页面中步骤:1. 新建一个网页2. 在网页的任何一个位置 添加一个 <script></script> 标签3. 在 <script></script> 内部写上js代码
     

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WCbReptV-1582980108301)(img/1582943890993.png)]

   • 外联式(必须掌握)

     实际开发中用外联是较多,学习阶段内嵌式为主步骤:
     1. 新建一个html页面
     2. 单独新建一个js文件
     3. 直接在j文件中写js代码, 不能在js文件中设置 <script></script> 标签
     4. 在网页中的任何一个位置,通过 <script></script>
     

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AUMZaHos-1582980108303)(img/1582944276317.png)]

     • 外联式写法注意事项

       1. 可以在网页中引用多个js文件

       2. 内嵌式和外联式不能使用同一个 script 标签

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vAiEvRJ3-1582980108304)(img/1582944502775.png)]

   • 行内式(了解)

     将js代码写到标签内部1. 在标签内部写个事件名称: 事件[网页中用户的每一个动作都叫一个事件]onclick(点击事件,代表用户的点击动作)
     

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hhC2pRwU-1582980108304)(img/1582944962406.png)]

3. 知识点-javaScript输出消息的方式

   1. 要通过js输出消息的方式引出其他要讲的知识点
   2. 为了让大家体会一下js的特点
   

   • 在网页控制台中输出消息

     console.log('');   
     

   • 在网页中body标签中输出消息

     document.write();注意:
     document.write() 可以在网页中输出html标签例如: document.write('<h1>我是一个标题标签</h1>');
     

   • 在网页中接收用户输入的信息

     prompt('请输入您的姓名');
     

   • 在网页中获取用户选择的结果

      //通过js获取用户的选择结果confirm('确定今天讲的js大家都能听明白么?');
     

   • 在网页中输出消息

     alert();
     

   • 通过以上js代码总结

     注意:
     1. 如果中输出的是一段文字或者字母,必须要加 引号(单引号或者双引号)
     2. js中是区分字母大小写的
     3. js中遇到的所有特殊符号都必须是 英文输入法下的符号
     4. js中输出数字的时候,可以加引号也可以不用加
     

☞javaScript学习重点内容

1. 知识点-javaScript中变量

   • 字面意思理解变量

     变量: 可以变化的值,数据
     

   • 通过程序的角度理解变量

     程序中的变量:  其实就是一个用来保存数据的一个容器变量本质上就是一个容器.
     

   • 变量的作用

     变量的作用就是用来保存数据的.
     

   • 变量的定义

     var  自定义的变量名;例如:
     var  myname;
     注意:
     1. 变量是不需要加引号的
     

   • 变量的赋值

     变量名 = 值;注意:
     1. '=' 叫赋值运算符
     2. '=' 赋值运算符作用 将右侧的结果 赋值给左侧的变量(先执行右侧的代码,在执行左侧的代码)
     3. '=' 赋值运算符不能比较是否相等
     4. 如果输出的结果是一个变量,那么变量不能使用引号
     5. 如果程序中操作的是一个变量,那么不需要加引号.
     

   • javaScript中定义变量及命名规范

     • 变量的名字命名规则与CSS类名的规则相似(最好有语义性)

       1. 变量的名称最好具有语义性(单词, 拼音)
       2. 变量的命名最好以驼峰命名法(第一个单词的首字母小写,后面单词的首字母大写)

     • 不合法的变量名

       [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FcXUf0kU-1582980108305)(img/1582957721340.png)]

   • javaScript中变量赋值及总结

     • 在程序中,同一个变量一次只能保存一个值
     • 同一个变量保存的值是最后一次的赋值结果
     • 操作同一个变量的时候,变量只需要定义一次就可以了,不需要重复定义

2. 知识点-javaScript中的数据类型

   1. 简单数据类型

      • 数字类型(number)[掌握]

        1. 什么是数字类型?

           如果一个变量的值是数字,且不带引号,那么该变量就是数字类型.
           

        2. 数字类型有什么特点

           数字类型相加后得到的结果还是一个数字类型(最后的结果还是一个数字)
           

      • 字符串类型(string)[掌握]

        1. 什么是字符串类型?

           如果一个变量的值带有引号(单引号和双引号都可以),那么该变量就是字符串类型
           

        2. 字符串类型有什么特点?

           如果字符串相加,那么最后的结果就是将变量中的值拼接到一起(拼接字符串)
           

      • 布尔类型(boolean)

        1. 什么是布尔数据类型?

           如果一个变量的值 是  true 或者  false,那么该变量的数据类型就是布尔类型
           

        2. 布尔数据类型有什么特点?

           布尔数据类型只有两个值,一个是 true 一个是 falsetrue :  代表正确的,真的,条件满足的    -----> 后面学习条件语句的时候就会用到false : 代表错误的,假的,条件不满足  
           

      • undefined类型(undefined)

        1. 什么是undefined类型?

        如果一个变量的值是 undefined 或者 变量没有赋值 ,那么当前这个变量就是 undefined 类型
        

        2. undefined类型有什么特点?

           如果一个变量没有赋值,其实该变量的默认值就是 undefined,所以对应的数据类型就是 
           undefined 类型
           

   2. 获取数据类型typeof

      通过 typeof 获取当前变量的数据类型var  a = '123';   
      //获取变量的数据类型
      console.log(typeof(a));
      

3. 知识点-数据类型转换

   1. 强制类型转换（显示类型转换）

      • 转换为数字类型

        1. 通过  Number(变量)  --->  将变量转化为数字类型
        2. 通过  parseInt(变量)  ---> 将变量转化为数字类型
        3. 通过  parseFloat(变量)  ----> 将变量转化为数字类型区别:
        Number:  通过Number在进行数据类型转换的时候,变量原来是什么值,转化后还是原来的值
        parseInt: 通过parseInt进行数据类型转换的时候,最后的结果就是保留整数部分,忽略小数部分	`
        parseFloat: 
        如果变量的值是一个非数字的字符串,那么通过parseFloat只能获取数字部分,如果都是数字,那么会将变量原来的值保存下来.
        

      • 转字符串类型

        1. 变量.toString()
        2. String(变量)区别:1. toString() 不能将任何值都转化为字符串类型, 除 undefined2. String() 可以将任何的值都转化为字符串类型原型知识点(js的高级中才会涉及到...)
        

      • 转布尔类型

        Boolean(变量)  ----> 转化为布尔类型注意:
        1. 什么情况下可以转化为 false如果变量的值是 0 | undefined |  null  | 空字符串2. 除以上几个特殊值之外,都可以转为 true
        

   2. 隐式类型转换【了解】

4. 知识点-运算符

   1. 算数运算符

   2. 赋值运算符

   3. 一元运算符【循环语句中】

   4. 比较运算符

   5. 逻辑运算符

) ----> 转化为布尔类型

    注意:1. 什么情况下可以转化为 false如果变量的值是 0 | undefined |  null  | 空字符串2. 除以上几个特殊值之外,都可以转为 true```

2. 隐式类型转换【了解】

3. 知识点-运算符

   1. 算数运算符

   2. 赋值运算符

   3. 一元运算符【循环语句中】

   4. 比较运算符

   5. 逻辑运算符