JavaScript使用
1.javascript的注释:
单行 //
多行 /* */
2.css的注释:
css 多行注释 /* */
3.html的注释:
<!--注释 -->
4.常用的函数:
alert("提示框");
document.write("向浏览器输出内容");
5.javascript的使用方法:
(1)内部javacript:
在html页面中使用<script>
标签,在<script>
标签体中写js内容;
弊端:和html代码混杂在一起,不好维护,不好重用。
(2)外部javascript(推荐使用):
优点:可以将html代码和js代码分离,管理起来更加方便。
注意: 不能使用<script src="01.js"/>
空标签方式导入。即:不能使用自闭合的script标签导入js文件。
变量和数据类型
1.定义和赋值变量: var 变量名=值;
var a = 10;
//var a = 20;
var b = 3.14;
var c = 'c';
var d = "hello";
var e = true;
var f = new Object();
注意:
1)使用var关键词定义变量,var可以省略的,但是不建议省略var;
2) 在js中可以重复定义变量,后面定义的变量会覆盖前面的变量;
3) js是弱类型语言,使用var来定义任何数据类型;
4)js中变量的类型是由变量的值决定的,所以只定义不赋值的变量,就是一个未赋值变量(undefined),未赋值的变量不能使用。
typeof(变量)
: 查看变量的数据类型
2.js的数据类型分类:
1)number: 无论整数还是小数,都是number类型;
2) string:无论字符还是字符串,都是string类型;
3) boolean
4) object :对象类型。
3.类型转换函数:
string->number(整数) : parserInt(变量)
string->number(小数):parserFloat(变量)
4.运算符:
1)算术运算符: + - * / %
2)比较运算符: > < >= <= ==
3)逻辑运算符: && || !
4)三目运算符: 表达式 ? true的结果 : false的结果
流程控制语句
1.if语句:
if(表达式){
语句
}else{
语句
}
条件可以是:
布尔值:true:成立 ; false:不成立
number:非0:成立; 0: 不成立
string:非空字符串: 成立 ; 空字符串:不成立
object:非null: 成立; null:不成立
2.swtich语句:
swtich(变量){
case 选项1:
语句;
break; 如果不break,就会继续下面选项的语句
case 选项2::
语句;
break;
default:
默认;
}
case的条件:
1)可以是常量:string,number
2)可以是变量(java不能)
3)可以是表达式 (java不能)
例1:
var i = "b";
var b = "b";
switch(i){
case "a":
document.write("你选择了a");
break;
case b:
document.write("你选择了b");
break;
case "c":
document.write("你选择了c");
break;
case "d":
document.write("你选择了d");
break;
default:
document.write("你选择了其他");
break;
}
例2:
var age = 20;
switch(true){
case age>=18:
document.write("他是成年人");
break;
case age<18:
document.write("他是未成年人");
break;
}
3.for语句:
for(初始化语句;条件判断语句;流程控制语句){
循环体语句
}
需求:对1-100进行求和。
var result = 0;
for(var i=1;i<=100;i++){
result+=i;
}
document.write("结果为:"+result);
4.while语句:
初始化语句
while(条件判断语句){
循环体语句;
条件控制语句;
}
需求:在页面上打印十次helloworld。
var i = 1;
while(i<=5){
document.write("helloworld<br/>");
i++;
}
5.do-while语句:
初始化语句;
do{
循环体语句;
条件控制语句;
}while(判断条件语句)
6.with语句:方便函数的调用。
with(对象){
直接写对象的方法,无需写对象的名称
}
需求:在页面上打印十次helloworld。
with(document){
var i = 0;
do{
write("helloword");
write("<br>");
i++;
}while(i<10);
}
函数
1.函数定义:
function 函数名称(形式参数列表){
语句
}
2.调用函数:
函数名称(实际参数列表);
注意:
1)js的函数使用function定义,但是形式参数列表不能使用var关键词;
2)js的函数可以有返回值,直接使用return关键词返回即可,不需要声明返回值类型
3) js没有方法重载的概念,后面定义的函数会覆盖前面的函数;
4)js中的形式参数和实际参数的数量可以不一致,依然可以调用;
5)js的每个函数中都隐藏了一个叫arguments的数组,这个数组用于接收函数调用时传递过来的实际参数值;
6)arguments数组接收完实际参数后,会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数,则丢失剩下的实际参数。
注意:
实际参数<形式参数: NaN
实际参数>形式参数: 取前面的实际参数,后面的参数丢失
需求:定义一个函数,输入月份,可以查询到该月份的天数。
1,3,5,7,8,10,12 大月 31天
4,6,9,11 小月 30天
2 小小月 28天
<script type="text/javascript">
//当按钮的单击事件被触发以后需要执行的操作
function checkMonth(){
//获取单行输入域内的用户输入的月份值
var month = document.getElementById("month").value;
//使用if语句做判断,给出相应的提示
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
alert("该月有31天");
}else if(month==4||month==6||month==9||month==11){
alert("该月有30天");
}else if(month==2){
alert("该月有28天");
}else{
alert("没有这个月份");
}
}
</script>
<body>
请输入你需要查询的月份:<input type="text" id="month"/>
<!--在这里需要给button标签添加一个单击事件-->
<input type="button" value="查询天数" onclick="checkMonth()" />
</body>
基于对象编程
内置对象:
1.String对象:
方式一:定义String对象
var str1 = new String("hello");
var str2 = new String("hello");
document.write("结果:"+(str1==str2)+"<br/>");
valueOf():该方法返回对象的内容
document.write("结果:"+(str1.valueOf()==str2.valueOf()));
方式二:
var str1 = "hello";
var str2 = "hello";
document.write("结果:"+(str1==str2)+"<br/>");
常用方法:
1) charAt(索引): 返回指定索引的内容
2) indexOf(字符串): 返回首次出现指定字符的索引位置
3)lastIndexOf(字符串):返回最后出现指定字符的索引位置
4)fontcolor(“red”): 直接给字符串添加颜色
5)split(“字符串”):使用指定字符串切割字符串,返回字符串数组
6)substring(start,end); 截取字符串,start:开始索引, end:结束索引
7)substr(strat,[length]) 截取字符串, start:开始索引 length: 截取的字符串长度
2.Number对象:
方式一:定义Number对象
var num1 = new Number(20);
var num2 = new Number(20);
方式二:
var num1 = 20;
var num2 = 20;
document.write((num1==num2)+"<br/>");
document.write(num1.valueOf()==num2.valueOf());
3.Boolean对象:
var b1 = new Boolean(true);
var b2 = new Boolean(true);
document.write((b1==b2)+"<br/>");
document.write(b1.valueOf()==b2.valueOf());
4.Math对象:
常用的方法:
1)ceil():向上取整。 如果有小数部分的话,直接+1 。
2)floor():向下取整。如果有小数部分的话,直接丢失小数部分,保留整数位 。
3) round():四舍五入取整。满5进一 。
4)random():生成一个随机的0-1的小数 .包含0,不包含1 。
5)max():返回最大值。
6)min():返回最小值。
例如:
var num = 3.50;
document.write(Math.ceil(num)+"<br/>");
document.write(Math.floor(num)+"<br/>");
document.write(Math.round(num)+"<br/>");
document.write(Math.round(Math.random()*100)+"<br/>");
document.write(Math.max(10,6,54,23,76)+"<br/>");
document.write(Math.min(10,6,54,23,76)+"<br/>");
5.Date对象:
(1)创建日期:
var date = new Date();
//document.write(date); //默认格式
(2)年份:
document.write(date.getFullYear()+"年");
(3)月:
document.write((date.getMonth()+1)+"月");
(4)日:
document.write(date.getDate()+"日");
(5)星期:
document.write("星期"+date.getDay()+" ");
(6)时:
document.write(date.getHours()+"时");
(7)分:
document.write(date.getMinutes()+"分");
(8)秒:
document.write(date.getSeconds()+"秒");
输出结果:2015年06月01日 15时12分30秒
需求:网页时钟。
<body>
当前的日期为:<span id="dateTip"></span>
</body>
<script type="text/javascript">
function genNewDate(){
//生成一个系统的当前时间,格式:2015-06-01 15:22:30
var date = new Date();
//当前日期时间的字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
//把日期字符串放到span中
//得到span对象
var dateTip = document.getElementById("dateTip"); //读到了没有加载的标签,无法读取的
//设置span的innerHTMl属性给span赋值
dateTip.innerHTML=dateStr;
}
//设置定时器,每个多少毫秒调用1次任务(函数)
window.setInterval("genNewDate()",1000);
</script>
6.Array数组对象 :
方式一:创建数组
(1)指定数组长度:
var arr = new Array(3);
(2)不指定数组长度、默认0个元素:
var arr = new Array();
(3)指定具体内容:
var arr = new Array(10,"hello",true);
方式二: 不需要new,直接指定内容
var arr = [10,"java",false];
注意:
1)数组的长度会随着元素的添加而变化,不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。
常用的方法:
join(字符串): 使用指定的字符串,把数组的所有元素连接在一起,最终组成一个新的字符串
reverse(): 反转数组中的元素
常用的属性:
length 数组的长度
遍历数组:除了普通for循环还有for-in语句。
for(var 遍历 in 数组){
}
例如:
<script>
var arr = [10,20,30,40];
for(var i in arr){
document.write(arr[i]);
document.write("<br>");
}
</script>