前端-----JavaScript

package javascript;

public class javascript {

//javascripte  write写
//<script type="text/javascript">
//    var munum=8;
// document.write(munum)
//</script>

 //条件判断
//if(条件)
//    { 条件成立时执行的代码 }
//else
//    { 条件不成立时执行的代码 }

//js输出空格
   //1.  nbsp;
   //2.css样式

//换行
//<script type="text/javascript">
//    var mystr="我是";
//    var mychar="JavaScript";
//    document.write(mychar+"</br>")
//            document.write(mystr+mychar+"的忠实粉丝")
//
//  </script>

    //JavaScript-警告（alert 消息对话框）
//    <script type="text/javascript">
//    var mynum = 30;
//    alert("hello!");
//    alert(mynum);
//</script>

    //JavaScript-确认（confirm 消息对话框）
    // confirm(str);
//    function rec(){
//        var mymessage= confirm("你喜欢js吗?")       ;
//        if(mymessage==true)
//        {
//            document.write("你是女士!");
//        }
//        else
//        {
//            document.write("你是男士!");
//        }
//    }

    //JavaScript-提问（prompt 消息对话框）
    //prompt(str1, str2);
//    str1: 要显示在消息对话框中的文本，不可修改
//    str2：文本框中的内容，可以修改
    //1. 点击确定按钮，文本框中的内容将作为函数返回值
    //2. 点击取消按钮，将返回null

    //JavaScript-打开新窗口（window.open）
    //JavaScript-关闭窗口（window.close）

    //通过id获取标签值
    //document.getElementById(“id”)

    //innerHTML 属性  innerHTML 属性用于获取或替换 HTML 元素的内容。
    //Object.innerHTML
    //修改:  mychar.innerHTML="he"

    //改变 HTML 样式
    //Object.style.property=new style;

//    <h2 id="con">I love JavaScript</H2>
//  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
//  <script type="text/javascript">
//    var mychar= document.getElementById("con");
//    mychar.style.color="red";
//    mychar.style.backgroundColor="#CCC"
//    mychar.style.width="300px"
//
//
//
//  </script>

    //显示和隐藏（display属性）
    //Object.style.display = value
    //"none":影藏 "block":显示

    //控制类名（className 属性）
    //object.className = classname

//    function add(){
//        var p1 = document.getElementById("p1");
//        p1.className="one";
//    }

    //定义"取消设置"的函数  removeAttribute
//    function que(){
//        var message=confirm("确定要取消?");
//        if(message=true){
//            var a=document.getElementById("txt")
//            a.removeAttribute("style")
//        }
//
//    }

    //换行
    //   "a"+"</br>"

//    提示：获取元素的值设置和获取方法为：例：赋值
//    ：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；

    //var Udate=new Date(); 日期对象
    //var d = new Date(2012, 10, 1);
    //get/setFullYear()设置年份     Udate.getFullYear
    //getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成
    // get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

    //大小写转换 var mynum=mystr.toUpperCase(); toLowerCase()

    //返回指定位置的字符  stringObject.charAt(index)
    //返回指定的字符串首次出现的位置  stringObject.indexOf(substring, startpos)  substring指定的字符串 startpos取值位置,可省略
    //字符串分割split()    stringObject.split(separator,limit)  如果传入空字符串,每个字符都被分割 limit分割次数
    //提取字符串substring()  stringObject.substring(startPos,stopPos)  开始位置,结束位置
    //提取指定数目的字符substr()  stringObject.substr(startPos,length)  如果starpos负数,从尾部算起
    //向上取整ceil()  document.write(Math.ceil(3.3))
    //向下取整floor()
    //四舍五入round()
    //随机数 random()
    //连接多个数组 arrayObject.concat(array1,array2,...,arrayN)
    //指定分隔符连接数组元素join() arrayObject.join("分隔符") 分隔符省略就用逗号  把数组所有成员变成字符串
    //reverse() 方法用于颠倒数组中元素的顺序。  会改变原来数组
    // slice() 方法可从已有的数组中返回选定的元素。
    //数组排序 arrayObject.sort(方法函数) 1.如果不指定<方法函数>，则按unicode码顺序排列。2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
//    function sortNum(a,b) {
//        return a - b;
//        //升序，如降序，把“a - b”该成“b - a”
//    }

//
//    var myDate = new Date();
//myDate.getYear();        //获取当前年份(2位)
//myDate.getFullYear();    //获取完整的年份(4位,1970-????)
//myDate.getMonth();       //获取当前月份(0-11,0代表1月)
//myDate.getDate();        //获取当前日(1-31)
//myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
//myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
//myDate.getHours();       //获取当前小时数(0-23)
//myDate.getMinutes();     //获取当前分钟数(0-59)
//myDate.getSeconds();     //获取当前秒数(0-59)
//myDate.getMilliseconds();    //获取当前毫秒数(0-999)
//myDate.toLocaleDateString();     //获取当前日期
//    var mytime=myDate.toLocaleTimeString();     //获取当前时间
//myDate.toLocaleString( );        //获取日期与时间

    //数组添加元素
    //1、push() 结尾添加
    //2、unshift() 头部添加

//    parseInt() 字符串类型转成整型。

    //JavaScript 计时器
    //setInterval(代码,交互时间); 在执行时,从载入页面后每隔指定的时间执行代码。  间歇调用,重复执行代码
    //clearInterval(id_of_setInterval)  取消计时器 var i=setInterval("clock()",100);   onclick="clearInterval(i)"
    //setTimeout() 超时调用 计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 setTimeout(代码,延迟时间);

