学习JS基础的第一天

聊了
177 阅读4分钟

响应式案例和JS基础第一天

JavaScript是什么？

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

网页特效 (监听用户的一些行为让网页作出对应的反馈)

表单验证 (针对表单数据的合法性进行判断)

数据交互 (获取后台的数据, 渲染到前端)

服务端编程 (node.js)

javascript组成有什么？

ECMAScript: 规定了js基础语法核心知识。 比如：变量、分支语句、循环语句、对象等等 Web APIs : DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等 注意 DOM属于BOM

javascript书写位置？

内部 JavaScript

接写在html文件里，用script标签包住

​ 规范：script标签写在上面

​ 拓展： alert(‘你好，js’) 页面弹出警告对话框

注意事项

我们将

内联 JavaScript

代码写在标签内部

语法：

<boutton onclic="alert('你好！JavaScript')">点击我月薪百万</button>

注意： 此处作为了解即可，我们并不推荐，但是后面vue中会看到这种使用模式

外部 JavaScript

代码写在以.js结尾的文件里

​ 语法：通过script标签，引入到html页面中。

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

注意：

  1. script标签中间无需写代码，否则会被忽略！ 2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个 好的习惯 3. 书写的位置尽量写到文档末尾 前面 外部 js 标签中间不要写代码，否则会被忽略

JavaScript 注释

注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。注释只是为了提高可读性，不会被计算机编译

1.单行注释 符号：// 作用：//右边这一行的代码会被忽略 快捷键：ctrl + /

​ 2块注释 ​ 符号：/* / ​ 作用：在/ 和 */ 之间的所有内容都会被忽略

JavaScript 结束符

代表语句结束 英文分号 ; 可写可不写（现在不写结束符的程序员越来越多） 换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行 因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符 但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）

JavaScript的输入和输出？

JavaScript 输入输出语法

​ 人和计算机打交道的规则约定 ​ 我们要按照这个规则去写 ​ 我们程序员需要操控计算机，需要计算机能看懂

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。 常见的几种输出语法：

ducument.write('要输出的内容');

向body内输出内容

如果输出的内容写的是标签，也会也会被解析成网页元素

alert('要输出的内容');

页面弹出警告对话框

console('控制台打印');

控制台输出语法，程序员调试使用

prompt('请输入你的名字：');

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字，获取的输入内容是字符串

小结

  1. JavaScript是什么？ JavaScript是一门编程语言，可以实现很多的网页交互效果。 2. JavaScript 书写位置? 内联 JavaScript 内部 JavaScript – 写到 标签上方 外部 JavaScript - 通过 src 引入html页面中，但是

  2. JavaScript 的结束符？ 分号； 可以加也可以不加，可以按照团队约定 注意换行默认为结束符 5. JavaScript 输入输出语句？ 输入： prompt() 输出： alert() document.write() console.log()

boostrap技术

栅格系统

在使用bootstrap UI框架的时候是不需要和以前一样写base.css来做样式的初始化！

栅格系统是boostrap 封装好的一种技术（媒体查询），更加方便使用一套代码可以在不同的屏幕上显示出来。

使用框架的准备

​ 1.先引用jquery.js

​ 2引用bootstrap.js

​ 3.引用CSS样式

写栅格代码

1 按照网站需求，先容器（container）版心 或者container-fluid(全屏)

2再写行row

3.根据屏幕的种类 以及每一列占的份数

​ 大屏幕 col-lg-3 每列显示上

​ 中屏幕 col-md-4

​ 小屏幕 col-sm-6

​ 极小屏幕 col-xs-2

如果我们只设置了较小屏幕 ，比他大的屏幕默认会沿用它的设置。


     <div class="container">
       <div class="row">
         <!-- <div class="col-lg-3 col-md-4 col-sm-6 col-xs-2">1</div>
         
         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-2">2</div>
         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-2">3</div>
         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-2">4</div>
         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-2">5</div>
         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-2">6</div> -->
         <div class="col-xs-3">1</div>
         <div class="col-xs-3">2</div>
         <div class="col-xs-3">3</div>
         <div class="col-xs-3">4</div>
         <div class="col-xs-3">5</div>
         <div class="col-xs-3">6</div>
       </div>
     </div>

