W2

作者: NPU_周辉 | 来源:发表于2017-04-19 22:14 被阅读8次

bootstrap：

用bootstrap进行网页的修饰，源码如下：

<!DOCTYPE html>
<html>
 <head> 
  <title></title> 
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> 
 </head> 
 <body style="border:1px red solid; padding:10px"> 
  <h1 class="text-center"><strong>统一建模语言理论测试</strong></h1> 
  <div class="panel panel-default"> 
   <div class="panel-body"> 
    <div class="row"> 
     <label class="control-label col-md-4" for="formGroupInputLarge">考试科目：统一建模语言</label> 
     <label class="control-label col-md-4" for="formGroupInputLarge">时间：100分钟</label> 
     <label class="control-label col-md-4" for="formGroupInputLarge">得分</label> 
    </div> 
   </div> 
  </div> 
  <div class="panel panel-default"> 
   <div class="panel-body"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <form class="form-inline"> 
       <div class="form-group"> 
        <label>班级（必填）：</label> 
        <input type="text" class="form-control" id="exampleInputName2" /> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-4"> 
      <form class="form-inline"> 
       <div class="form-group"> 
        <label class="control-label">学号（必填）：</label> 
        <input type="text" class="form-control" id="exampleInputName2" /> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-4"> 
      <form class="form-inline"> 
       <div class="form-group"> 
        <label for="exampleInputName2">姓名（必填）：</label> 
        <input type="text" class="form-control" id="exampleInputName2" /> 
       </div> 
      </form> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="panel panel-default"> 
   <div class="panel-heading"> 
    <h3 class="panel-title"> 一、填空题（每空5分，共20分） </h3> 
   </div> 
   <div class="panel-body"> 
    <div style="margin:5px">
     1.UML的中文全称是:
    </div> 
    <input type="text" class="form-control" /> 
    <div style="margin-top:15px"> 
     <div style="margin:5px">
      2.对象最突出的特征是：
     </div> 
     <div class="row"> 
      <div class="col-xs-4"> 
       <input type="text" class="form-control" /> 
      </div> 
      <div class="col-xs-4"> 
       <input type="text" class="form-control" /> 
      </div> 
      <div class="col-xs-4"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="panel panel-default"> 
   <div class="panel-heading"> 
    <h3 class="panel-title"> 二、选择题（每空10分，共20分） </h3> 
   </div> 
   <div class="panel-body">
     1.UML与软件工程的关系是：
    <br /> 
    <div class="radio"> 
     <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (A)UML就是软件工程 </label> 
    </div> 
    <div class="radio"> 
     <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (B)UML参与到软件工程中软件开发过程的几个阶段 </label> 
    </div> 
    <div class="radio"> 
     <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (C)UML与软件工程无关 </label> 
    </div> 
    <div class="radio"> 
     <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (D)UML是软件工程的一部分 </label> 
    </div> 
    <div style="margin-top:15px">
      2.Java语言支持：
     <br /> 
     <div class="radio"> 
      <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (A)单继承 </label> 
     </div> 
     <div class="radio"> 
      <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (B)多继承 </label> 
     </div> 
     <div class="radio"> 
      <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (C)单继承和多继承都支持 </label> 
     </div> 
     <div class="radio"> 
      <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (D)单继承和多继承都不支持 </label> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="panel panel-default"> 
   <div class="panel-heading"> 
    <h3 class="panel-title"> 三、多项选择题（每空10分，共20分） </h3> 
   </div> 
   <div class="panel-body">
     1. 用例的粒度分为以下哪三种：
    <br /> 
    <div class="checkbox"> 
     <label> <input type="checkbox" value="" /> (A)需求级 </label> 
    </div> 
    <div class="checkbox"> 
     <label> <input type="checkbox" value="" /> (B)概述级 </label> 
    </div> 
    <div class="checkbox"> 
     <label> <input type="checkbox" value="" /> (C)用户目标级 </label> 
    </div> 
    <div class="checkbox"> 
     <label> <input type="checkbox" value="" /> (D)子功能级 </label> 
    </div> 
    <div style="margin-top:15px">
      2. 类图由以下哪三部分组成：
     <br /> 
     <div class="checkbox"> 
      <label> <input type="checkbox" value="" /> (A)名称(Name) </label> 
     </div> 
     <div class="checkbox"> 
      <label> <input type="checkbox" value="" /> (B)属性(Attribute) </label> 
     </div> 
     <div class="checkbox"> 
      <label> <input type="checkbox" value="" /> (C)操作(Operation) </label> 
     </div> 
     <div class="checkbox"> 
      <label> <input type="checkbox" value="" /> (D)方法(Function) </label> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="panel panel-default"> 
   <div class="panel-heading"> 
    <h3 class="panel-title"> 四、判断题（每题10分，共20分） </h3> 
   </div> 
   <div class="panel-body">
     1.用例图只是用于和客户交流和沟通的，用于确定需求。 
    <div class="radio"> 
     <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> </label> 
    </div> 
    <div class="radio"> 
     <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </label> 
    </div> 
    <div style="margin-top:15px">
      2.在状态图中终止状态在一个状态图中允许有任意多个。 
     <div class="radio"> 
      <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> </label> 
     </div> 
     <div class="radio"> 
      <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </label> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="panel panel-default"> 
   <div class="panel-heading"> 
    <h3 class="panel-title"> 五、简答题（每题20分，共20分） </h3> 
   </div> 
   <div class="panel-body"> 
    <div style="margin:5px">
     1.简述什么是模型以及模型的表现形式？
    </div> 
    <textarea class="form-control" rows="3"></textarea> 
   </div> 
  </div> 
  <center> 
   <button type="button" class="btn btn-success">计算分数</button> 
  </center> 
  <hr />  
 </body>
