zoukankan      html  css  js  c++  java
  • js(JavaScript)与HTML

    一、语法要求

    1.书写js时应注意大小写。

    2.换行符代表一行完整的=代码的终止字符。

    3.代码间如在同一行,应用;(分号)分开。

    4.注释:单行注释//   多行注释/*  */

    二、变量

    1.java:先声明再使用,变量与类型必须相符。

    2.javascript:弱语言,可以不声明就使用,没有明确数据类型。

    3.声明后无赋值的情况下,其值为undefined代表未定义。

    4.可以赋值多次,以最后为准。

    5.无代码块的概念。

    6.隐式定义:直接赋值

      显示定义:使用var关键字

    7.范围:直接定义为全局变量,函数内为局部变量,与java类似。

    三、运算符

    1.赋值运算符:=,+=,-=,*=,/=,和%=

    2.算数运算符:+,-,*,/,%,++和--

    3.逻辑运算符:&&,||,!

    4.比较运算符:==(值相等),===(值和类型都相等),!=,>,<,>=,<=

    5.字符串操作:+

    四、数据类型

    1.number:数值;string:字符串;boolean:布尔

    2.undefined:未定义

    3.object:对象

    4.判断类型:typeof()

    五、交互

    1.alert 弹出框

    2.prompt 显示对话框,可以接收用户输入,并返回值

    3.confirm 确定框

    4.document.write 输出内容

    六、类型转换

    1.parseInt()   整数

    2.parseFloat()  浮点数

    3.eval   将字符串强制转换成表达式并返回结果

    4.typeof()  查询数值当前类型

    七、函数

    1.if语句

    if(条件表达式){
    
    }else if(条件表达式){
    
    }else{
    
    }

    2.switch语句

    switch(表达式){
        
    case  value1:
    语句体1;
    breakcase  value2:
    语句体2;
    breakcase  value3:
    语句体3;
    break; 
    
    。。。。
    
    default:
    语句体n;
    break;
    }

    3.for语句

    for(初始表达式;条件;增量表达式){
    语句块
    }

    4.while语句与do-while语句

    while(条件){
      语句块    
    }
    
    do{
     语句块
    }while(条件);
    break

     八、事件

    <!DOCTYPE html>
    <html>
    <body onload="startTime()">
    <p>JavaScript</p>
    
    <div id="div1">
    <p id="amd">HTML里面的一段话</p>
    </div>
    <div id="txt"></div>
    <script>
    //鼠标事件
    //onchange鼠标离开事件
    //onclick鼠标点击事件
    //ondblclick鼠标双击事件
    //onmousedown鼠标按下事件
    //onmouseup鼠标弹起事件
    //onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素
    
    //状态事件
    //onload进入页面加载事件
    //onunload退出文档
    //onchange值发生改变
    //onfocus获取鼠标焦点
    //onblur失去焦点
    //onresize调整窗口大小
    //onsubmit表单提交
    
    //一次性定时器
    //t=setTimeout("调用的方法",5000) 等待5秒调用方法
    //clearTimeout(t) 停止调用  取消setTimeout()
    //周期性定时器
    //t = setInterval("调用方法",时间)
    //clearInterval(t)
    
    //Date对象
    //时间 var d = new Date() 当前日期  
    //var da = new Date("2017/7/29 15:58")  指定时间字符串的日期对象   
    //var dat= new Date(500000)   指定毫秒数的日期对象
    //--------------获取方法--------------------------
    //d.getTime()距1970 年 1 月 1 日毫秒
    //d.getDate() 日
    //d.getMonth() 月 
    //d.getYear() 年
    //d.getHours() 小时
    //d.getMinutes()  分钟
    //d.getSeconds() 秒
    //d.getMilliseconds()  毫秒
    //d.getFullYear() 完整年
    //d.getDay()  星期
    //d.toUTCString()当日的日期(根据 UTC)转换为字符串
    //d.toLocaleString() 本地格式时间的字符串
    //d.getTimezoneOffset() 返回本地时间与GMT的时间差,以分钟为单位
    
    //算数  Math对象
    //Math.round(0.60)四舍五入,如0.6为1,0.50为1,0.49为0,-5.4为-5,-5.6为-6
    //Math.random() 来返回 0 到 1 之间的随机数
    //Math.max(数字1,数字2) 返回最大的值  
    //Math.min(数字1,数字2) 返回最小的值
    //Math.abs() 绝对值
    //Math.floor()  向下舍入
    //Math.ceil()   向上舍入
    //常数 Math.E
    //圆周率 Math.PI
    //2 的平方根 Math.SQRT2
    //1/2 的平方根 Math.SQRT1_2
    //2 的自然对数 Math.LN2
    //10 的自然对数 Math.LN10
    //以 2 为底的 e 的对数 Math.LOG2E
    //以 10 为底的 e 的对数 Math.LOG10E
    
    //window对象
    //open(url[,name[,features(新窗口的特征)]])
    //close()
    //alert()
    //confirm() 确认返回ture
    
    //document常用方法
    //write 写入
    //writeln 写入加换行符
    //getElementById()  从DOM获取指定ID节点对象
    
    //上方或移出元素时触发函数。
    function mOver(obj){
        obj.innerHTML="谢谢"
    }
    function mOut(obj){
        obj.innerHTML="把鼠标移到上面"
    }
    //首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,
    //会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
    function mDown(obj)
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="请释放鼠标按钮"
    }
    function mUp(obj)
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="请按下鼠标按钮"
    }
    
    function startTime(){
       var today=new Date()
       var h=today.getHours()
       var m=today.getMinutes()
       var s=today.getSeconds()
       m=checkTime(m)
       s=checkTime(s)
       document.getElementById('txt').innerHTML=h+":"+m+":"+s
       t=setTimeout('startTime()',500)
    }
    function checkTime(i){
       if (i<10){
         i="0" + i
       }
        return i
    }
    
    document.write("JS直接输出");
    function gb(){
     var x = document.getElementById("amd");
     x.innerHTML="改变其内容"
    }
    function changeImage()
    {
    element=document.getElementById('myimage')
      if (element.src.match("bulbon")){
         element.src="/i/eg_bulboff.gif";
      }else{
         element.src="/i/eg_bulbon.gif";
      }
    }
    //isNaN()检测是否为数字
    //toUpperCase()转化为大写
    //length字符串长度
    //indexOf("字符")字符首次出现的位置
    //match("特定的字符") 查找字符串中特定的字符,有返回字符,无返回null
    //replace(/查找字符/,"替换字符")替换字符
    function gbcss(){
       x=document.getElementById("amd") // 找到元素
       x.style.color="#ff0000";          // 改变样式
    }
    function cw(){
       try{
         alerta("asd");
       }catch(err){
         alert(err.message)
       }
    }
    try{
    var para=document.createElement("p");//创建一个新标签
    var node=document.createTextNode("添加的新内容");//创建一个新内容
    para.appendChild(node);//把内容添加到新标签中
    var element=document.getElementById("div1");//获取一个ID的元素
    element.appendChild(para);//把标签内容添加到元素里面
    }catch(err){
       alert(err.message)
    }
    //var parent=document.getElementById("div1");//获取父元素
    //var child=document.getElementById("amd");//获取标签
    //parent.removeChild(child);//从父元素中删除标签
    //var child=document.getElementById("amd");这两句话与上面异曲同工
    //child.parentNode.removeChild(child);//parentNode 属性来找到父元素
    
    //onerror错误调用事件
    //apos=value.indexOf("@")
    //apos1=value.indexOf(".")
    //dotpos=value.lastIndexOf("@")
    //dotpos1=value.lastIndexOf(".")
    
    
    //数组
    //数组1.concat(数组2) 合并数组
    //for (x in 数组对象) for in循环
    //数组.join() 组合字符串
    //数组.sort() 数组排序(数字按数字,字符按字符)
    
    //var luoji = new boolean(输入下面的)
    //0 是逻辑的 false
    //1 是逻辑的 true
    //空字符串是逻辑的 false
    //null 是逻辑的 false
    //NaN 是逻辑的 false
    //字符串 'false' 是逻辑的 true
    
    //var patt1=new RegExp("e");
    //patt1.test("e d")
    //test() 方法检索字符串中的指定值。返回值是 true 或 false。
    //exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有,则返回 null。
    //compile("字符A") 方法用于改变 RegExp 重新查找字符A
    
    
    //var w=window.innerWidth //浏览器窗口的内部宽度
    // document.documentElement.clientWidth
    // document.body.clientWidth;
    
    //var h=window.innerHeight //浏览器窗口的内部高度 
    // document.documentElement.clientHeight
    //document.body.clientHeight;
    //screen.availWidth - 可用的屏幕宽度
    //screen.availHeight - 可用的屏幕高度
    
    
    
    //var boolean = confirm("弹出内容"); 点击确定为true 取消为false
    //prompt("弹出内容","文本框内容")
    
    
    
    </script>
    
    <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
    <input type='button' onclick="gb()" value = "改变内容"/>
    <button type="button" onclick="gbcss()">改变CSS</button>
    <input type='button' onclick="alert('弹框')" value='弹框'/>
    <input type='button' onclick="cw()" value='错误'/><br/>
    <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1><br/>
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div><br/>
    <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
    </body>
    </html>

    九、String 操作  和样式

    <html>
    <body>
    
    <script type="text/javascript">
    /*
    anchor()    创建 HTML 锚。
    big()    用大号字体显示字符串。
    blink()    显示闪动字符串。
    bold()    使用粗体显示字符串。
    charAt()    返回在指定位置的字符。
    charCodeAt()    返回在指定的位置的字符的 Unicode 编码。
    concat()    连接字符串。
    fixed()    以打字机文本显示字符串。
    fontcolor()    使用指定的颜色来显示字符串。
    fontsize()    使用指定的尺寸来显示字符串。
    fromCharCode()    从字符编码创建一个字符串。
    indexOf()    检索字符串。
    italics()    使用斜体显示字符串。
    lastIndexOf()    从后向前搜索字符串。
    link()    将字符串显示为链接。
    localeCompare()    用本地特定的顺序来比较两个字符串。
    match()    找到一个或多个正则表达式的匹配。
    replace()    替换与正则表达式匹配的子串。
    search()    检索与正则表达式相匹配的值。
    slice()    提取字符串的片断,并在新的字符串中返回被提取的部分。
    small()    使用小字号来显示字符串。
    split()    把字符串分割为字符串数组。
    strike()    使用删除线来显示字符串。
    sub()    把字符串显示为下标。
    substr()    从起始索引号提取字符串中指定数目的字符。
    substring()    提取字符串中两个指定的索引号之间的字符。
    sup()    把字符串显示为上标。
    toLocaleLowerCase()    把字符串转换为小写。
    toLocaleUpperCase()    把字符串转换为大写。
    toLowerCase()    把字符串转换为小写。
    toUpperCase()    把字符串转换为大写。
    toSource()    代表对象的源代码。
    toString()    返回字符串。
    valueOf()    返回某个字符串对象的原始值。
    */
    var txt="Hello World!"
    document.write("<p>Anchor: " + txt.anchor() + "</p>")
    document.write("<p>Big: " + txt.big() + "</p>")
    document.write("<p>Small: " + txt.small() + "</p>")
    
    document.write("<p>Bold: " + txt.bold() + "</p>")
    document.write("<p>Italics: " + txt.italics() + "</p>")
    
    document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
    document.write("<p>Fixed: " + txt.fixed() + "</p>")
    document.write("<p>Strike: " + txt.strike() + "</p>")
    
    document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
    document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
    
    document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
    document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
    
    document.write("<p>Subscript: " + txt.sub() + "</p>")
    document.write("<p>Superscript: " + txt.sup() + "</p>")
    
    document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
    </script>
    
    </body>
    </html>
  • 相关阅读:
    物理机与虚拟机互通
    error while loading shared libraries: libevent-2.2.so.1: cannot open shared object file: No such file or directory
    DateTime.Now.ToFileTime
    洛谷-P2249 【深基13.例1】查找
    洛谷-P3817 小A的糖果
    洛谷-P3612 [USACO17JAN]Secret Cow Code S
    洛谷-P5019 铺设道路
    洛谷-P2437 蜜蜂路线
    洛谷-P1044 栈
    洛谷-P1255 数楼梯
  • 原文地址:https://www.cnblogs.com/zdf159/p/7255943.html
Copyright © 2011-2022 走看看