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"http://值為 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中級學習完成
