js入门及代码实现

JavaScript

1、JavaScript的简介
    （1）什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端。
    * 基于对象：
    ** java是面向对象，使用对象需要创建
    ** js里面提供好了一些对象，直接使用

* 事件驱动：每次滑动鼠标，变换一张图片

* 客户端：指的是浏览器

（2）JavaScript的特点（三个）
    第一个：交互性
    第二个：安全性
        ** JavaScript不能访问本地硬盘里面的文件
    第三个：跨平台性
        ** 在java里面跨平台，通过虚拟机实现的
        ** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript
    
    （3）Java和JavaScript区别（雷锋和雷峰塔）
    第一，java是sun公司，现在是oracle；JavaScript是网景公司
    第二，java是面向对象的语言，javas是基于对象的语言
    第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行
    第四，JavaScript弱类型语言，java是强类型的语言
        ** 比如在java里面定义一个变量 int a = 10;   int b = "10";不正确
        ** 在JavaScript里面定义变量都是使用一个关键字 var a = 10;  var b = "10"; var c = true;
    第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行

（4）JavaScript由三部分组成
    第一部分：ECMAScript
        ** 又ECMA组织制定语句，语法
    第二部分：BOM
        ** broswer object  model：浏览器对象模型
    第三部分：DOM
        ** document object model：文档对象模型

2、js和html的结合方式
    * 有两种结合方式
    第一种：使用html中的标签 <script type="text/javascript"> js代码 </script>
        ** 代码
         <script type="text/javascript">
            alert("aaa");
         </script>
        
        ** js的注释有两种
            //单行注释
            /*
            多行注释
            */
    
    第二种：使用html的标签，引入外部的js文件
        <script type="text/javascript" src="js文件的路径"></script>
        * 使用第二种方式的时候有两点注意
        注意一：不要在script标签里面写js代码了，不会执行
        注意二：结束script标签 </script>，不要在标签内结束
        * 代码
         <script type="text/javascript" src="1.js">
            //不要在script标签里面写js代码了，不会执行
            alert("aaa");
        </script>

3、js的变量声明和数据类型
    （1）在js里面如何声明变量，都是使用一个关键字var
    * var a = 10;
    （2）js的原始类型
    * 在java里面有基本的数据类型？八个
    * js的原始类型有五个
    第一，string：字符串类型
        * var a = "abc";
    第二，number：数字类型
        * var b = 10;
    第三，boolean：布尔类型 true false
        * var c = true;
    第四，null
        * null是特殊的引用类型
        * 表示对象引用为空
        * 比如 var date = null;
    第五，undefined
        * 表示定义了一个变量，但是没有赋值
        * var a;没有赋值
    
    （3）typeof(变量的名称): 查看当前变量的类型
        * alert(typeof(a));

4、js的引用类型和类型转换
    * 引用对象
    ** Object 对象：所有对象都由这个对象继承而来
    ** Boolean 对象：Boolean 原始类型的引用类型
    ** Number 对象： Number 原始类型的引用类型

* 类型转换
    ** 转换成字符串
    ** 转换成数字：parseInt() 和 parseFloat()
    ** 强制类型转换
    Boolean(value) - 把给定的值转换成 Boolean 型；
    Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
    String(value) - 把给定的值转换成字符串；

5、js的语句
    * 在java里面语句：if  、 switch 、while do-while for
    * java里面的switch语句，数据类型要求：是否支持string类型？在jdk1.7开始支持的

（1）if 语句
    * 代码
    //if语句
    var a = 10;
    if(a==10) {
        alert("10");
    } else {
        alert("other");
    }

（2）switch语句
    * 在java里面
    switch(a) {
        case 10:
         break;
        case 20:
         break;
        default:
        ....
    }
    * 代码
    var b = 5;
    switch(b) {
        case 4:
            alert("4");
            break;
        case 5:
            alert("5");
            break;
        default:
            alert("other");
    }

（3）while循环语句
    * 代码
    //while语句
    var i = 4;
    while(i<6) {
        alert(i);
        i++;
    }

（4）for循环语句
    * 代码
    //for语句
    for(var i=0;i<3;i++) {
        alert(i);
    }

（5）使用document.write()向页面输出内容
    * 可以向页面输出变量        
    * 可以向页面直接输出html代码
    **     document.write(i);
        document.write("<br/>");

