JS基础

1、什么是JavaScript

HTML只是描述网页长相的标记语言,没有计算、判断能力,如果所有计算、判断(比如判断文本框是否为空、判断两次密码是否输入一致)都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的语言。

2JavaScript解释型语言,无需编译就可以随时运行,这样哪怕语法有错误,没有语法错误的部分还是能正确运行。

1、HTML+CSS 解决英文内容溢出div问题 

View Code
<html>
<head>
    <title ></title>
    <style type="text/css">
        div{width:100px ;height:100px ;}
        #d1{background-color:Red;
            /*强制换行*/
            word-break:break-all;
            /*自动出现滚动条*/
            overflow:auto ;
        }
        #d2{background-color:Yellow;}
        #d3{background-color:Green;position:fixed;bottom:0px;right:0px ;}
        #d4{background-color:Blue;}
        #d5{background-color:Gray ;}
    </style >
</head>
<body>
    <div id="d1">
    asdlkfalksdjflasdjfakjsfdlasjfdla;fdjlaksdfjlaskdjflasjfdladfsjlaksjfdlklkjkljklasdlkfalksdjflasdjfakjsfdlasjfdla;fdjlaksdfjlaskdjflasjfdladfsjlaksjfdlklkjkljkl
    </div >
    <div id="d2"> 123</div >
     <div id="d3">123 </div>
      <div id="d4">123 </div>
       <div id="d5">123 </div>

       <br /><!--插入多个换行效果明显-->
</body>
</html>

2、Js事件执行顺序

1JavaScript代码放到<script>标签中,script可以放到<head><body>等任意位置,而且可以有不止一个<script>标签。alert函数是弹出消息窗口,new Date()是创建一个Date类的对象,默认值就是当前时间。JS是大小写敏感的。

2放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的 

View Code
<html>
<head>
    <title ></ title>
    <script type="text/javascript">
        //alert(new Date().toLocaleDateString());
        alert( "header" );
        //html页面code从上到下运行  所以结果为header==>外部js==》2012前夕==》2012==》2012之后
    </script >
    <script src="js/main.js" type="text/javascript" ></script > <!--内容就是一句话alert("外部js");-->
</head>
<body>
    <script type="text/javascript">
        alert( "2012前夕" );
    </script >
    2012
    <script type="text/javascript">
        alert( "2012之后" );
    </script >
</body>
</html>

 3、js事件

1JavaScript中也有事件的概念,当按钮被点击的时候也可以执行

<input type="button" onclick="alert(嘻嘻)" value="一毛"/>

2、只有超链接的href中的JavaScript中才需要加“"javascript:”,因为它不是事件,而是把“"javascript:”看成像“http:”、“ftp:”、“thunder://”、“ed2k://”、"mailto:"一样的网络协议,交由js解析引擎处理。只有href中这是这是一个特例。实例如下

View Code
<html>
< head>
    <title ></ title>
</ head>
< body>
<!--javascript:相当于协议 当做javascript来处理  实现伪链接样式-->
    <href="javascript:alert('123')"> 123 </>
    <br />
    <!--mailto邮件协议 所以会调用系统默认发送邮件工具-->
    <href="mailto:[email protected]"> 联系我 </>
    <br />
    <!--这里才是真正的单击click事件-->
    <input type="button" value="click" onclick="alert('点我了')" />
</ body>
</ html>

4、变量

1JavaScript中即可以使用双引号声明字符串,也可以使用单引号声明字符串主要是为了方便和html集成,避免转义符的麻烦。

2JavaScript是弱类型,声明变量的时候无法:int i=0;只能通过var i=0;声明变量,和C#中的var不一样,不是C#中那样的类型推断

3、JavaScript中也可以不用var声明变量,直接用,这样的变量是“全局变量”,因此除非确实想用全局变量,否则使用的时候最好加上var。

View Code
<html>
< head>
    <title ></ title>
    <script type="text/javascript">
        //因为var是弱类型的语言 所以可以给它赋多种类型的值
        //但js并非只有var一种类型 通过typeof()可以查看参数的类型 数字返回number 字符串返回string
        //就是说浏览器在解释js时候自动识别了
        var i = 5;//因为js是动态类型的  因此i="abc";是合法的
        var name = "张三" ;
        n = 6;
        alert(n);
        //alert(typeof (i));
        //alert(typeof (name));
        //alert(i);
    </script >
</ head>
< body>
</ body>
</ html>

5、Null

