W2

Bootstrap布局的使用

bootstrap十分使用,用bootstrap所提供的class类,能够极大程度上简化布局。

Bootstrap的引入

 <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

引入bootstrap


引入bootstrap.PNG

在布局中主要使用的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>

完成效果

窗口一:

bootstrap1.PNG
bootstrap2.PNG

bootstrap特性展示

在不同大小的页面上显示的比例不同
在小界面上的显示

bootstrap3.PNG

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初级教程学习完成

cfd初级.PNG

Javasctript中级学习笔记

变量的作用是给一个数据值标注名称.像下面这样就是在为数值 5 标注了一个名称 num1. 注:JavaScript中变量名,函数名,参数名的命名规范:至少由字母,下划线,美元符号,数字其中的一种组成,但不能以数字开头.如:a , data , num1 , time , $name , geta_num
var num1 = 5;
JavaScript 变量与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 xy),也可以使用描述性更好的名称(比如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这两种方法,从这个角度来看,函数其实也是一种对象。 我们可能会说,函数是一种对象?那函数上也可以自定义属性吗?实际上真的可以。这种手法常被用来定义所谓的类成员。

调用函数的applycall方法,就相当于调用该函数.不考虑函数内的this引用的话,这和类似于say()这样的普通调用方式是一样的。 而applycall的功能是,通过传参的方式,强制函数内的this指定某一对象。this引用的会被指向apply/call的第一个参数。
apply&call
而apply和call的功能是,通过传参的方式,强制函数内的this指定某一对象。this引用的会被指向apply/call的第一个参数。
函数实际上相当于一个对象,而apply和call则能强制的使函数内部的this指针指向某一个对象。
applycall之间的不同之处在于两者对其他参数的传递方式
//使用方法

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中级学习完成

cfb中级.PNG

推荐阅读更多精彩内容

  • 介绍 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是...
    安_6dd1阅读 575评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,901评论 17 134
  • 1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...
    Yuann阅读 408评论 0 1
  • 远程登录另一台机器 SSH 原理与运用 用密码登录ssh user@host 密码:user(如ssh stude...
    马建阳阅读 105评论 0 0
  • 文/失意の栖居 谁在为“我”哭泣? 自“鼠”失去、喜喜(有漂亮耳朵的女友)离开之后,长达半年之久,“我”隔绝了与外...
    失意的栖居阅读 476评论 0 0