2015.7.15 第七课 课程重点(js、声明变量、数据类型)

1、vs新建步骤

文件——新建项目——web——空白web应用程序——取名、位置、确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目。

点击项目——新建文件夹css和js和image——新建html页面取名demo1

(推荐设置:工具——选项——可以设置下字体和颜色;文本编辑器——把常用的几种语言设上行号颜色提示)

2、什么是js

JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中运行。JavaSript使得网页的交互性更强,更生动和灵活。当在浏览网页时做了某种操作就产生一个事件,JavaScript所编写的程序可对相应的事件做出反应。

3、怎么运用js:

首先在html中指定一个事件,然后对这个事件写js。

如:设置一个按钮,对点击按钮命名一个事件:

<input type="button" value="我是一个按钮" onclick="ShowMsg()" />

4、如何写js:

写js可以在外部js文件写,也可以直接在head里面写:

<script type="text/javascript">
  function ShowMsg()
    {
    alert("这是我的第一个js例子");
    }
</script>

5、命名规范:为了增强代码的可读性,让团队成员都能看懂,遵循命名规范。

(1)js是区分大小写的,非常严格。

(2)js是弱类型,统一用var声明变量,如:

整形: var iNum=10;

浮点: var dNum=2.23;

布尔: var bMaie=false;

函数: var myObject=new myFunction();

数组: var aColor=new Array();

字符串: var sMyString="aaaaa";
……

  *弱类型与强类型:

js是弱类型,只能用var声明;          c#是强类型,用对应类型声明

弱类型:弱化类型的声明方式;        强类型:强调类型的声明方式

弱类型比较方便,但当语句交给浏览器时,浏览器还是需要去判断它是哪种变量,执行效率比强类型低。

(3)注释:

单行注释://

多行注释:/* */

  (4)var可同时声明多个变量:

    var girl="aaaa" , age=19 , male=false;

  (5)js变量不一定需要初始化,可后面用时再赋值:

    var couple;

  (6)变量名称规则:

·首字母必须是字母(大小写均可)、下划线、或者美元符。

·余下的字母可以是下划线、美元符、任意字母或数字字符。

·变量名不能含js关键字。

  (7)局部变量和全局变量:

全局变量:在{}外声明的变量,各函数皆可调用;

局部变量:在{}内声明的变量,只有此函数可用;

(8)命名习惯

整形i: var iNum=10;

浮点f: var fNum=2.23;

布尔b: var bMaie=false;

函数fn: var fnObject=new myFunction();

数组a: var aColor=new Array();

字符串s: var sMyString="aaaaa";

(还有:对象o、正则re,此两项不常用,知道即可)

6、数据类型详解:

(1)字符串String:

var sMyString="hello world";

*补充:位置/索引:第一个字母从0开始算,依次后延,空格也算,如上面的"hello world",位置8的字母是r

【字符串的属性方法总结】

length      获取字符串长度     alert(sString.length);      结果是11

charAt     获取指定位置的字符  alert(sString.charAt(8));     结果是r

substring    字符串的截取     alert(sString.substring(1));   从位置1截取到最后。结果是ello world

                   alert(sString.substring(1,10)); 从位置1截取到位置10(不包含10)。结果是ello worl

substr         字符串的截取         alert(sString.substr(1,6));   从位置1开始截取6位出来。结果是ello w

indexOf       搜某字符位置      alert(sString.indexOf("l"));   查找出第一个l所在的位置,如没有则返回-1。结果是2

                   alert(sString.indexOf("l",4));    从位置4开始,查找出接下来的l所在的位置。结果是2

lastindexOf  从后往前搜某字符位置   与indexOf雷同

(2)布尔类型bool:(即真或假,true 或 false)

Var bMale=true;      声明 bMale 为真;

If(bMale){           如果 bMale 为真,

alert("a");           则输出a;
}

else{           否则,

alert("b");        则输出b。

}

所以以上程序输出a

  (3)数值、及类型转换:

    a)数值与字符串相加:

var iNum1=10;

var sNum2="20";

var sNum3=iNum1+sNum2;

alert(sNum3);

可把iNum1变成字符串:

var sNum3=iNum1.toString()+sNum2;

alert(sNum3);

也可把sNum2转成数值:

var iNum2=iNum1+parseInt(sNum2);

alert(iNum2);

    b)与浮点字符串相加:

var iNum1=10;

var sNum2="20.123";

var sNum3=iNum1+sNum2;

alert(sNum3);

当数值和字符串相加时,把sNum2变成整数:

var iNum2=iNum1+parseInt(sNum2);

alert(iNum2);

也可把sNum2变成浮点数:

var iNum2=iNum1+parseFloat(sNum2);

alert(iNum2);

    c)类型转换:

数值转字符串:var sNum1=iNum1.toString();

