javascript学习

作者: 耀敬业 | 来源:发表于2018-09-26 13:38 被阅读0次

javascripte学习

一、常用互动方法

如何向网页中输入内容, 如何与浏览器窗口进行交互, 通过简单的对象方法就可以轻松实现.

1.引用外部js文件

<script src="script.js"></script>

2.输入内容

<script type="text/javascript">
  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

3.警告(Alert消息对话框)

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

4.确认(confirm消息对话框)

<script type="text/javascript">
  function rec(){
    var mymessage=confirm("请问您是女士吗?");
    if(mymessage==true)
    {
        document.write("你是女士!");
    }
    else
    {
        document.write("你是男士!");
    }
  }    
  </script>

5.提问(prompt 消息对话框)

<script type="text/javascript">
  function rec(){
    var score; //score变量，用来存储用户输入的成绩值。
    score = prompt("请输入您的成绩:");
    if(score>=90)
    {
       document.write("你很棒!");
    }
    else if(score>=75)
    {
       document.write("不错吆!");
    }
    else if(score>=60)
    {
       document.write("要加油!");
    }
    else
    {
       document.write("要努力了!");
    }
  }
  </script>

6.打开新窗口(window.open)

window.open([URL], [窗口名称], [参数字符串])

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open('http://www.imooc.com','_bank','width=600,height=400,top=200px,left=0px');

  } 
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>

7.关闭窗口

<script type="text/javascript">
    var mywin=window.open("http://www.imooc.com");
    var page = confirm("是否关闭窗口?")
    if (page == true){
        mywin.close();
        alert("已关闭窗口")
    }else{
        alert("窗口尚未关闭!")
    }
  </script>

二、DOM操作

如何用JavaScript去操作HTML元素和CSS样式, 实现简单的操作

2.1通过ID获取元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>
</body>
</html>

2.2 innerHTML 属性

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar= document.getElementById("con")         ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML = "Hello, world!"
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

2.3改变 HTML 样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <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>
</body>
</html>

2.4 显示和隐藏(display属性)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
            var mychar = document.getElementById("con");
            mychar.style.display = "none";
        }  
        function showtext()  
        {  
            var mychar = document.getElementById("con");
            mychar.style.display = "block";
        }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

2.5 控制类名(className属性)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className = "one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className = "tow"
       }
    </script>
</body>
</html>

三、事件

事件	说明
onclick	鼠标点击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfoucs	光标聚集
onblur	光标离开
onload	网友导入
onunload	关闭网页

四、Date 日期对象

方法名称	功能描述
get/setDate()	返回/设置日期
get/setFullYear()	返回/设置年份,用四位数字
get/setYear()	返回/设置年份
get/setMonth()	返回/设置月份
get/setHours()	返回/设置小时, 24小时制
get/setMinutes()	返回/设置分钟数
get/setSeconds()	返回/设置秒钟数
get/setTime()	返回/设置时间(毫秒为单位)

五、数组方法

方法	描述
concat()	连接两个或者更多的数组, 并返回结果
join()	把数组的所有元素放入一个字符串, 元素通过指定的分隔符进行分各
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或者更多元素, 并返回新的长度
reverse()	颠倒数组中元素的第一元素
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组元素进行排序
splice()	删除元素, 并向数组添加新元素
toSource()	返回该对象的源代码
toString()	把数组转换为字符串, 并返回结果
toLocaleString()	把数组转换为本地数组, 并返回结果
unshift()	向数组开头添加一个或更多元素, 并返回新的长度
valueOf()	返回数组对象的原始值

六、计时器

方法	描述
setTimeout()	指定的延迟时间之后执行代码
cleartimecot()	取消setTimeout()设置
setinterval()	每隔指定的时间执行代码
clearinterval()	取消setinterval()设置

七、Screen对象

属性	描述
availHeight	窗口可以使用的屏幕高度, 单位像素
availWidth	窗口可以使用的屏幕宽度,单位像素
colorDepth	用户浏览器表示的颜色位数, 通常为32位(每像素的位数)
pixelDepth	用户浏览器表示的颜色位数, 通常为32位(每像素的位数)(IE不支持此属性)
height	屏幕的高度, 单位像素
width	屏幕的宽度, 单位像素

八、DOM对象,控制HTML元素

掌握如何控制HTML基本元素, 如何在文档中选取单独的元素, 如何创建、插入和删除元素, 并修改样式等.

|方法|说明|获得
|:---|:---|
|getElementById|通过指定id获得元素|一个
|getElementsByName|通过元素名称name属性获得元素|一组
|getElementByTagName|通过标签名称获得元素|一组

网友评论

本文标题：javascript学习

本文链接：https://www.haomeiwen.com/subject/sgvdoftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！