JAVA-25.1-js基础篇、基本语法、常用内置对象讲解
来源:互联网 发布:淘宝如何取消店铺 编辑:程序博客网 时间:2024/05/22 01:54
一、Javascript入门
1.1 引入
html:负责网页结构
css: 负责网页美观
javascript:负责用户与浏览器交互。
1.2 javacript的来由
1994时,网景公司研发了livescript语言,领航者浏览器(把livescript语言植入到浏览器)
微软公司的IE浏览器,后来自己花钱20亿美金研发jscript
1995年,Sun公司,推出jdk1.1 .谈合作。livescript-》javascript
1998,美国在线收购网景。
2003,直接关闭网景。网景6-7亿美金。2千万美金,组建谋智基金(火狐)
javascript 与jscript 语法不同。 ECMA(欧洲制造商联盟)
scirpt的语法:
1)基础语法(ECMA规范)
2)BOM编程(没有统一)
3)DOM编程(没有统一)
注意:javascript与java并没有直接联系。
二、 javascript(简称js)基础篇
首先,应该注意一点:html代码是从上往下依次加载的,所以为了保证代码的安全性以及达到预期的正常使用功能,我们最好将<script>
标签放在<body>
标签下边,尤其是牵涉到函数调用的时候。当然有时放在前面也无所谓。
2.1 javascript使用
①javascript的注释:单行 // 多行 /* */
css的注释:css 多行注释 /* */
html的注释:
②常用的函数:
alert(“提示框”);
document.write(“向浏览器输出内容”);
③javascript的使用方法:
1)内部javacript:
a)在html页面中使用<script>
标签,在<script>
标签体中写js内容
b)弊端:和html代码混杂在一起,不好维护,不好重用
2)外部javascript(推荐使用)
注意: 不能使用<script src="01.js"/>
导入,<script>
标签是非自闭和标签。
2.2 变量和数据类型
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的数据类型分类:
a)number: 无论整数还是小数,都是number类型
b) string: 无论字符还是字符串,都是string类型
c) boolean
d) object 对象类型
2.3 类型转换函数
string->number(整数) : parserInt(变量)
string->number(小数): parserFloat(变量)
2.4 运算符
1)算术运算符: + - * / %
2)比较运算符: > < >= <= ==
3)逻辑运算符: && || !
4)三目运算符: 表达式 ? true的结果 : false的结果
2.5 流程控制语句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript"> /* ①if语句 if(表达式){ 语句 }else{ 语句 } 条件可以是: 布尔值:true:成立 ; false:不成立 number:非0:成立; 0: 不成立 string: 非空字符串: 成立 ; 空字符串: 不成立 object: 非null: 成立; null:不成立 */ /* if(null){ alert("条件成立"); }else{ alert("条件不成立"); } */ /* ②swtich语句 swtich(变量){ case 选项1: 语句; break; 如果不break,就会继续下面选项的语句 case 选项2:: 语句; break; default: 默认; } 注意: case的条件: 1)可以是常量. string,number 2)可以是变量。(java是不能是变量) 3)可以是表达式 (java不能这样) */ /* 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; } */ /* var age = 20; switch(true){ case age>=18: document.write("他是成年人"); break; case age<18: document.write("他是未成年人"); break; } */ /* ③for语句: for(初始化语句;条件判断语句;流程控制语句){ 循环体语句 } 需求:对1-100进行求和 */ /* var result = 0; for(var i=1;i<=100;i++){ result+=i; } document.write("结果为:"+result); */ /* ④while语句 初始化语句 while(条件判断语句){ 循环体语句; 条件控制语句; } 执行流程: 需求:在页面上打印十次helloworld; */ /* var i = 1; while(i<=5){ document.write("helloworld<br/>"); i++; } */ /* ⑤do-while语句 初始化语句; do{ 循环体语句; 条件控制语句; }while(判断条件语句) */</script></head><body></body></html>
补充:
with语句:方便函数的调用(以上练习题网页拿过来直接讲解)
with(对象){
直接写对象的方法,无需写对象的名称
}
<script type="text/javascript">/* with语句:方便函数的调用 with(对象){ 直接写对象的方法,无需写对象的名称 }*/ with(document){ var i = 0; do{ write("helloword"); write("<br>"); i++; }while(i<10); }</script>
2.6 函数
①函数定义:
function 函数名称(形式参数列表){
语句
}
②调用函数:
函数名称(实际参数列表);
③注意:
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天
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript"> //当我的按钮的单击事件被触发以后需要执行的操作 function checkMonth(){ //获取单行输入域内的用户输入的月份值 var month = document.getElementById("month").value; //使用if语句做判断,给出相应的提示 /* 1,3,5,7,8,10,12 大月 31天 4,,6,9,11 小月 30天 2 小小月 28天 */ 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></head><body>请输入你需要查询的月份:<input type="text" id="month"/><!--在这里需要给我的button标签添加一个单击事件--><input type="button" value="查询天数" onclick="checkMonth()" /></body></html>
2.7 基于对象编程
内置对象
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)+”
”);
常用方法:
charAt(索引): 返回指定索引的内容
indexOf(字符串): 返回首次出现指定字符的索引位置
lastIndexOf(字符串): 返回最后出现指定字符的索引位置
fontcolor(“red”): 直接给字符串添加颜色
split(“字符串”): 使用指定字符串切割字符串,返回字符串数组
substring(start,end); 截取字符串,start:开始索引, end:结束索引
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)+”
”);
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(): 返回最小值
5.Date对象
//创建日期 var date = new Date(); //取当前系统日期时间 java: SimpleDateFormat对象 yyyy-MM-dd 格式化 //document.write(date); //默认格式 //格式: 2015年06月01日 15时12分30秒 //年份 document.write(date.getFullYear()+"年"); //月 document.write((date.getMonth()+1)+"月"); //日 document.write(date.getDate()+"日"); //星期 document.write("星期"+date.getDay()+" "); //时 document.write(date.getHours()+"时"); //分 document.write(date.getMinutes()+"分"); //秒 document.write(date.getSeconds()+"秒");
案例练习:网页时钟
<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.1 指定数组长度
var arr = new Array(3);
1.2 不指定数组长度、默认0个元素
var arr = new Array();
1.3 指定具体内容
var arr = new Array(10,”hello”,true);
方式二: 不需要new,直接指定内容
var arr = [10,”java”,false];
注意:
1)数组的长度会随着元素的添加而变化,不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。
常用的方法:
join(字符串): 使用指定的字符串,把数组的所有元素连接在一起,最终组成一个新的字符串
reverse(): 反转数组中的元素
sort():排序(数字按从小到大,字母按a-z)
常用的属性:length 数组的长度
练习1:显示乘法口诀。
1*1=1
1*2=2 2*2=4
….
1*9=9 2*9=18 …
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(j+"*"+i+"="+i*j+" "); } document.write("<br>"); }</script></head><body></body></html>
练习2:设计一个猜数字小游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript"> //生成随机数 var num = Math.floor(Math.random()*100+1); //alert(num); function checkNumber(){ //1.获取输入狂内部输入的数字 var inputNumber = document.getElementById("inputNumber").value; //将数字的类型进行转换 inputNumber = parseInt(inputNumber); //做if判断并给出提示 if(inputNumber>num){ alert("大了"); }else if(inputNumber<num){ alert("小了"); }else if(inputNumber==num){ alert("对了"); } }</script></head><body>请输入你猜测得数字:<input type="text" id="inputNumber" /><input type="button" onclick="checkNumber()" value="猜数字" /></body></html>
- JAVA-25.1-js基础篇、基本语法、常用内置对象讲解
- JSP最基本语法及常用的内置对象
- js常用内置对象
- js常用内置对象
- js基础 内置对象
- JavaScript基础[用途、基本使用、批量产生对像、对象调用、对批量生产对象进行验证、语法的灵活性、js的内置对象]
- 学习笔记之javaweb基础:jsp基本语法,内置对象,对JavaBean的操作语法
- WEBBASIC Unit04&05 JavaScript 概述 、 JavaScript 基础语法 、 流程控制、 JavaScript对象概述 、 常用内置对象一 、 常用内置对象二 、 常用内置
- 常用的js内置对象
- Js常用的内置对象
- jsp基本语法(指令,属性,内置对象)
- JSP基本语法C--JSP内置对象
- Python基础-基本语法,内置容器
- Java基本常用语法
- JSP内置对象、基础语法笔记
- Java基础 基本语法
- Java基础-基本语法
- JS基础--常用对象
- 浅淡TI DSP 6000系列优化经验
- 操作系统之非连续分配存储管理方式
- NSIndexSet 使用
- linux查看硬件信息的常用命令整理
- NYOJ:51-管闲事的小明
- JAVA-25.1-js基础篇、基本语法、常用内置对象讲解
- 非平稳时间序列确定性因素分解
- 人工智能相关术语
- UINavigationController 返回总结
- NYOJ:53-不高兴的小明
- Thinkpad E420 将引导扇区转移到另一个硬盘上
- WEB和JAVA WEB
- windows server 2012 xampp 80 端口被占用
- python基础