    //History 对象
    //window.history.[属性|方法]
    // var HL =window.history.length
    //back() forward() go()

    //Navigator对象   document.write(navigator.appVersion);
    //

    //screen对象  screen对象用于获取用户的屏幕信息。
    // window.screen.属性  1. screen.height 返回屏幕分辨率的高
    //2. screen.width 返回屏幕分辨率的宽

    //1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
    //
    //2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

    //getElementsByName()方法

    //getElementsByTagName()方法 返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
    //1. Tagname是标签的名称，如p、a、img等标签名。

    //. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
    //
    //2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
    //
    //3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

    //getAttribute()方法 通过元素节点的属性名称获取属性的值。  非标签内部的值
    //setAttribute()方法  setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
    //类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

//访问子节点childNodes
   // 访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
    //elementNode.childNodes  返回一个数组
    //

    //访问父节点parentNode
    //elementNode.parentNode
    //elementNode.parentNode.parentNode 访问祖节点
    //elementNode就是某个子节点元素

    //innerHTML 输出标签内的值 <a>值</a>

    //访问兄弟节点
    //nodeObject.nextSibling
    //nodeObject.previousSibling

    //插入节点appendChild()  在已有的子节点最后插入
    //在指定节点的最后一个子节点列表之后添加一个新的子节点。
    //appendChild(newnode)

    //<script type="text/javascript">
    //
    //  var otest = document.getElementById("test");  //父节点
    //  var newnode=document.createElement("li");
    //  newnode.innerHTML="PHP"
    //
    //otest.appendChild(newnode);

    //插入节点insertBefore()
    //insertBefore() 方法可在已有的子节点前插入一个新的子节点。
    //insertBefore(newnode,node);
    //newnode: 要插入的新节点。
    //
    //node: 指定此节点前插入节点。

    //删除节点removeChild()
    //removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
    //nodeObject.removeChild(node)
    //如果要完全删除对象，给 x 赋 null 值
    //要用倒叙删  正序删会有一直重复

    //替换元素节点replaceChild()
    //replaceChild 实现子节点(对象)的替换。返回被替换对象的引用
    //node.replaceChild (newnode,oldnew )

    //创建元素节点createElement
    //createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
    //document.createElement(tagName)

    //创建元素节点createElement
    //document.createElement(tagName)

    //方法1
    //<script type="text/javascript">
    //   var body = document.body;
    //   var input = document.createElement("input");
    //   input.type = "button";
    //   input.value = "创建一个按钮";
    //   body.appendChild(input);
    // </script>

    //方法2
    //<script type="text/javascript">
    //   var body= document.body;
    //   var btn = document.createElement("input");
    //   btn.setAttribute("type", "text");
    //   btn.setAttribute("name", "q");
    //   btn.setAttribute("value", "使用setAttribute");
    //   btn.setAttribute("onclick", "javascript:alert('This is a text!');");
    //   body.appendChild(btn);
    //</script>

    //<script type="text/javascript">
    //var main = document.body;
    ////创建链接
    //function createa(url,text)
    //{
    //    var a=document.createElement("a");
    //    a.href=url;
    //    a.innerHTML=text;
    //    a.type.color="red";
    //    main.appendChild(a);
    //
    //
    //
    //}
    //// 调用函数创建链接
    //createa("https://www.baidu.com/","百度")
    //
    //</script>

    //创建文本节点createTextNode
    //document.createTextNode(data)

    //浏览器窗口可视区域大小
    //?  window.innerHeight - 浏览器窗口的内部高度
    //
    //?  window.innerWidth - 浏览器窗口的内部宽度

    //网页尺寸scrollHeight
    //var w=document.documentElement.scrollWidth
    //   || document.body.scrollWidth;
    //var h=document.documentElement.scrollHeight
    //   || document.body.scrollHeight;

    //网页尺寸offsetHeight
    //offsetHeight = clientHeight + 滚动条 + 边框。
    //var w= document.documentElement.offsetWidth
    //    || document.body.offsetWidth;
    //var h= document.documentElement.offsetHeight
    //    || document.body.offsetHeight;

    //表格
    //tr是行，有几个就是几行，包括着td标签
    //
    //td是列，有几个就是几列
    //
    //th是加粗行的列的开头，同td的位置一样，都是被td包

    //设置表格宽度
    // var newnew1=document.createElement("th");
    //  newnew1.height="50px"

    //改变背景色
    //  m[1].style.backgroundColor='red';

    //Ul li无序列表标签  li标签有个小圆点
    //同行显示  去除小圆点   li{float:left; list-style:none}
    //padding-left:10px 设置边距
    //加边框 div{border-top:1px solid #000}

    //有序列表
    //<ol>
    //   <li>信息</li>
    //   <li>信息</li>
    //   ......
    //</ol>

    //div
    //在网页制作过程过中，可以把一些独立的逻辑部分划分出来，
    // 放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

    //内联元素为单行
    //常用的块状元素有：  块级标签都是盒模型
    //
    //<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    //
    //常用的内联元素有： 、元素的高度、宽度及顶部和底部边距不可设置；
    //
    //<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    //
    //常用的内联块状元素有：
    //
    //<img>、<input>

    //先来说一说流动模型，流动（Flow）是默认的网页布局模式。
    // 也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

    //第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，
    // 因为在默认状态下，块状元素的宽度都为100%。
    // 实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

    //浮动模型
    //可以让块级元素在同一行显示   float:left;

}