为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
JavaScript进阶篇_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 JavaScript进阶篇

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
最热 最新
  • 慕慕5528853

    前后引号标点要一致，规范固定写法的标点符号，括号数量对映

    查看全部
    0 采集 收起 来源：编程练习

    2018-05-23

  • 胡萝卜大神

     function count(){

        var v1=document.getElementById("txt1").value;

        var v2=document.getElementById("txt2").value;

        var k=document.getElementById("select").value;

        var a=document.getElementById("fruit").value

         switch(k)

         {

         case '+':  

             a=parseInt(v1)+parseInt(v2);

         break;

         

         case '-':  

             a=parseInt(v1)-parseInt(v2);

         break;

         case '*':  

             a=parseInt(v1)*parseInt(v2);

         break;

          default:

             a=parseInt(v1)/parseInt(v2);

           

         }


        

        document.getElementById("fruit").value=a;


    查看全部
    0 采集 收起 来源：编程练习

    2018-05-23

  • 15信科马千梅

    运行结果为 ： https://img1.sycdn.imooc.com//5b0533fa0001a94d06460589.jpg

    查看全部
    0 采集 收起 来源：加载事件（onload）

    2018-05-23

  • 15信科马千梅

    运行结果为：

    https://img1.sycdn.imooc.com//5b053302000199f803890304.jpg

    https://img1.sycdn.imooc.com//5b05330300010a3803310296.jpg


    查看全部
    0 采集 收起 来源：内容选中事件（onselect）

    2018-05-23

  • 15信科马千梅

    运行结果为： https://img1.sycdn.imooc.com//5b0531a30001b11504320269.jpg

    查看全部
    0 采集 收起 来源：鼠标移开事件（onmouseout）

    2018-05-23

  • 小张嗷

    不允许使用JavaScript关键字和保留字做变量名。


    查看全部
    0 采集 收起 来源：给变量取个名字(变量命名)

    2018-05-23

  • 牛逼不哄哄

    编程练习

    获取元素的值设置和获取方法为：例：

    赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；


    <!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
       
    //获取第一个输入框的值
    var v1 = document.getElementById('txt1').value;
//获取第二个输入框的值
var v2 = document.getElementById('txt2').value;
//获取选择框的值
var res;
var myselect = document.getElementById('select');
    var index=myselect.selectedIndex ;
    var opt = myselect.options[index].value;
switch(opt){
    case '+':
        res = parseFloat(v1)+parseFloat(v2);
        break;
    case '-':
        res = parseFloat(v1)-parseFloat(v2);
        break;
    case '*':
        res = parseFloat(v1)*parseFloat(v2);
        break;
    case '/':
        res = parseFloat(v1)/parseFloat(v2);
        break;
}
document.getElementById('fruit').value=res;
    
   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' onclick="count()" /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>

    - 字符串转浮点数

    - 获取选择框中的内容 https://www.jianshu.com/p/e09bdcd1850f 

    var opt = document.getElementById('select').value;  // 这样也行


    查看全部
    0 采集 收起 来源：编程练习

    2018-05-23

  • 牛逼不哄哄

    卸载事件（onunload）

    当用户退出页面时（页面关闭、页面刷新等），触发onunload事件，同时执行被调用的程序。

    注意：不同浏览器对onunload事件支持不同。


    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">   
     window.onunload = onunload_message;   
     function onunload_message(){   
        alert("您确定离开该网页吗？");   
    }   
</script>   
</head>
<body>
  欢迎学习JavaScript。
</body>
</html>


    查看全部
    0 采集 收起 来源：卸载事件（onunload）

    2018-05-23

  • 牛逼不哄哄

    加载事件（onload）

    事件会在页面加载完成后，立即发生，同时执行被调用的程序。
    注意：

    1.  加载页面时，触发onload事件，事件写在<body>标签内。

    2. 此节的加载页面，可理解为打开一个新页面时。如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body onload="message()">
  欢迎学习JavaScript。
</body>
</html>


    查看全部
    0 采集 收起 来源：加载事件（onload）

    2018-05-23

  • 牛逼不哄哄

    文本框内容改变事件（onchange）

    通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
  function message(){
    alert("您改变了文本内容！"); }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>


    查看全部
    0 采集 收起 来源：文本框内容改变事件（onchange）

    2018-05-23

  • 牛逼不哄哄

    内容选中事件（onselect）

    选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。


    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
  function message(){
    alert("您触发了选中事件！"); }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>


    查看全部
    0 采集 收起 来源：内容选中事件（onselect）

    2018-05-23

  • 牛逼不哄哄

    失焦事件（onblur）

    onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。


    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
  function message(){
    alert("请确定已输入密码后，在移开!"); }
</script>    
</head>
<body>
  <form>
   用户:<input name="username" type="text" value="请输入用户名！" >
   密码:<input name="password" type="text" value="请输入密码！" onblur="message()" >
  </form>
</body>
</html>


    查看全部
    0 采集 收起 来源：失焦事件（onblur）

    2018-05-23

  • 牛逼不哄哄

    光标聚焦事件（onfocus）

    当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。


    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
  <script type="text/javascript">
    function message(){
  alert("请选择，您现在的职业！");
}
  </script>
</head>
<body>
请选择您的职业：<br>
  <form>
    <select name="career" onfocus="message()"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body>
</html>


    查看全部
    0 采集 收起 来源：光标聚焦事件（onfocus）

    2018-05-23

  • 牛逼不哄哄

    鼠标移开事件（onmouseout）

    鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
  function message(){
    alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
  <a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>


    查看全部
    0 采集 收起 来源：鼠标移开事件（onmouseout）

    2018-05-23

  • 牛逼不哄哄

    鼠标经过事件（onmouseover）

    鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。


    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>


    查看全部
    0 采集 收起 来源：鼠标经过事件（onmouseover）

    2018-05-23

首页上一页786787788789790791792下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！
老师告诉你能学到什么？
通过JavaScript学习，掌握基本语法，制作简单交互式页面
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程