</html>

效果如图：

效果图

JavaScript

字符串

字符串必须使用引号包围，其中，引号可以使用单引号也可使用双引号，但必须成对出现。如：

"Hello World"
'世界，你好'
'Hello World,1946'

日志输出

利用console中输出.log()中括号内的内容，如:

console.log('Hello World');

在控制台输出字符串的结果是该字符串引号内的字符,不包含引号。且输出的是字符本身(javascript)，而不是字符的类型(String)。

注释符号

分号可加可不加，但当多条语句写于一行时，必须加分号。
对js进行注释时单行注释使用//多行使用/* */进行注释。

复制声明

JavaScript 中创建变量经常被称为 “声明” 变量。需要通过 var 语句来声明 JavaScript 变量。
声明之后，变量并没有值，不过我们可以在声明变量时向变量赋值:

var x = 5;
var name = "Tom";

简单数据类型

undefined : 这个值表示变量不含有值。
null : 这个值表示变量为空。

undefined 和 null 的区别是:typeof(undefined) 返回值是 'undefined'，typeof(null) 返回值是字符串 'object'(对象类型)。

boolean : true 或 false 代表布尔值。
number : javascript 只有一种数字类型。数字可以带小数点，也可以不带。如:123 和12.3
srting : 字符串是字符的载体，而且必须被成对的引号包围。

复杂数据类型

javascript中的复杂数据类型只有一种，即对象(object)。
{} 花括号，用来定义一个对象；

定义方式：
对象由花括号包围。在括号内部，属性以键值对的形式，如 key : value 来定义，又称属性名和属性值。属性间由逗号分隔。例如:

var student={name:'Tom', finish_work:true, id:123};

获取方式

name = student.name;

或

name = student['name'];

特殊的对象 - 数组(array)

数组由方括号包围。在括号内部，数据以独立值的形式 value 来定义。数据值之间由逗号分隔。比如课程名的数组:

var courses = [ "Maths", "Chinese", "Biology", "Physics"];

需要注意数组的下标(序号)是从零开始的。

算术运算符