查看boostrap文档引用字体图标

   <span class="glyphicon glyphicon-search aabbcc" aria-hidden="true"></span>

    <span class="glyphicon glyphicon-modal-window" aria-hidden="true"></span>

用boostrap制作导航条

打开文档，找到组件 找到下方的导航条

先引用导航条代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-导航条</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
  </head>
  <body>

    <!-- 导航条 -->
    <nav class=" navbar-fixed-top navbar navbar-default navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">登录</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!-- 导航条 -->

    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
    <h1>5</h1>
    <h1>6</h1>
    <h1>7</h1>
    <h1>8</h1>
    <h1>9</h1>
    <h1>10</h1>
    <h1>11</h1>
    <h1>12</h1>
    <h1>13</h1>
    <h1>14</h1>
    <h1>15</h1>
    <h1>16</h1>
    <h1>17</h1>
    <h1>18</h1>
    <h1>19</h1>
    <h1>20</h1>
    <h1>21</h1>
    <h1>22</h1>
    <h1>23</h1>
    <h1>24</h1>
    <h1>25</h1>
    <h1>26</h1>
    <h1>27</h1>
    <h1>28</h1>
    <h1>29</h1>
    <h1>30</h1>

     <!-- 先引入jquery -->
     <script src="./lib/jquery.js"></script>
     <script src="./lib/bootstrap/js/bootstrap.js"></script>

  </body>
</html>

轮播图

先在JavaScript插件，找到 Carousel（中文的话是轮播图）

引用轮播图代码布局再修改样式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-导航条</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
  </head>
  <body>

    <!-- 导航条 -->
    <nav class=" navbar-fixed-top navbar navbar-default navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">登录</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!-- 导航条 -->

    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
    <h1>5</h1>
    <h1>6</h1>
    <h1>7</h1>
    <h1>8</h1>
    <h1>9</h1>
    <h1>10</h1>
    <h1>11</h1>
    <h1>12</h1>
    <h1>13</h1>
    <h1>14</h1>
    <h1>15</h1>
    <h1>16</h1>
    <h1>17</h1>
    <h1>18</h1>
    <h1>19</h1>
    <h1>20</h1>
    <h1>21</h1>
    <h1>22</h1>
    <h1>23</h1>
    <h1>24</h1>
    <h1>25</h1>
    <h1>26</h1>
    <h1>27</h1>
    <h1>28</h1>
    <h1>29</h1>
    <h1>30</h1>

     <!-- 先引入jquery -->
     <script src="./lib/jquery.js"></script>
     <script src="./lib/bootstrap/js/bootstrap.js"></script>

  </body>
</html>

布局思路

元素设置高度 1 在最外层来设置 2 由里面来撑开 3 优先级 权重的问题 4 只要是使用第三方的ui框架 1 90%代码人家写好 2 10%代码 需要我们自己去重置去调试去调整 5 认真去对待调试！！！ 开发人员 必须要熟练的技术！！ 6 旧项目使用的boostrap的版本和新的项目的bootstrap版本不一致 才导致 效果没有对应上！！

总结

旧的项目 用的旧的 bootstrap 新的项目 用的新的 bootstrap 我们没有自己改动过代码 但是效果却对应不上 ！！ 找到了原因 引入的第三方库的版本不相同导致！！ 从中学习到了什么 调试错误的范围 更加大！ 老师演示的调试错误的方法 已经出现错误的情形 你感觉 工作中 会不会出现?

5 如何解决？ 
  1 直接使用旧的bootstrap的版本 （暂时使用1 方案 ）
  2 建议老板 使用新的版本-接受有一些布局细节和旧版本不一致的情绪
  3 使用新版本，哪些不一样 具体再去挨个微调（不推荐，可能工作量会特别大 ）
avatar
文章
阅读
粉丝