JavaScript(1)

转载 2015年11月18日 14:58:08

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>

相关文章推荐

JavaScript系列教程1

  • 2016年04月29日 10:04
  • 57.71MB
  • 下载

Java程序员的JavaScript学习笔记(1——理念)

JavaScript是一种弱类型的语言。表面的意思是编译期(JavaScript有编译期吗?这个我不知道)不检查变量类型。深层的含义是:在JavaScript的世界里,众生平等。...

javascript_使用DOM笔记1

  • 2013年06月05日 16:59
  • 8KB
  • 下载

javascript1课件.ppt

  • 2014年03月15日 12:32
  • 1.41MB
  • 下载

小强的HTML5移动开发之路(26)—— JavaScript回顾1

很久没有怎么用过JavaScript了,感觉有点生疏,最近在看关于HTML5移动开发方面的资料,有一种直觉告诉我,JavaScript昨天、今天很重要,明天会更重要。现在好多基于JavaScript的...

1st JavaScript Editor Pro 5.1

  • 2014年01月03日 12:38
  • 6.57MB
  • 下载

javascript控件开发之可见控件 1

  • 2014年04月18日 00:40
  • 10KB
  • 下载

在线聊天室的实现(1)--websocket协议和javascript版的api

转自http://www.cnblogs.com/mumuxinfei/p/4679977.html 前言:   大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript(1)
举报原因:
原因补充:

(最多只允许输入30个字)