+加号

-减号
/除号
*乘号
%求余
++累加
-- 递减
优先级：++ -- ， * / % ， + -

关于+：

+运算符除了用于代码中数学计算，还可以用于把字符串变量加起来(连接起来)，这时的 + 运算符就不是数学运算中的求和了，而是字符串运算中的拼接作用。

比较运算符

x == y  //等于 (判断x，y的值是否相等)
x === y //等于 (判断x，y的值和类型是否都相同)
x != y  //不等于 (判断x，y的值是否不相等)
x > y   //大于 (判断x是否大于y)
x < y   //小于 (判断x是否小于y)
x >= y  //大于等于 (判断x是否大于或者等于y)
x <= y  //小于等于 (判断x是否小于或者等于y)

当表达式符合判断条件时，返回值是true 不符合判断条件时，返回值是false。

逻辑运算符

逻辑运算符就三种

&&  ||  !

条件运算符

JavaScript中条件判断语句的基本语法:

condition ? expr1 : expr2;

condition实际值为true时，执行expr1。condition实际值为false时，执行expr2。

判断语句

语法：

// 当 condition 的结果是 true 时，statement1 将会被执行。
// 否则，statement2 将会被执行。

if (condition) {
    statement1;    //当 condition 的值为 true 时，statement1 被执行。
} else {
    statement2;    //当 condition 的值为 false 时，statement2 被执行。
}

循环语句

语法 :

//  for循环的语法:结合下面流程图理解(每次循环的执行顺序为:1-2-4-3, 1-2-4-3, ...)

for (1初始化表达式;2条件表达式;3更新表达式)
{
    4循环体函数
}

//  语法拆解

for (变量=初始值;变量<=最终值;变量=变量+步进值)
{
    需要执行的代码块
}

函数

声明
通过函数声明语句来定义一个函数.函数声明语句以关键字 function 开始，其后跟有函数名参数列表和函数体代码块。

function 函数名(参数, 参数, ...){
    代码块
}

调用
在javascript中，代码是自上而下执行的，但函数的声明代码不会被执行，准确的说，函数的声明代码也是被执行了，只不过执行的结果就跟声明变量一样，只是声明而已。只有在调用该函数时才会执行该函数内部的代码。如：

console.log("1");
function write(){    //  声明一个函数(没有参数，且没有返回值)
    console.log("2");
}
console.log("3");
write();            //  调用函数
/*执行结果
console >  1
console >  3
console >  2*/

作用域

所有{}包起来的代码，都可以称之为 “代码块” ，英文名叫Block。

每个代码块都有一个自己的作用域，作用域决定了变量能否被访问（不论读取变量还是修改变量）。

访问的规则大概是这样的：

在最上层没有任何{}包裹的作用域为顶层作用域，声明的变量是哪里都可以访问的

任何一个代码块，{}之间的代码区域称之为它的作用域，每一对大括号括起来的代码块里声明的变量，只能在这个代码块的作用域里访问，不过在js里是不具备这个能力的。这是一个语言缺陷，在新版js（所谓的EcmaScript6，简称es6）中加入了let关键字，使用let关键字声明的变量就会遵守块级作用域的规则了，但是es6目前不是所有浏览器都支持
代码块是有层级的，在一个代码块里写的新的代码块，后者是前者的子作用域
子作用域可以访问父作用域的变量，但是父作用域无法访问子作用域的变量
作用域的父级的父级作用域的变量，该作用域里也可以访问，甚至无穷多级父的作用域里的变量都可以被访问，这种无穷多级的父，被称之为祖先
顶层作用域是所有作用域的祖先

W2

bootstrap：

JavaScript

字符串

日志输出

注释符号

复制声明

简单数据类型

复杂数据类型

特殊的对象 - 数组(array)

算术运算符

比较运算符

逻辑运算符

条件运算符

判断语句

循环语句

函数

作用域

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Week 01 Training: Fundamentals of HTML & CSS