1) 第一个js
———————**
index.js文件内容:
/*解释执行,读到哪执行到哪*/
alert('hello js from <script>');
//js中没有继承,返回值类型不写可返回,参数不写可传参
/*js方法的格式:
function 方法名(参数列表){方法体}*/
function func(){
alert('hello js from func()');
}
function func1(){
alert('hello js from js file');
}
<!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" xml:lang="en" lang="en">
<head>
<title>第一个js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--
javaScript用来向页面添加交互行为。(IPO)
.length
.toLowerCase()
JavaScript适宜:
客户端数据计算
表单合法性验证
浏览器事件的触发
网页特殊效果制作
服务器异步数据提交(Ajax,需要服务器端的配合)
-->
<style></style>
<script src="index.js">//专门保存脚本的标签
/*js代码主要放在js文件中。
如果引用了src="js文件名",script标签中的内容都不认。(不能并存)
如果非要写,那么再写一个script标签,
在新加的标签中添加需要的内容
*/
/*解释执行,读到哪执行到哪*/
/*
alert('hello js from <script>');
*/
//js中没有继承,返回值类型不写可返回,参数不写可传参
/*js方法的格式: function 方法名(参数列表){方法体}*/
/*
function func(){
alert('hello js from func()');
}
*/
</script>
<script></script>
</head>
<body>
<!--js的按钮type为"button",js不区分单双引号,区分大小写-->
<input type="button" value="first button" onclick="alert('hello js from onclick')"/>
<!--方法的调用:onclick="方法名()" -->
<input type="button" value="second button" onclick="func()"/>
<input type="button" value="third button" onclick="func1()"/>
</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" xml:lang="en" lang="en">
<head>
<title>类型计算</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style></style>
<script></script>
</head>
<body style="font-size:18px;font-weight:bold">
var s1="a"; var s2 = "b";<br/>
var n1= 1; var n2 = 2;<br/>
<br/>
alert(n1+s2);<br/>
var b1=true; var b2 = false;<br/>
<br/>
alert(b1+b1);<br/>
<br/>
alert(n2+b1);<br/>
<br/>
alert(s1+b1);<br/>
<script>
/*
js变量:
所有变量不考虑类型,都用var声明,例如var x,y;
没有初始化的变量自动取值为undefined
一旦赋值,就有具体的类型
使用“=”赋值
如 var a=0;(声明a为整型)
var a;(undefined,内存中没有a)
var a=null;(这时内存有a这个对象,内容为空)
js数据类型
1)基本类型
Number 数字,不区分整数和浮点值类型,类似Java中的double
String 字符串
Boolean 布尔:仅有2个值true和false(有时候null也是false,有时候0也是false)
也代表1和0(可跟数值运算)
2)特殊类型
null
undefined
3)复杂类型
Array:数组(放多少个都可以,可放各种类型数据,有点像java中的object对象集合)
Object:对象
*/
var s1="a"; var s2 = "b";
var n1= 1; var n2 = 2;
alert(n1+s2);//1b,数字+字符串
var b1=true; var b2 = false;
alert(b1+b1);//2,布尔值转为1或0
alert(n2+b1);//3,数字+布尔值
alert(s1+b1);//atrue,字符串+布尔值
alert(s1+b1+b1);//atruetrue
alert(b1+b1+s1);//2a
//0,-0,null,"",false,undefined或NaN,则设置该值为false
</script>
</body>
</html>
3) parse
<!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" xml:lang="en" lang="en">
<head>
<title>parse</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style></style>
<script></script>
</head>
<body style="font-size:18px;font-weight:bold">
<script>
/*
toString转为字符串
parseInt("6.12")返回6,
parseInt:(1)自动去前后空格
parseInt:(2)自动去除数字后非数字字符
parseFloat("6.12")返回6.12
*/
var i=6.12;
alert(typeof(i));//number,typeof()检查对象类型
alert(typeof(i.toString()));//string
alert("parseInt('6.12')="+parseInt('6.12'));//6
alert("parseInt(7.12)="+parseInt(7.12));//7
alert("parseInt(' 8.12 ')="+parseInt(' 8.12 '));//8,自动去前后空格
alert("parseInt('')="+parseInt(''));//NaN,not a number(不是个数字的数字,NaN是数字类型)
alert("parseInt('blue1234')="+parseInt('blue1234'));//NaN
alert("parseInt('12px')="+parseInt('12px'));//12,自动去除数字后非数字字符
alert("parseInt(true)="+parseInt(true));//NaN,这是个特例,布尔隐式可转为数字,但不可强转
//parseFloat用法同于parseInt
alert("parseFloat('6.12')="+parseFloat('6.12'));//6.12
alert("parseFloat(7.12)="+parseFloat(7.12));//7.12
alert("parseFloat(' 8.12 ')="+parseFloat(' 8.12 '));//8.12
alert("parseFloat('')="+parseFloat(''));//NaN
alert("parseFloat('blue1234.56')="+parseFloat('blue1234.56'));//NaN
alert("parseFloat('12.34px')="+parseFloat('12.34px'));//12.34
</script>
</body>
</html>
4 ) isNaN()
<!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" xml:lang="en" lang="en">
<head>
<title>isNaN()</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style></style>
<script></script>
</head>
<body style="font-size:18px;font-weight:bold">
<script>
/*
用户在页面上输入的都是字符串 'xxx'
isNaN 判断是否为数值 true:不是数 false:是数
*/
alert("isNaN('')="+ isNaN(''));//false--
//***不对空字符串进行验证,所以返回默认值false.要配合.length>0使用
alert("isNaN(22.5)="+ isNaN(22.5));//false--22.5 is a number
alert("isNaN('10')="+ isNaN('10'));//false--can be converted to number 10
alert("isNaN(' 10 ')="+ isNaN(' 10 '));//false,可自动忽略前后空格,然后自动转为数字
alert("isNaN('1234blue')="+ isNaN('1234blue'));//true--不能自动转为数字,比parseInt严格
//alert("isNaN(1234blue)="+ isNaN(1234blue));编译出错
alert("isNaN(true)="+ isNaN(true));//false-可以自动转为1
alert("isNaN('true')="+ isNaN('true'));//true,'true'是字符串,字符串不能转为布尔
alert("isNaN(NaN)="+ isNaN(NaN));//true
/*NaN和任何数字计算返回都是NaN*/
/*NaN和任何数字比较返回都是false*/
/*NaN不能作计算不能做比较*/
alert("isNaN(NaN == NaN)"+isNaN(NaN == NaN));//false
</script>
</body>
</html>
5)
index5.js
function getInt(){
//IPO
/*得到文本框对象,
document:当前正在加载的网页文件
document:可以找到一切
getElementById('id');按id查找一个元素
querySelector('选择器'):
按选择器查找第一个元素(不变应万变)
*/
//获得id为txtData的文本框对象
//var txtObj=document.getElementById('txtData');
//通过选择器获得
var txtObj=document.querySelector('#txtData');
//获得文本框对象中的内容
var str=txtObj.value;
//判断:是不是数字(isNaN),长度>0
if(str.trim().length>0)
if(!isNaN(str))
alert("整数部分是:"+parseInt(str));
else
alert("请输入数字");
else
alert("输入内容不可为空或空格");
}
function getSquare(){
//var txtObj=document.getElementById('txtData');
var txtObj=document.querySelector('#txtData');
var str=txtObj.value;
if(str.trim().length>0)
if(!isNaN(str))
alert("平方是"+(parseFloat(str)*parseFloat(str)));
else
alert("请输入数字");
else
alert("空和空格不允许");
}
<!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" xml:lang="en" lang="en">
<head>
<title>计算整数部分和平方</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style></style>
<script src="index5.js"></script>
</head>
<body style="font-size:18px;font-weight:bold">
<input type="text" id="txtData"/>
<input type="button" value="得到整数部分" onclick="getInt()"/>
<input type="button" value="计算平方" onclick="getSquare()"/>
</body>
</html>
6)
index6.js
function guessNumber(str){
var i=10;
var n=parseFloat(str);
//js中经常使用三元运算符代替if/else
var r=n>i?'大了':n<i?'小了':'猜对了';
alert(r);
/*
//var str = document.getElementById('txtData');
var result = 10;
// .trim():IE8不支持
//if(str.trim().length>0)
if(str.length>0)
if(isNaN(str)) alert("请录入数值");
else{
var data = parseFloat(str);
//js中经常使用三元运算符代替if/else
data > result ? alert("大了") : data<result ? alert("小了") : alert("恭喜您猜对了");
}
*/
}
<!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" xml:lang="en" lang="en">
<head>
<title>JS onblur()</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style></style>
<script src="index6.js"></script>
</head>
<body style="font-size:18px;font-weight:bold">
<!--onblur:失去焦点(往边框外点击1下,光标不闪了)
this.value:获取当前对象的值。this表示这个文本框
当事件发生在要获取的控件对象上时,比较方便使用
-->
<input type="text" onblur="guessNumber(this.value)"/>
<!--<input type="text" id="txtData" onblur="guessNumber(this.value)"/>-->
</body>
</html>
7)
index7.js
function searchAndReplace(){
/*
String:
.length是属性,不要加括号
JavaScript从0开始
x.charAt(index);
x.IndexOf(findstr,index) 返回首字符位置索引,没找到返回-1
x.lastIndexOf(findstr,index) 从后面起找
findstr:查找的字符串
index:开始查找的索引位置,可省略
x.repalce(findstr,tostr)
findstr:要找的字符串
tostr:替换为的字符串
返回替换后的字符串
*/
//IPO
//var txtObj = document.getElementById("txtString");//本行作用等同下一行
var txtObj = document.querySelector("#txtString");
var str=txtObj.value;
/*一致关键字,找位置:indexOf('关键字',开始位置)*/
var index=0;
while((index=str.indexOf('js',index)) > -1){
str=str.replace('js','**');
console.log(index);//在console界面打印出想要的值(打桩调试)
}
txtObj.value=str;
}
<!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" xml:lang="en" lang="en">
<head>
<title>字符查询与过滤</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style></style>
<script src="index7.js"></script>
</head>
<body style="font-size:18px;font-weight:bold">
<input style="width:300px" id="txtString"
value="我的第一个js页面,js是个客户端脚本语言"/><br/>
<input type="button" value="过滤特殊字符(js)"
onclick="searchAndReplace();"/>
</body>
</html>