6、练习：向页面输出99乘法表
    （1）document.write可以直接向页面输出html代码
    （2）html中的属性和属性值之间可以使用双引号，也可以使用单引号
    （3）代码
    document.write("<table border=‘1‘ bordercolor=‘blue‘>");
    //循环9行
    for(var i=1;i<=9;i++) {
        document.write("<tr>");
        //循环每行的部分
        for(var j=1;j<=i;j++) {
            document.write("<td>");
            //向页面输出内容
            document.write(j+"*"+i+"="+i*j);
            document.write("</td>");
        }
        //document.write("<br/>");
        document.write("</tr>");
    }
    document.write("</table>");

7、js的运算符
    （1）算术运算符
    + - * /....

（2）赋值运算符
    +=含义： x+=y 相当于 x=x+y

（3）比较运算符
    ==：表示条件的判断，如果是=，表示赋值

（4）逻辑运算符
    &&  ||  !

（5）js的运算符和java不同的内容
    第一个：js里面不区分整数和小数
    * 比如 var a = 123/1000*1000,如果在java里面结果是 0
    * js里面的结果：123

第二个：字符串的相加和相减操作
    * 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN
    * //字符串的相加和相减
    var b = "10";
    document.write(b+1); //字符串拼接
    document.write("<hr/>");
    document.write(b-1); //真正相减的运算

document.write("<hr/>");
    var c = "a";
    document.write(c-1); //NaN

第三个：boolean类型相加和相减的操作
    * 如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算
    //布尔类型相加和相减操作
    var flag = true;
    document.write(flag+1); // 2,当boolean类型是true时候，把类型当成1运算
    
    document.write("<hr/>");
    var flag1 = false;
    document.write(flag1+1); //1,当boolean类型是false时候，把类型当成0运算

