Bootstrap布局的使用
bootstrap十分使用，用bootstrap所提供的class类，能够极大程度上简化布局。
Bootstrap的引入
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
引入bootstrap
在布局中主要使用的bootstrap布局：
1.容器container
<div class="container">
2.栅格系统
在本次布局中使用的栅格系统
<div class="col-xs-4"><b>考试科目：统一建模语言</b></div>
<div class="col-xs-4"><b>时间：100分钟</b></div>
<div class="col-xs-4"><b>得分：</b></div>
<div class="container" class="row" >
3.面板
<div class="panel panel-default">
<div class="panel-heading">...</div>
<div class="panel-body">
</div>
</div>
4.按钮
<button type="button" class="btn btn-primary btn-lg active">计算分数</button>
5.文字排版
<strong><big>四·判断题（每题10分，共20分）</strong></big>
<b>2.类图由以下哪三部分组成：</b><br/>
<div class="text-center"></div>
6.图标插入
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-remove"></span>
主要代码如下：
<!DOCTYPE html>
<html>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body style="border:1px red solid">
</head>
<div class="container">
<div class="text-center">
<h1 >统一建模语言理论测试</h1>
</div>
<div class="container" class="row" >
<div class="panel panel-default">
<div class="panel-body">
<div class="col-xs-4"><b>考试科目：统一建模语言</b></div>
<div class="col-xs-4"><b>时间：100分钟</b></div>
<div class="col-xs-4"><b>得分：</b></div>
</div>
</div>
</div>
<form>
<div class="container" class="row" >
<div class="panel panel-default">
<div class="panel-body">
<div class="col-xs-4"><strong>班级（必填）:</strong><input type="text" name="class"></div>
<div class="col-xs-4"><strong>学号（必填）:</strong><input type="text" name="number"></div>
<div class="col-xs-4"><strong>姓名（必填）:</strong><input type="text" name="name"></div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<strong><big>一·填空题（每空5分，共20分）</strong></big>
</div>
<div class="panel-body">
<div class="container">
<b>1.UML的中文全称是：</b></br><input type="text" name="T1">
</div>
<div class="container">
<b>2.对象最突出的特征是：</b><br/>
<input type="text" name="T2-1"><input type="text" name="T2-2"><input type="text" name="T2-3">
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<strong><big>二·选择题（每题10分，共20分）</strong></big>
</div>
<div class="panel-body">
<div class="container">
<b>1.UML与软件工程的关系是：</b><br/>
<input type="radio" name="X1" value="X1A" >
(A)UML就是软件工程<br/>
<input type="radio" name="X1" value="X1B" >
(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
<input type="radio" name="X1" value="X1C" >
(C)UML与软件工程无关<br/>
<input type="radio" name="X1" value="X1D" >
(D)UML是软件工程的一部分<br/>
</div>
<div class="container">
<b>2.Java语言支持：</b><br/>
<input type="radio" name="X2" value="X2A" >
(A)单继承<br/>
<input type="radio" name="X2" value="X2B" >
(B)多继承<br/>
<input type="radio" name="X2" value="X2C" >
(C)单继承和多继承都支持<br/>
<input type="radio" name="X2" value="X2D" >
(D)单继承和多继承都不支持
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<strong><big>三·多项选择题（每题10分，共20分）</strong></big>
</div>
<div class="panel-body">
<b>1.用例的粒度分为以下哪三种：</b><br/>
<input type="checkbox" name="DU1" value="DU1A">
(A)概述级<br/>
<input type="checkbox" name="DU1" value="DU1B">
(B)需求级<br/>
<input type="checkbox" name="DU1" value="DU1C">
(C)用户目标级<br/>
<input type="checkbox" name="DU1" value="DU1D">
(D)子功能级<br/>
<b>2.类图由以下哪三部分组成：</b><br/>
<input type="checkbox" name="DU2" value="DU2A">
(A)名称(Name)<br/>
<input type="checkbox" name="DU2" value="DU2B">
(B)属性(Atribute)<br/>
<input type="checkbox" name="DU2" value="DU2C">
(C)操作(Operation)<br/>
<input type="checkbox" name="DU2" value="DU2D">
(D)方法(Function)
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<strong><big>四·判断题（每题10分，共20分）</strong></big>
</div>
<div calss="panel-body">
<div><strong>1.用例图只是用于和客户交流和沟通的，用于确定需求。</strong>
<input type="radio" name="P1" value="P1T"><span class="glyphicon glyphicon-ok"></span>
<input type="radio" name="P1" value="P1F"><span class="glyphicon glyphicon-remove"></span>
</div>
<div><strong>2.在状态图中，终止状态在一个状态图中允许有任意多个。</strong>
<input type="radio" name="P2" value="P2T"><span class="glyphicon glyphicon-ok"></span>
<input type="radio" name="P2" value="P2F"><span class="glyphicon glyphicon-remove"></span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<strong><big>五·简答题（每题20分，共20分）</strong></big>
</div>
<div class="panel-body">
<div class="row" >
<strong>1.简述什么是模型以及模型的表现形式：</strong>
</div>
<br/>
<textarea name="J" rows="5" class="form-control"></textarea>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary btn-lg active">计算分数</button>
</div>
</form>
<hr/>
</div>
</body>
</html>
完成效果
窗口一：
bootstrap特性展示
在不同大小的页面上显示的比例不同
在小界面上的显示
javasctript入门学习过程
Hello world!的书写
字符串的格式：
"Hello World"
'世界，你好'
'Hello World,1946'
被引号包围，且引号内有文本内容
赋值过程：
var data = 123;//赋值数字
var data = 'hello world!';//赋值字符串
数据类型
js 没有专门的数据类型的名字，只有一个var
[1] undefined : 这个值表示变量不含有值。
[2] null : 这个值表示变量为空。
[3] boolean : true 或 false 代表布尔值。
var data = true;
[4] number : javascript 只有一种数字类型。
没有分整型和浮点型两种
对象：
javascript中的复杂数据类型只有一种，即 对象(object)。
{} 花括号，用来定义一个对象；
var student = {
name :'Tom',
finish_work :true,
id :123
};
对象属性值有两种获取方式:
name = student.name;
或
name = student['name'];
js与c++的一个很大的区别：数据最开始是没有类型的，只有在赋值之后才能确定其数据类型。
js与C++不同的另一个方面：
x=y/2; //即x=5/2，结果{x:2.5, y:5}。
x=y%2; //即x=5%2，结果{x:1, y:5}。结果是x=5/2整数求商时的余数1。
上面七种运算符的优先级依次递减是: ++ -- ， * / % ， + -
我们从前两节的学习中接触到: + 运算符除了用于代码中数学计算，还可以用于把字符串变量加起来(连接起来)。 就像:
var data = "Hello " + "world !";
在实际的运行中，javascript会在处理不同类型的数据时，自动进行类型的统一转换，上面代码的运行结果就是字符串: "Tom的学号是 : 100705101"
所以
var message = "Tom的学号是 : " + 100705101;
和
var message = "Tom的学号是 : " + "100705101";
中，message的值都是字符串 "Tom的学号是 : 100705101"！！
与C++又一个不同的地方
`x == y //等于 (判断x，y的值是否相等)`
`x === y//等于 (判断x，y的值和类型是否都相同)`
4 == "4" //值为 true
4==="4"//值为 false
4===4//值为 true
if (condition1) { statement1; }
elseif(condition2) { statement2; }
else{ statement3; }
如果是if语句可以有多个输出//具体不好说，但是与C++不同
for (变量=初始值;变量<=最终值;变量=变量+步进值)
{ 需要执行的代码块 }
for (var i=0; i<10; i++)
{ console.log( i ) }
console.log("1");
function write(){// 声明一个函数(没有参数，且没有返回值)
console.log("2");
}
console.log("3");
write();// 调用函数
//无返回值function add(a,b){ var result = a+b; }
var sum = add(1,2); //sum的值为undefined
所有{}包起来的代码，都可以称之为 “代码块” ， 英文名叫Block
[1] 在最上层没有任何{}包裹的作用域为顶层作用域，声明的变量是哪里都可以访问的，
[2] 任何一个代码块，{}之间的代码区域称之为它的作用域，每一对大括号括起来的代码块里声明的变量，只能在这个代码块的作用域里访问，不过在js里是不具备这个能力的。
加入了let关键字，使用let关键字声明的变量就会遵守块级作用域的规则了。
[3] 代码块是有层级的，在一个代码块里写的新的代码块，后者是前者的子作用域
[4] 子作用域可以访问父作用域的变量，但是父作用域无法访问子作用域的变量
[5] 作用域的父级的父级作用域的变量，该作用域里也可以访问，甚至无穷多级父的作用域里的变量都可以被访问，这种无穷多级的父，被称之为祖先
[6] 顶层作用域是所有作用域的祖先
codefordream初级教程学习完成
Javasctript中级学习笔记
变量的作用是给一个数据值标注名称.像下面这样就是在为数值 5 标注了一个名称 num1. 注:JavaScript中变量名,函数名,参数名的命名规范:至少由字母,下划线,美元符号,数字其中的一种组成,但不能以数字开头.如:a , data , num1 , time , $name , geta_num等
var num1 = 5;
JavaScript 变量与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如age, sum, totalvolume）。
* 变量必须以字母开头
* 变量也能用$ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量
可以认为变量就是箱子,var num1 就是制造了一个叫做 num1 的箱子,而 num1=5 则是给这个箱子装进一个值为 5 的数据.从此之后,箱子 num1 内就有了一个实际的值 5.
变量如果仅仅被定义,而没有被赋值,则该变量的默认值为 undefined (表示没有值,是一个'空'的箱子,只是'空'以undefined来表示).
JavaScript代码的执行顺序是按照由上到下,由左到右的顺序依次解释执行的.(不同于编译执行，解释执行的代码不需要在执行前进行预处理，可以直接执行）
那是因为真正运行时在JavaScript代码中变量的定义语句(不包括赋值语句)会被提前到所有代码之前执行.所以这段代码运行时的效果和上一页代码是等价的.所以不会造成由于变量未定义而出错的结果.
但是希望大家不要使用这个特性，并不是所有的语言特性都值得使用。
前面说过,数据类型只有六种，不包括函数。 这是因为函数并不是一种数据，他是一种过程。我们编程只处理这两种东西。 但是在js里，数据与过程是不严格区分的。
对象 = { 属性名 : 属性值, 属性名 : 属性值, ┅ ┅ }
其中,属性名可以是标识符,字符串,或是数值.属性值可以是任意的数据值,对象或者函数.
具体例子如:
{ x: 2, y: 1 } //属性名是标示符，只有JSON里可以使用，等价于字符串
{ "x": 2, "y": 1 } //属性名是字符串
{ 'x': 2, 'y': 1 } //属性名是字符串
{ 2: 1, 1: 2} //属性名是数值
{ x: 2, status: true, info: { name: "Tom", age: 23, student: false} } //属性值包含对象
{ x: 2, say_hello: function(){ console.log( "Hello!" ) } } //属性值包含函数//像上面这种没有函数名的函数叫做"匿名函数"
用new创建的对象，需要一个模板，就像工业铸造的模具一样。每new一次，便铸造了一个新的实例。 这个对象模板被称之为 类。这个new的过程叫做实例化。
var robot = new Object(); //生成一个实例对象robot
robot.name ="Cat";//定义实例对象robot的name属性,并赋值
robot.age =1;
robot.info = {height:120, weight:40} robot.say_hello = function()
{ console.log("Hello!") };
对象的示例：
var player = { code : 2, name : 'Tom',
status :'active', score : [7,5,9,7],
get_average:function(){varscore =this.score;
//注:this代指player对象本身(可以认为this的实际值就是player对象,具体用法将在下一节内容介绍)
varlength = score.length;
vartotle =0;
for(vari=0;i<length;i++){
totle += score[i];
}
returntotle/length;
}
}
console.log( player.get_average() );
var score = this.score;
//注:this代指player对象本身
(可以认为this的实际值就是player对象,具体用法将在下一节内容介绍)
var robot = {
x : 2,
say_hello : function(){ console.log( "Hello!" ); }
};
robot["say_hello"](); //等价于 robot.say_hello();
var player = {
code : 2,
name : 'Tom',
status : 'active',
score : [
7,
5,
9,
7
],
get_average:function(){
var score = this.score;
//注:this代指player对象本身(可以认为this的实际值就是player对象,具体用法将在下一节内容介绍)
var length = score.length;
var totle = 0;
for(var i=0;i<length;i++){
totle += score[i];
}
return totle/length;
}
}
console.log( player.get_average() );
this指针
在javascript的函数中，除了函数声明时定义的形参之外，每个函数还可以接收另一个隐藏的参数：this，又称this引用。
this的值（即它的指向）取决于调用的方式。在javascript中this指向大致有四种情况：
1.无任何前缀的函数调用时，this指向顶层对象或者叫全局对象，浏览器里是window（nodejs里是global）。
function fn(){
console.log(this);
}
fn(); //打印结果为window{...}
2.方法调用的时候，this指向方法所在的对象
var robot = {
name:"cup",
say:function(){
console.log(this.name)
}
};
robot.say(); //打印结果为'cup'
3.构造函数里，this指向新生成的实例
function Robot(name){
this.name = name;
this.say = function(){
console.log(this.name)
}
}
var robot_1 = new Robot('bower');
robot_1.say() // 打印结果为'bower'
var robot_2 = new Robot('cup');
robot_2.say() // 打印结果为'cup'
4.apply/call调用的时候，this指向apply/call方法中的第一个参数
var robot_1 = {name:'cup'}
var robot_2 = {name:'bower'}
function say(){
console.log(this.name)
}
say.call(robot_1) // 打印结果为'cup'
say.call(robot_2) // 打印结果为'bower'
apply/call调用的时候，this指向apply/call方法中的第一个参数
所有的函数都默认包含apply和call这两种方法，从这个角度来看，函数其实也是一种对象。 我们可能会说，函数是一种对象？那函数上也可以自定义属性吗？实际上真的可以。这种手法常被用来定义所谓的类成员。
调用函数的apply或call方法,就相当于调用该函数.不考虑函数内的this引用的话,这和类似于say()这样的普通调用方式是一样的。 而apply和call的功能是，通过传参的方式，强制函数内的this指定某一对象。this引用的会被指向apply/call的第一个参数。
apply&call
而apply和call的功能是，通过传参的方式，强制函数内的this指定某一对象。this引用的会被指向apply/call的第一个参数。
函数实际上相当于一个对象，而apply和call则能强制的使函数内部的this指针指向某一个对象。
apply与call之间的不同之处在于两者对其他参数的传递方式
//使用方法
say.apply(robot) // 打印结果为cup//通过apply调用函数say。函数内的this引用引用了对象robot。
say.call(robot)// 打印结果为cup//通过call调用函数say。函数内的this引用引用了对象robot。
robot_1.say.apply(robot_2) // 打印结果为bower//通过apply调用robot_1.say方法。
方法内的this引用引用了robot_2
robot_1.say.call(robot_2)// 打印结果为bower//通过call调用robot_1.say方法。
方法内的this引用引用了robot_2
类和构造函数
一个典型的定义类的方法
function Car(x,y){
this.x = x;
this.y = y;
this.run = function(x_increase, y_increase){
this.x += x_increase;
this.y += y_increase;
}
this.show = function(){
console.log("( " + this.x + "," + this.y + " )");
}
}
大多数面向对象语言，都有new关键字。他们大多和一个构造函数一起使用，能够实例化一个类。JavaScript的new关键字是异曲同工的。
也就是说，只有在查询时原型链才会起作用。赋值只针对自有属性.
在给对象robot的age属性赋值时，如果robot自有属性中已经有一个属性age，则改变age的值，若robot中不存在自有属性age,只存在继承属性age或者所有属性中都没有age属性，则为robot创建一个自有属性age并为其赋值.
var Robot = function(name)
{//声明一个构造函数
this.name = name;
this.say = function(){ console.log(this.name) } };
varinfo = { age:12, gender:"boy"};
Robot.prototype = info;
varrobot =newRobot("bower");
console.log(robot);
//打印结果为Robot {name: "bower", say: function, age: 12, gender: "boy"}
console.log('age'inrobot);//打印结果为true
console.log(robot.hasOwnProperty('age'));//打印结果为false
robot.name ="cup";
robot.age =13;//创建自有属性age但是在打印的时候还是用继承属性
console.log(robot);
//打印结果为Robot {name: "bower", say: function, age: 12, gender: "boy"}
console.log('age'inrobot);//打印结果为true
console.log(robot.hasOwnProperty('age'));//打印结果为true
关于js中的函数，的一两点说明。
1.js中函数是一种特殊的数据，甚至在js中var data=function();这样的代码完全没有任何问题。
2.js中，函数的type类型为，function。
3.js中，函数可以作为一个参数去使用，可以传递给数据域内部的变量。
一个经典的例子：
var function_1=function(callback){
console.log("do something.");
(callback &&typeof(callback) ==="function") && callback();
}//先判断参数是否为函数，若是，再调用函数。
varfunction_2=function()
{console.log("function_2 is running.")};
function_1(function_2);
//回调函数的使用，函数并不是看成一段代码，而是看成一段数据。
回调函数运行的过程。
在回调的过程中只是传递了函数名。并不是传递了整个函数。
codefordreamjavascript中级学习完成
