JavaScript(1)
来源：互联网 发布：mysql 5.7修改root密码 编辑：程序博客网 时间：2024/04/30 08:39
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) 返回首字符位置索引，没找到返回-1x.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> 0 0
- JavaScript-1
- javascript(1)
- JavaScript-1
- javascript(1)
- JavaScript-1
- javascript【1】
- javascript-1
- javascript 1
- JavaScript(1)
- JavaScript(1)
- JavaScript(1)
- javaScript -1
- JavaScript(1)
- javascript<1>
- javascript (1)
- javascript(1)
- JavaScript学习(1)初识JavaScript
- 学习Javascript笔记1 Javascript对象1
- linux内核的 等待队列 使用方法，wait_queue_head_t，进程休眠
- 动态调用WebService(C#)
- 部分资料
- Validform校验
- C，java语言中初始化问题
- JavaScript(1)
- jquery的text()、html() 以及 val()
- 【黑马程序员】OC-Foundation框架—NSMutableString
- Python学习小记
- 【Leet Code】26. Remove Duplicates from Sorted Array---Easy
- MYSQL多主同步，负载均衡
- guava中的Splitter
- 三个简单的H5/Egret/JavaScript面试题
- C++堆栈区别