第四个：==和===区别
    * ==比较的是值
    * === 比较的是值和类型
    * 代码
    var mm = "10";
    if(mm==="10") {
        alert("10");
    } else {
        alert("other");

代码1：

案例一；图片轮播及插播广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网络首页</title>
        <script type="text/javascript">
            function init(){
                setInterval("changeImg()",1000);
//                定时插播广告
                time =setInterval("showAd()",2000)
            }
            var i =1;
            function changeImg(){
                i++;
                document.getElementById("abc").src="../img/"+i+".jpg"
                if(i==2){
                    i =0;
                }
            }
//            书写显示图片函数
                function showAd(){
                    document.getElementById("guanggao").style.display="block";
//                    clearInterval(setInterval("showAd()",2000));
//                    清除显示图片
                    clearInterval(time);
                    time =setInterval("hiddenAd()",4000);
                }
//                书写隐藏图片
                function hiddenAd(){
                    document.getElementById("guanggao").style.display="none";
//                    clearInterval(setInterval("hiddenAd()",4000))
//                     清除显示图片
                     clearInterval(time);
                }
                
            
        </script>
        <style type="text/css">
        #father{
            border: 0px solid black;
            width: 1300px;
            height: 2367px;
            margin: auto;
        }
        .top{
            border: 0px solid black;
            width: 33.1%;
            height: 50px;
            float: left;
        }
        #menu{
            border: 0px solid blue;
            background: black;
            width: 1300px;
            height: 50px;
        }
        #clearn{
            clear: both;
        }
        #product{
            border: 0px solid blue;
            width: 1300px;
            height: 600px;
        }
        #product_top{
            border: 0px solid blue;
            width: 1300px;
            height: 80px;
        }
        #product_bottom{
            border: 0px solid blue;
            width: 1300px;
            height: 520px;
        }
        #product_left{
            border: 0px solid red;
            width: 185px;
            height: 520px;
            float: left;
        }
        #big{
            border: 0px solid red;
            width: 555px;
            height: 260px;
            float: left;
        }    
        #small{
            border: 0px solid red;
            width:183px;
            height: 260px;
            float: left;
            text-align: center;
        }
        #abc{
            text-align: center;
        }
        </style>
    </head>
    <body >
        <div id="father">
            <div id="">
                <img src="../img/弹出广告几秒后自动关闭.jpg" style="width: 100%; display: none;" id="guanggao"/>
            </div>
            <!--1logo部分-->
            <div id="" >
                <div class="top">
                    <img src="../img/logo2.png" style="height: 48px;" />    
                </div>
                <div class="top">
                    <img src="../img/header.png" style="height: 48px;" />
                </div>
                <div class="top" style="height: 49px;" >
                    <a href="#">登陆</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                    </div>
                <div id="clearn">
                    
                </div>
                
            </div>
            <!--2导航栏部分-->
            <div id="menu">
                <ul>
                    <a href="#"><li style="display: inline; font-size: 25px; color: white;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li style="display: inline; color: white;">电脑办公</li></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li style="display: inline;color: white;">手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li style="display: inline;color: white;">鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li style="display: inline;color: white;">育婴保健</li></a>
                    
                </ul>
                
            </div>
            <!--3滚动图片-->
            <div id="">
                <img src="../img/1.jpg" width="100%" id="abc" />
            </div>
            <!--4最新产品-->
            <div id="product">
                <div id="product_top">
                    
                    <font style="font-size: 25px;">最新商品&nbsp;&nbsp;&nbsp;&nbsp;</font><img src="../img/title2.jpg "/>
                    
                </div>
                <div id="product_bottom">
                    <div id="product_left">
                        <img src="../img/big01.jpg" style="width: 100%;height: 100%;" />
                    </div>
                    <div id="product_right">
                        <div id="big">
                            <img src="../img/middle01.jpg" style="width: 100%; height: 100%;"/>
                            
                        </div>
                        <div id="small">
                            <img src="../img/small04.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small01.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small03.jpg" /><br />
                            <font style="color: gray;">电饭锅</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small05.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small06.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small07.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small08.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small09.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small06.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        
                    </div>
                </div>
                
            </div>
            <!--5广告部分-->
            <div id="">
                <img src="../img/ad.jpg" style="width: 100%;height: 100%;"/>
                
            </div>
            <!--6热门产品-->
            <div id="product">
                <div id="product_top">
                    
                    <font style="font-size: 25px;">热门商品&nbsp;&nbsp;&nbsp;&nbsp;</font><img src="../img/title2.jpg "/>
                    
                </div>
                <div id="product_bottom">
                    <div id="product_left">
                        <img src="../img/big01.jpg" style="width: 100%;height: 100%;" />
                    </div>
                    <div id="product_right">
                        <div id="big">
                            <img src="../img/middle01.jpg" style="width: 100%; height: 100%;"/>
                            
                        </div>
                        <div id="small">
                            <img src="../img/small04.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small01.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small03.jpg" /><br />
                            <font style="color: gray;">电饭锅</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small05.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small06.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small07.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small08.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small09.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        <div id="small">
                            <img src="../img/small06.jpg" /><br />
                            <font style="color: gray;">空调</font>
                            <p>
                                <font style="color: red;">$399</font>
                            </p>
                        </div>
                        
                    </div>
                </div>
                
            </div>
            <!--广告图片-->
            <div id="">
                <img src="../img/footer.jpg" style="width: 100%;height: 100%;"/>
            </div>
            <!--友情链接和地址-->
            <div id="abc">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>    
                <a href="#">招贤纳士</a>    
                <a href="#">法律声明</a>    
                <a href="#">友情链接</a>    
                <a href="#">支付方式</a>    
                <a href="#">配送方式</a>    
                <a href="#">服务声明</a>    
                <a href="#">广告声明</a>    
                <p>
                    Copyright © 2005-2016 传智商城 版权所有     
                </p>
            </div>
            
            
        </div>
    </body>
</html>

案例2：——表单内容不能为空

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
        <script type="text/javascript">
            function check(){
//                获取元素
            document.getElementById("user")    
//            alert("fhh")
//            获取元素的数据
            var uvalue =document.getElementById("user").value
            if(uvalue==""){
                alert("用户名不能为空")
                return false;
            }
            var a =document.getElementById("password").value
            if(){
                alert("密码格式不正确")
                return false;
            }
            var a =document.getElementById("repassword").value
            if(a==""){
                alert("再次密码不能为空")
                return false;
            }
            var n =document.getElementById("amail").value
            if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(n)){
                alert("邮箱格式不正确")
                return false;
            }
            }
        </script>
    </head>
    <body>
        <form action="#" method="get" onsubmit="return check()">
            用户名：<input type="text" name="user"  maxlength="3" placeholder="请输入用户名" id="user"/><br />
            密码：   <input type="password" name="password" id="password"/><br />
            确认密码：<input type="password"  name="password" id="repassword"/><br />
            性别：   <input type="radio" name="sex" value="nan" checked="checked"/>男  
                    <input type="radio" name="sex" value="nv"/>女<br />
            爱好：<input type="checkbox" name="love" value="篮球"/>篮球
                 <input type="checkbox" name="love" value="看电影"/>看电影
                 <input type="checkbox" name="love" value="数钱" checked="数钱"/>数钱<br />
            籍贯：<select name="city">
                <option>--请选择--</option>
                <option value="l" selected="selected">洛杉矶</option>
                <option value="b">波士顿</option>
                <option value="d">达拉斯</option>
                
            </select><br />
            上传文件：<input type="file" name="wenjian"/><br />
            邮箱：<input type="text" name="email" id="amail" /><br />
            自我介绍：<textarea name="jieshao" cols="10" rows="8"></textarea><br />
            注册：<input type="submit" value="注册你妹" /><br />
            普通按钮： <input type="button" value="按你妹"/><br />
            重置：<input type="reset" />
        </form>
    </body>
