为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
JavaScript入门篇 _学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript入门篇

慕课官方号 页面重构设计
难度入门
时长 1小时35分
  • 常用互动方法总结

    document.write(str)   写入一串字符

    alert()  弹窗提示 

    confirm(str)    消息对话框 

    生成确定(true)和取消(false)两个按钮

    根据返回值进行判断执行区间 

    通常声明一个变量接收confirm返回值   再用if...else结构判断执行代码

    prompt(str,str2)消息对话框 

    prompt中的str2是可以给用户修改的 而且str2就是这个方法的返回值

    如果用户点击取消  则返回null

    window.open(网址/路径,打开行式,打开的样式) 打开一个网址或者文件(后边参数不记得就回来查)

    <窗口对象>.close() 关闭指定窗口



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

    2019-05-23

  • <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    <title>javascript</title>
    <style type="text/css">
    body{font-size:12px;}
    #txt{
        height:400px;
        width:600px;
        border:#333 solid 1px;
        padding:5px;}
    p{
        line-height:18px;
        text-indent:2em;}
    </style>
    </head>
    <body>
      <h2 id="con">JavaScript课程</H2>
      <div id="txt">
         <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
            <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
            <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
            <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
      </div>
      <form>
      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
        <input type="button" value="改变颜色" onclick="colorchange()">  
        <input type="button" value="改变宽高" onclick="setWandH()">
        <input type="button" value="隐藏内容" onclick="hid()">
        <input type="button" value="显示内容" onclick="show()">
        <input type="button" value="取消设置" onclick="cancel()">
      </form>
      <script type="text/javascript">
    //定义"改变颜色"的函数
    {
        function colorchange()
        {
            var ob=document.getElementById("txt");
            ob.style.color="green";
            ob.style.backgroundColor="Blue";
        }
        function setWandH(){
            document.getElementById("txt").style.width="200px";
            document.getElementById("txt").style.height="400px";
        }
        function hid(){
            document.getElementById("txt").style.display="none";
        }
        function show(){
             txt.style.display="block";
        }
        function cancel(){
            var message=confirm("取消设置?");
            if(message==true)
            {
               document.getElementById("txt").style.display="block";
               document.getElementById("txt").style.width="600px";
               document.getElementById("txt").style.height="400px";
               document.getElementById("txt").style.color="black";
               document.getElementById("txt").style.backgroundColor="white";
            }
        }
    }

    //定义"改变宽高"的函数


    //定义"隐藏内容"的函数


    //定义"显示内容"的函数


    //定义"取消设置"的函数



      </script>
    </body>
    </html>

    重置重置    txt.removeAttribute('style');

    查看全部
    2 采集 收起 来源:编程挑战

    2019-05-23

  • <!DOCTYPE html>
    <html>
     <head>
      <title> new document </title>  
      <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
      <script type="text/javascript">  
        function openWindow()
        {
            var my=confirm("要打开新窗口吗");
            if(my==true)
            window.open("http://www.imooc.com/","_blank","width=400,height=500,menubar=no,toolbar=no");
            
        }// 新窗口打开时弹出确认框,是否打开

        // 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/

        //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
        
        
      </script>
     </head>
     <body>
          <input type="button" value="新窗口打开网站" onclick="openWindow()" />
     </body>
    </html>

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

    2019-05-23

  • confirm(str);

    str:在消息对话框中要显示的文本

    返回值:boolean值

    返回值:

    当用户点击确定返回"true";

    当用户点击取消返回"flase";

    通过返回值可以判断用户点击了什么按钮。

    查看全部
  • function 函数名()

    {

        函数代码;

    }

    定义函数的语法

    查看全部
  • var 定义变量的关键字

    function 定义函数的关键字


    查看全部
    1. 关于空格

    2. 用"&nbsp";

    3.  使用CSS样式来解决

       document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");

    查看全部
  • else不需要写条件。


    查看全部
  • 重置    txt.removeAttribute('style');

    查看全部
    0 采集 收起 来源:编程挑战

    2019-05-23

  • 变量名.removeAttribute('style');

    清除样式

    查看全部
    1 采集 收起 来源:编程挑战

    2019-05-23

  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />

    <title>javascript</title>

    <style type="text/css">

    body{font-size:12px;}

    #txt{

        height:400px;

        width:600px;

    border:#333 solid 1px;

    padding:5px;

    overflow: scroll;

    }

    p{

    line-height:18px;

    text-indent:2em;}

    </style>

    </head>

    <body>

      <h2 id="con">JavaScript课程</H2>

      <div id="txt"  > 

         <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>

            <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>

            <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>

            <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>

      </div>

      

      <form>

      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->

        <input type="button" value="改变颜色" onclick="changecolor()">  

        <input type="button" value="改变宽高" onclick="changewidhigh()">

        <input type="button" value="隐藏内容" onclick="displaycontent()">

        <input type="button" value="显示内容" onclick="showcontent()">

        <input type="button" value="取消设置" onclick="cancelsetting()">

      </form>

      <script type="text/javascript">

    //定义"改变颜色"的函数


    var varchar = document.getElementById("txt");


    function changecolor(){

      var inputColor = window.prompt("请输入要改变的字体颜色","输入颜色哦");

        varchar.style.color = inputColor;

        var inputBgColor = window.prompt("请输入要改变的背景颜色","输入背景颜色哦");


        varchar.style.backgroundColor=inputBgColor;

      }

    //定义"改变宽高"的函数

    function changewidhigh(){

        varchar.style.width=window.prompt("输入要改变的宽","请输入数字")+"px";

        varchar.style.height=window.prompt("请输入要改变的高","请输入数字哦")+"px";

    }


    //定义"隐藏内容"的函数

    function displaycontent(){

        varchar.style.display="none";

    }


    //定义"显示内容"的函数

    function showcontent(){

        varchar.style.display="block";

    }


    //定义"取消设置"的函数


    function cancelsetting(){


        if(confirm("尼玛你要取消啊?")==true){

            varchar.removeAttribute("style");

        }

        else{

          alert("不取消设置"

            );

        }

    }



      </script>

    </body>

    </html>


    查看全部
    0 采集 收起 来源:编程挑战

    2019-05-23

  • function 函数名(){
         函数代码;
    }


    查看全部
  • 定义变量

    var 变量名

    查看全部
  • window.open('需要打开的网页链接地址','打开的网页在哪个位置','打卡的网页内的属性');   从新打开一个网页(_blank)需要设置网页内的属性  在顶部打开(_top)或在当前页面打开(_self)则不需要设置属性选项

    查看全部
  •  document.getElementById(“id”) 通过ID获取元素

    查看全部

举报

0/150
提交
取消
课程须知
该课程是针对新手的一个简单基础的课程,让您快速了解JS,通过一些简单的代码编写体会JS。如果您已经对JS有所了解,可以跳过本课程,学习JS进阶课程,进一步学习JS相应的基础知识。学习本课程,希望您至少具备HTML/CSS基础知识,认识常用的标签。
老师告诉你能学到什么?
1. 理解JavaScript基础语法; 2. 掌握常用语句的使用方法; 3. 学会如何获取DOM元素及进行简单操作。
友情提示:

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