字符串转数值:var iNum2=parseInt(sNum2);

转浮点:var iNum2=parseFloat(sNum2);

字符串变成数组:var aDate=sMyString.split("-");(var sMyString="2015-07-15";)

  (4)数组:存放一个数据集合

a)声明数组的方式:

1、确定数组长度:var aTeam=new Array(12); 数组长度为12

2、不确定数组长度:

var aColor=new Array();

aColor[0]="blue";

aColor[1]="yellow";

aColor[2]="green";

aColor[3]="black";

*上述数组也可写成:

var aColor=new Array("blue","yellow","green","black");

此时输出:alert(aColor[3]);

则得到:black

b)toString,数组变成字符串:

alert(aColor.toString());

此时输出:blue,yellow,green,black

c)join,改连接符:

alert(aColor.join("-").toString());

此时输出:blue-yellow-green-black

d)split,把字符串变成数组:

var sMyString="2015-07-15";

var aDate=sMyString.split("-");

alert(aDate[2]);

此时输出为:15

e)reverse,使数组元素反序出现:

var aColor=new Array("blue","yellow","green","black");

alert(aColor.reverse().toString());

此时输出为:black,green,yellow,blue

f)sort,使数组元素根据a-z顺序排序:

var aColor=new Array("blue","yellow","green","black");

alert(aColor.sort().toString());

此时输出为:black,blue,green,yellow

时间: 2024-10-08 10:23:32

2015.7.15 第七课 课程重点(js、声明变量、数据类型)的相关文章

第七课 课程重点(js、声明变量、数据类型)

1.vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 2.什么是js JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中

2015.7.8 第三课 课程重点(css样式)

[课前提问及答案] 1.table有哪些属性:width.height.border.cellspacing.cellpadding.bordercolor.bgcolor.align  宽 高 边框 内框宽度  文字到边框距离 边框颜色 背景色 水平位置 2.body有哪些属性:bgcolor.background.text 背景颜色 背景图片 文字颜色 ----------------------------------------------------------------------

2015.7.20 第十课 课程重点(jq选择器:id、类、标签、特殊、属性、包含、位置、过滤)

1.在VS中新建jq项目: 新建web窗体时选择第二个: 将系统生成的多余文件夹删掉,仅留下Scripts和Web.config: 将Scripts文件夹改名为我们熟悉的js(也可以不改,仅推荐改),并新建文件夹css和image,并在对应位置添加页面,html.css.js 将上图鼠标所指的.min.js文件拖动到html中,将自己新建的js文件拖动到它下方,如图: *两者上下位置关系千万别弄饭了,min.js一定要在最上面. 将Script文件夹中的第一个js文件(_references.j

2015.7.17 第八课 课程重点(js语句:条件、循环)

1.条件语句: (1)比较操作符: ==:判断是否相等 !=:判断是否不相等 > :判断是否大于 >=:判断是否大于等于 < :判断是否小于 <=:判断是否小于等于 [例1] if(iNum1==iNum2) //如果iNum1与iNum2相等 { iNum3=iNum1; //将iNum1的值赋给iNum3 } else{  //否则 iNum3=iNum2;  //将iNum2的值赋给iNum3 } [补充]以上也可写作: iNum3 = iNum1==iNum2 ? iNum

2015.7.14 第六课 课程重点(仿站及常见代码用法)

1.网站常见小图标调用方式: 将所有小图标做在一张大图上a.png,然后根据横纵轴来调用. background:url("a.png") -23px -70px no-repeat; 2.块级元素居中的常见写法: margin:0px auto; 3.如何让超链接影响到整个块? 将行内元素变成块级元素:display:block 4.文本框只留下面一条线: { border-width:0px;  border-bottom:solid 1px #000; } 5.仿站: 用所学知识

2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

2015.7.13 第五课 课程重点(z-index、overflow、浏览器兼容性)

1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条) 3.浏览器兼容性问题: (1)兼容性问题:不同的浏览器基于不同的内核,对一些前端代码支持不一样,导致显示效果不一样 (2)测试的各大浏览器:IE7-IE11(可使用IETester,不考虑IE6).Opera.Safari.Chrome.Firefox (3)关于兼容性非常好的介绍文章:http

2015.7.9 第四课 课程重点(浮动、盒子模型、绝对/相对定位)

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动

2015.7.8 第三课 课程重点

1.css选择器:相当于一个标识,有3种选择器 第一种选择器:标签选择器 p{ color:red;} 第二种选择器:class选择器 .c1{ color:green;} 可被多次调用 第三种选择器:id选择器 #d1{ color:blue;} 独有 优先级:标签<class<id 注意:一个标签可以有多个class,但是只能有一个id 2.css文字效果: 字体:font-family 字号:font-size 颜色:color 粗体:font-weight 下划线:text-decor