新手入门学javascript基础笔记与实例

最新推荐文章于 2024-06-24 14:30:19 发布

JaceLai_

最新推荐文章于 2024-06-24 14:30:19 发布

阅读量596

点赞数 1

分类专栏： web前端笔记文章标签： javascript

本文链接：https://blog.csdn.net/Wlcf258/article/details/54291496

版权

web前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

js是什么？

   是一门弱类型的脚本语言，能够实现网页的特效。是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

js的作用？

   1.用户交互
   2.表单验证
   3.网页特效
  JS总结： 用来控制HTML结构和CSS样式

javascript的实现

      虽然JavaScript 和ECMAScript 通常都被人们用来表达相同的含      义，        但JavaScript 的含义却比ECMA-262 中规定的要多得多。没错，一个完整的JavaScript实现应该由下列三个不同的部分组成。

元素的获取：

  document.getElementById(‘btn’); 
 ：document：整个html文档 
 ：通过id名：通过id获取元素（节点） 
 ：在文档里面查找id为btn的元素 
 ：所以id必须是唯一的

鼠标事件：

onmouseover：当鼠标经过的时候 
onmouseout：当鼠标离开的时候 
onclick：当鼠标点击的时候

什么是函数？

<script type="text/javascript">
            window.onload = function() {
                // 函数就是实现过个功能的代码块           
                function show() { //  函数的声明
                    alert("哈哈"); // 函数的输出
                }
                 show();         //  函数的调用   .无参函数    
                var oBtn = document.getElementById('btn');
        oBtn.onclick = show;   //  函数的调用  
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="按钮" />
    </body>

数据类型

基本数据类型的应例：

<script type=text/javascript>
            var a=55;   //  数字类型
            var b='帅哥';    //  String类型   字符串
            var c;   //  未定义underfined   2.写了var,但是没有赋值
              //  d;  //   未定义underfined   1.没有var就是未定义
            var f=true;     //   布尔类型   
            //   null类型       
            alert(typeof(b));         
        </script>

  五中基本数据类型的总结：number  String   boolean   null   underfined 这五种。

求模

                    // 讲88秒转为几分几秒的形式
        var oMinute=parseInt(80/60);    //   parseInt   1.强制将字符串转换数字类型
            var oSecond=(80%60);              //            2.提取数字开头的数字           
            alert(oMinute+"分"+oSecond+"秒");


            // 讲8787秒转为几时几分几秒的形式
       var oMin=parseInt(8787/3600);    //时     
       var oSec=parseInt(8787%3600/60);//分
       var oThr=parseInt(8787%60);   //   秒
         alert(oMin+"时"+oSec+"分"+oThr+"秒");

变量作用域的应用

<script type="text/javascript">
            var a=5;  //  全部变量 
            function aa(){
                var b=6;    //  局部变量
                alert(a);   //  输出全局变量的值
            }
            alert(alert(a));        
        </script>

className的使用

例:

<style type="text/css">
            .one{background: red;}
            .two{background: gold;}
        </style>
    </head>
    <body>
         <input type="button" name="" id="bb" value="换色" />
          <p id="aa" title="" class="one">sds</p>
    </body>
    <script type="text/javascript">
        var oAa=document.getElementById('aa');   //   获取id获取元素
        var oBb=document.getElementById('bb');   //   获取id获取元素

          oBb.onclick=function(){    //  设置点击效果

            if(oAa.className=='one'){   //  用for循环设置换肤
                oAa.className='two';    //  
            }
            else{
                oAa.className='one';
            }
          }

    </script>

日历选项卡的制作实例：

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }           
            #box li {
                width: 60px;
                height: 60px;
                color: #fff;
                background: #000;
                text-align: center;
                font-size: 16px;
                line-height: 60px;
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
            }           
            #box {
                margin: 50px;
            }           
            #box ul {
                width: 220px;
            }           
            #box .active {
                background: #FFF;
                border: 1px solid #000;
                color: orange;
                box-sizing: border-box;
            }
            #content {
                clear: both;
                width: 200px;
                height: 50px;
                border: 1px solid gray;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <ul>
                <li class="active">1月</li>
                <li>2月</li>
                <li>3月</li>
                <li>4月</li>
                <li>5月</li>
                <li>6月</li>
                <li>7月</li>
                <li>8月</li>
                <li>9月</li>
                <li>10月</li>
                <li>11月</li>
                <li>12月</li>
            </ul>
            <div id="content">
                <h3>1月</h3>
                <p>准备毕业啦</p>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var arr = [
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
            '准备毕业啦',
        ];
        var oBox = document.getElementById('box');
        var aLi = oBox.getElementsByTagName('li');
        var oContent = document.getElementById('content');
        for(var i = 0; i < aLi.length; i++) {   //  对li进行循环
            aLi[i].index = i;   //  设置索引
            aLi[i].onmouseover = function() {  // 循环点击li样式   
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = ''; //   清空所有样式
                }
                this.className = 'active';  //  设置当前的样式
                oContent.innerHTML = '<h3>' + (this.index + 1) + '月份活动</h3><p>' + arr[this.index] + '</p>';//   通过innerHTML获取标签里面的内容           
            }
        }
    </script>