</html>

时间： 2024-07-31 04:48:17

js入门及代码实现的相关文章

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

Node.js入门：前后端模块的异同

通常有一些模块可以同时适用于前后端,但是在浏览器端通过script标签的载入JavaScript文件的方式与Node.js不同.Node.js在载入到最终的执行中,进行了包装,使得每个文件中的变量天然的形成在一个闭包之中,不会污染全局变量.而浏览器端则通常是裸露的JavaScript代码片段.所以为了解决前后端一致性的问题,类库开发者需要将类库代码包装在一个闭包内.以下代码片段抽取自著名类库underscore的定义方式. 1 (function () { 2 // Establish the

Node.js入门：异步IO

异步IO 在操作系统中,程序运行的空间分为内核空间和用户空间.我们常常提起的异步I/O,其实质是用户空间中的程序不用依赖内核空间中的I/O操作实际完成,即可进行后续任务. 同步IO的并行模式 多线程单进程    多线程的设计之处就是为了在共享的程序空间中,实现并行处理任务,从而达到充分利用CPU的效果.多线程的缺点在于执行时上下文交换的开销较大,和状态同步(锁)的问题.同样它也使得程序的编写和调用复杂化. 单线程多进程 为了避免多线程造成的使用不便问题,有的语言选择了单线程保持调用简单化,采用启

Node.js入门：包结构

JavaScript缺少包结构.CommonJS致力于改变这种现状,于是定义了包的结构规范(http://wiki.commonjs.org/wiki/Packages/1.0 ).而NPM的出现则是为了在CommonJS规范的基础上,实现解决包的安装卸载,依赖管理,版本管理等问题.require的查找机制明了之后,我们来看一下包的细节. 一个符合CommonJS规范的包应该是如下这种结构: 一个package.json文件应该存在于包顶级目录下 二进制文件应该包含在bin目录下. JavaSc

Node.js入门：模块机制

CommonJS规范  早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来实现的,在这样的背景之下,一没有特色,二没有实用价值.但是随着JavaScript在前端的应用越来越广泛,以及服务端JavaScript的推动,JavaScript现有的规范十分薄弱,不利于JavaScript大规模的应用.那些以JavaScript为宿主语言的环境中,只有本身的基础原生对象和类型,更多的对

Node.js入门：事件机制

Evented I/O for V8 JavaScript 基于V8引擎实现的事件驱动IO. 事件机制的实现 Node.js中大部分的模块,都继承自Event模块(http://nodejs.org/docs/latest/api/events.html ).Event模块(events.EventEmitter)是一个简单的事件监听器模式的实现.具有addListener/on,once,removeListener,removeAllListeners,emit等基本的事件监听模式的方法实现

Node.js入门：Node.js&amp;NPM的安装与配置

Node.js安装与配置  Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0.6.x的版本上介绍Node.js的安装和配置.(本文一律以0.6.1为例,0.6的其余版本,只需替换版本号即可.从http://nodejs.org/#download可以查看到最新的二进制版本和源代码). Windows平台下的Node.js安装 在过去,Node.js一直不支持在Windows平台下原生

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

Ember.js 入门指南——属性传递

1,传递参数到组件上 每个组件都是相对独立的,因此任何组件所需的数据都需要通过组件的属性把数据传递到组件中. 比如上篇<Ember.js 入门指南--组件定义>的第三点"{{component item.pn post=item}}"就是通过属性post把数据传递到组件foo-component或者bar-component上.如果在index.hbs中是如下方式调用组件那么渲染之后的页面是空的. {{component item.pn}} 请读者自己修改index.hbs