1JavaScript中有null、undefined两种,null表示变量的值为空,undefined则表示变量还没有指向任何的对象,未初始化。两者是有区别的

2JavaScript中判断变量、参数是否初始化的三种方法:

        var x;

        if (x == null) {

            alert("null");

        }

        if (typeof (x) == "undefined") {

            alert('undefined');

        }

         if (!x) {alert('x');}

        if(x){}//变量被初始化了或者变量不为空或者变量不为0.

推荐用最后一种方法。

js值为0nullundefined或空字符串的表达式被解释为 false

View Code
<html>
< head>
    <title ></ title>
    <script type="text/javascript">
        //null与undifinde在某些情况下是相等的 详见参考文档
        var name;
        var a = 6;
        var b = "6" ;
        //alert(a == b);//返回true对值的判断
        //alert(a !== b);返回true  !==不全等的意思  不仅对值的比较 还有保存类型
        if (name == null ) {
            alert( "为空" );
        }
        alert( null == undefined);//返回true
        //非全等
        alert( null !== undefined);//返回false
        if (name == undefined) {
            alert( "为空" );
        }
        //变量未赋值  !取反 if (name)的作用就是判断name是否为空 返回true false
        if (!name) {
            alert( "为空" );
        }
        //已经赋值
        if (name) {
        }
    </script >
</ head>
< body>
</ body>
</ html>
  

6、练习调试  调试与C#一样  没有报错也没有得到响应的话需要使用alert查看值

View Code
<html>
< head>
    <title ></ title>
    <script type="text/javascript">
        var sum = 0;
        for (var i=1;i<=100;i++) {
           sum += i;
        }
        alert(sum);
    </script >
</ head>
< body>
</ body>

</ html>

7、函数

1JavaScript中声明函数的方式:

不需要声明返回值类型、参数类型函数定义以function开头。

function add(i1, i2) {

     return i1 + i2;

}

var r = add(1, 2);

alert(r);

r = add("你好", "tom");

alert(r);

2、JavaScript中不像C#中那样要求所有路径都有返回值,没有返回值就是undefined。

3、自定义函数名不要和js内置、dom内置方法重名,比如selectall、focus等函数名不要用。

4JS的函数没有专门的函数默认值的语法但是可以不给参数传值,不传值的参数值就是undefined,自己做判断来给默认值

View Code
<html>
< head>
    <title ></ title>
    <script type="text/javascript">
       function add(n1, n2) {
            if (!n1) {
                alert( "参数不全" );
                return ;
           }
            return n1 + n2;//如果参数为空 则返回undefined
       }
       var n = add(6);//返回"nan" 不知道 6+undined
          alert(6 + null );//返回6
       alert(n);
        //自定义函数名称,不要跟系统函数名重复  否则是不会执行的
        //function alert(n1,n2) {
            //var n = n1 + n2;
        //}
        //alert(alert(5, 6));
    </script >
</ head>
<body>
</body>
<html>

8、匿名函数

1、除了可以在页面中声明JavaScript以外,还可以将JavaScript写到单独的js文件中,然后在页面中引入:<script src="js/test.js" type="text/javascript"></script>。声明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*)  这一点和css样式文件类似

2var f1 = function(i1, i2) {类似于C#中的匿名函数

            return i1 + i2;

        }

        alert(f1(1,2));

这种匿名函数的用法在JQuery中的非常多

3alert(function(i1, i2) { return i1 + i2; }(10,10));//直接声明一个匿名函数,立即使用。用匿名函数省得定义一个用一次就不用的函数,而且免了命名冲突的问题

4js中没有命名空间的概念,因此很容易函数名字冲突。一旦命名冲突以最后声明的为准 

View Code
<html>
< head>
    <title ></ title>
    <script src="js/js1.js" type="text/javascript"></ script >
    <script src="js/js2.js" type="text/javascript"></ script >
    <script type="text/javascript">
        var f1 = function (n1, n2) {
            return n1 + n2;
        } //将函数赋值给一个参数 类似C#中的委托
        //alert(function(n1,n2) { return n1-n2}(6,5));//返回1
               //如果外部js文件js1与js2存在同名方法 add默认执行js2中的 即执行后一个
               //调用f1方法的时候
              alert(f1(6,5)); //返回11
        alert(add(6,5)); //返回1
    </script >
</ head>
<body>
</body>
<html>

 

function add(n1,n2) {return n1 + n2;}//js1.js文件内容
function add(n1,n2) {return n1 + n2 * (-1);}//js2.js文件内容

你可能感兴趣的:(js)