这篇博客详细介绍了JavaScript的基础知识，包括变量定义、数据类型、算术运算符、流程控制语句、函数的定义和调用。此外，还探讨了内置对象如String和Date的使用，以及如何实现网页时钟。同时，讲解了DOM操作和事件处理，如常用事件分类和DOM元素的获取与操作。内容涵盖JavaScript核心概念及其在网页交互中的应用。
目录
一、js变量定义及数据类型划分
1、定义变量
1）js定义变量使用var定义，var可以省略不写，（弱类型语言）可以重复定义变量，后边的值将前边的值覆盖
2）var可以定义任何数据类型，如何查看数据类型：typeof（变量名）
2、基本数据类型划分
1）整数，小数 number类型------提升为js内置对象Number（引用类型）
2）字符串，字符 string类型类型--提升为js内置对象String（引用类型）
3）boolean类型 提升js内置对象Boolean（引用类型）
4）underfined 未定义数据类型，没有给变量赋值，无意义
5）object 自动提升js内置对象（引用数据类型：代表任意Javascript内置对象模板）
<script> var g = new Object() ; document.write("g的值是:"+g+",g的数据类型是:"+typeof(g)+"<br/>") ; </script>
二、js算术运算符
1、算术运算符
<script>
var a = 10 ;
var b = 20 ;
document.write("(a+b):"+(a+b)+"<br/>") ;
</script>2、比较运算符
//弱类型语言: true代表 数字1 false 数字 0 (实际开发:仅仅代表 逻辑判断)
document.write(a+false) ;
document.write((a>b)+"<br/>") ;
document.write((a==b)+"<br/>") ;3、逻辑运算符
document.write((a>b) && (c>b)+"<br/>") ; 4、三元运算符
//三元运算符
var age = 18 ;
document.write((age>=18)?"成年人":"未成年人") ;三、js的流程语句
1、顺序语句
2、选择语句 if 、switch
1）if
/*
js中弱类型语言:
boolean的值:true,成立;false不成立
表达式中如果是非0的number类型,条件成立,否则不成立;
表达式中如果是string类型,非空字符串,条件成立,否则不成立;
表达式如果是object类型,非null对象,条件成立,否则不成立;
实际开发中,if语句中表达式(通过一些逻辑运算符 || &&)
*/
if(new Object()){
alert("条件成立") ;
}else{
alert("条件不成立") ;
}2）switch
/*
switch:弱类型语言的switch中的case后面 既可以是变量,也可以是常量
*/
var week = 4 ;
var b = 4 ;
switch(week){
case 1:
alert("星期一")
break ;
case b:
alert("星期四")
break
default:
alert("非法数据")
break
}3、循环语句 for while do-while
1）打印语句
<script>
for(var i = 0; i < 10 ; i++){
document.write(i+"<br/>");
}
</script>2）for-in语句遍历数组或自定义对象的数组
for(var 变量名 in 数组对象/自定义对象){ //类似于Java中增强for循环
使用变量名
如果是数组 数组对象[变量名]
}
var arr=[10,20,30];
for(arr i = 0; i < arr.length ; i++){
document.write(arr[i]+"&ensp");
}
for(arr i in arr){
document.write(arr[i]+"&ensp")
}四、js中函数的定义及调用
1、js中函数额定义
1）形式参数列表：只需要书写参数名称即可，不需要到var
2）js中定义函数的时候，书写return，也可以不写
3）js是弱类型语言，没有函数重载，函数名称相同，后面的函数将前面的函数覆盖
如果形式参数个数大于实际参数列表，函数会被调用，只不过值为NaN，有某个形参未赋值，导致结果为NaN
如果形式参数个数小于实际参数，函数会被调用，会将多余的实际参数去掉然后将前面的实际参数分别绑定给形式参数,进行计算...
4）js中函数中默认存在一个数组对象:arguments 作用:就是将实际参数赋值给形式参数
2、调用
function 函数名称(形式参数列表){
1)可以写return语句
2)直接输出
}
调用
1) var 结果 = 函数名称(实际参数列表) ;
输出结果
2) 单独调用 函数名称(实际参数列表) ;
var result = add(10,20) ;
function add(a,b,c){
//默认存在arguments数组对象
for(var i = 0 ; i<arguments.length ; i++){
alert(arguments[i]) ;
}
var result = a+ b+ c ;
document.write("三个数据之和是:"+result) ; ------NaN,参数为2个
}五、js中函数以及流程控制语句的应用
js事件编程的三要素
1)事件源
html标签
2)编写事件监听器
编写一个js函数
3)绑定事件监听器
利用html一些事件属性和js函数进行关
on事件="js函数()"
通过文本输入月份获取季节
<body>
<!-- 事件源-->
<input type = "text" id = "month" /><input type = "button" value = "点击查看" onclick = "checkButton()"/>
</body>
<script>
<!-- 编写js函数-->
function checkButton(){
//业务:需要通过文本输入框的id属性值"month"获取所在的标签对象，
//oElement = document.getElementById(sIDValue) :通过id属性值获取标签对象
var textIput = document.getElementById("month");
//获取标签属性
var content = textIput.value;
//一步走//content---->String
var content = document.getElementById("month").value;
//if..else..if..
//if中的string和number比较,string---自动将String转换number，然后在和number比较
if(content<0 || content>12){
alert("非法数据") ;
} else if(content>=3 && content<=5){
alert("春季") ;
}else if(content>=6 && content<=8){
alert("夏季") ;
}else if(content>=9 && content<=11){
alert("秋季") ;
}else{
alert("冬季") ;
}
//switch语句，content：表单输入内u容String，不能自动换换成number
//类型转换函数:将string--->number
content = parsetInt(content);
switch(content){
case 3:
case 4:
case 5:
alert("春季") ;
break ;
case 6:
case 7:
case 8:
alert("夏季") ;
break ;
case 9:
case 10:
case 11:
alert("秋季") ;
break ;
case 12:
case 1:
case 2:
alert("冬季") ;
break ;
default:
alert("非法数据");
break ;
}
}
}
</script>六、内置对象String
1、valueOf（）字符串的内容是否一致
js内置String对象:valueOf()获取指定对象的原始值。(字符串本身的内容值)，比较两个字符串的内容是否一致
var s1 = new String("hello") ;
var s2 = new String("hello") ;
document.write((s1.valueOf()==s2.valueOf())+"<br/>") ;2、==:比较的是地址值是否相同
3、获取指定索引处的字符:charAt(var index)
4、concat(var str):拼接功能
5、indexOf(var childStr):查找指定子字符串第一次出现索引值
6、lastIndexOf(var childStr):子字符串最后一次出现的索引值
7、fontcolor(颜色单词/或者RGB的写法#字符值)
document.write("fontcolor():"+str.fontcolor("#ffaa00")+"<br/>") ; 8、截取substring(start,end):[start,end-1] :参数1:起始索引,参数2:终止索引
9、获取指定长度 substr(start ，[ length ]):参数1:起始索引,参数2:指定截取长度
10、分割功能(拆分)spilt("分隔符号")
七、内置对象Date
1、js获取系统时间
//js创建Date对象
var date = new Date();
//当前系统时间
document.write(date);2、获取年 getFullYear（）；
document.write(date.getFullYear()+"年")；3、获取月 getMonth（）：0-11之间的整数
document.write(date.getMonth()+1+"月") ;4、获取月中的日期 getDate()
document.write(date.getDate()+"日  ") ;5、获取时 getHours
document.write(date.getHours()+":") ;6、获取分钟 getMinutes()
document.write(date.getMinutes()+":") ;7、获取秒getSeconds()
document.write(date.getSeconds()) ;八、网页时钟
网页始终可以获取实时时间
<html>
<head>
<meta charset="utf-8">
<title>网页时钟</title>
</head>
<body>
<font>当前系统时间是:</font><span id="spanTip"></span>
<!-- 事件源 -->
<input type="button" value="清除定时器" onclick="clearTask()" />
</body>
<script>
function genDate(){
//1)创建当前Date对象:拼接当前系统时间
var date = new Date() ;
//2)拼接日期字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+
date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
//alert(dateStr)
//通过id属性值获取span标签对象
var spanObject = document.getElementById("spanTip") ;
//设置span标签对象的innerHTML属性: 添加文本内容(可以加入html标签 渲染)
//innerText属性:只是添加普通文本: 如果添加标签体,不会将标签进行转义
spanObject.innerHTML = "<h4>"+dateStr.fontcolor("#ffaa00") +"</h4>";
}
//window对象(可以省略不写)中有网页定时器
//window.setInterval(vCode, iMilliSeconds ): 每经过iMilliSeconds毫秒值重复执行vCode
//参数1:任务函数
//参数2:毫秒数
var taskId = setInterval("genDate()",1000) ;//每经过1000毫秒执行这个任务
//清除定时器
//window.clearInterval(iIntervalID) :参数任务id
function clearTask(){
//alert("触发点击...");
window.clearInterval(taskId) ;
}
</script>
</html>九、常用事件分类
1、事件
<!--
点击相关的事件
单击:click
双击:dbclick和焦点相关的事件
获取焦点:focus
失去焦点:blur
和选项卡发生变化事件相关的change(下列菜单 选择子选项...)
和鼠标相关的:鼠标经过mouseover,鼠标移出mouseout...
页面载入事件load
键盘按下:keyup ----参考文档...-->
2、测试
<html>
<head>
<meta charset="utf-8">
<title>js常用事件分类</title>
<style>
#div1{
border: 1 solid #000;
background-color: olivedrab;
width: 100px;
height: 100px;
}
</style>
</head>
<!-- 将整个body内容加载完毕之后,触发一个函数 -->
<body onload="testLoad()">
<input type="button" value="单击" onclick="testClick()" /><br/>
<input type="button" value="双击" ondblclick="testDbClick()" /><br/>
用户名:<input type="text" id="username" value="请输入用户名" onblur="testBlur()" onfocus="testFocus()" /><span id="usernameSpan"></span><br/>
籍贯:
<select id="province" onchange="testChange()">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="江西省">江西省</option>
<option value="广东省">广东省</option>
</select>
<select id="city">
<!-- <option value="西安市">西安市</option> -->
</select>
<br />
<div id="div1" onmouseover="testMouseOver()" onmouseout="testMouseOut()">
div
</div>
</body>
<script>
/* 编写事件监听器 */
function testClick(){
alert("触发了单击点击事件...") ;
}
function testDbClick(){
alert("双击点击事件触发了...") ;
}
//获取焦点
function testFocus(){
//alert("触发获取焦点事件...");
//需要通过id="username"获取input标签对象
var inputObj = document.getElementById("username") ;
inputObj.value = "" ; //清空掉
}
//失去焦点函数
function testBlur(){
需要通过id="username"获取input标签对象并且同时获取文本框的内容
var username = document.getElementById("username").value ;
//alert(username) ;
//id="usernameSpan"所在的标签对象
var spanObj = document.getElementById("usernameSpan") ;
if(username !="马三奇"){
//设置span标签对象的innerHTML内容
spanObj.innerHTML="对不起,用户名不可用".fontcolor("red") ;
}else{
spanObj.innerHTML="√".fontcolor("green") ;
}
}
//选项卡发生变化的事件函数
function testChange(){
//alert("change事件触发了...") ;
//获取当前的省份内容:
//id="province"获取的标签对象同时内容
var jiguan = document.getElementById("province").value;
//alert(jiguan) ;
//获取id="city"所在的标签对象
var city = document.getElementById("city") ;
//每次选项卡变化,将之前的innerHTML清空掉
city.innerHTML = "" ;
//选择某个省份之后,出现城市 :省市联动
//判断如果jiguan如果是陕西省
if(jiguan=="陕西省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["西安市","宝鸡市","咸阳市","渭南市","神木市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="山西省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["太原市","运城市","晋中市","吕梁市","大同市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="江西省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["赣州市","南昌市","上饶市","滨海市","宜春市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="广东省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["深圳市","广州市","东莞市","惠州市","中山市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
//鼠标经过事件的函数
function testMouseOver(){
//alert("触发鼠标经过事件...") ;
window.open("03_js中的运算符.html") ;
}
function testMouseOut(){
alert("鼠标移出事件触发...") ;
}
//页面载入事件load 一般用在body里面
/* function testLoad(){
//alert("body加载完比了") ;
} */
/* 绑定onLoad事件 */
window.onload = function(){
alert("页面载入事件触发了") ;
}
</script>
</html>
十、DOM操作
1、DOM操作
一般通过doucment对象的方法获取标签对象,通过标签对象改变属性内容
document.getElementById("id属性值") ;id属性值必须唯一,获取某个标签对象
document.getElementsByName("name属性值") ---获取的是当前列表标签对象(集合)
document.getElementsByClassName("所有的同名class属性值")---获取的是当前列表标签对象(集合)
ocument.getElenentsBtTagName("所有的同名的标签名称") ;-----获取的是当前列表标签对象(集合)
2、使用
<!--想通过dom操作:获取文本框输入的内容:文本框失去焦点,将获取的内容弹框出来-->
<body>
<!--<h3>hello,tomcat...</h3>-->
用户名:<input type="text" id="username" name="user" class="user_class"
onblur="getUserName()" />
</body>
<script>
function getUserName() {
//方式1:document.getElementById("id属性值") ;
var username = document.getElementById("username");
//方式2:document.getElementsByName("name属性值");获取的标签对象列表
var username = document.getElementsByName("user")[0];//通过name属性值获取标签对象
//方式3:document.getElementsByClassName("所有的同名class属性值")---获取的是当前列表标签对象(集合)
var username = document.getElementsByClassName("user_class")[0];
//方式4:document.getElenentsBtTagName("所有的同名的标签名称") ;-----获取的是当前列表标签对象(集合)
var username = document.getElementsByTagName("input")[0] ;
//获取标签对象的文本内容
alert(username.value) ;
}
</script>
扫一扫
1297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
