为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript入门篇

难度入门
时长 1小时35分
学习人数
综合评分9.57
5509人评价 查看评价
9.8 内容实用
9.5 简洁易懂
9.4 逻辑清晰
  • if(条件)
    { 条件成立时执行的代码 }

    else{ 条件不成立时执行的代码 }

    查看全部
  • 变量 用var定义

    var 变量名

    变量名可包含字母、数字、下划线或$,不能以数字开头,不能使用JavaScript关键词与JavaScript保留字。

    eg1.

    var mychar;
    mychar="javascript";


    eg2.

    var mynum = 6;

    查看全部
  • <!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 id = h1>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
            <p id = p1>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
            <p id = p2>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
            <p id = p3>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
      </div>
      <form>
      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
        <input type="button" value="改变颜色" onclick = "gcolor()">  
        <input type="button" value="改变宽高" onclick = "gkuangao()">
        <input type="button" value="隐藏内容" onclick = "yingcang()">
        <input type="button" value="显示内容" onclick = "xianshi()">
        <input type="button" value="取消设置" onclick = "huanyuan()">
      </form>
      <script type="text/javascript">
    //定义"改变颜色"的函数
    var zx = document.getElementById("h1");
    function gcolor(){
    zx.style.color = "red";
    zx.style.backgroundColor = "blue";
    }
    //定义"改变宽高"的函数
    var zv = document.getElementById("p1");
    function gkuangao(){
    zv.style.height = "300px";
    zv.style.width = "300px";
    }
    //定义"隐藏内容"的函数
    var zb = document.getElementById("p2");
    function yingcang(){
    zb.style.display = "none";
    }
    //定义"显示内容"的函数
    var zn = document.getElementById("p2");
    function xianshi(){
    zn.style.display = "block";
    }
    //定义"取消设置"的函
    function huanyuan(){
    var zc = confirm("是否取消设置");
    var zm = document.getElementById("txt");

        if(zc == true){
        zm.removeclass('style');}
    }


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

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

    2021-11-26

  • <!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 id = h1>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
            <p id = p1>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
            <p id = p2>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
            <p id = p3>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
      </div>
      <form>
      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
        <input type="button" value="改变颜色" onclick = "gcolor()">  
        <input type="button" value="改变宽高" onclick = "gkuangao()">
        <input type="button" value="隐藏内容" onclick = "yingcang()">
        <input type="button" value="显示内容" onclick = "xianshi()">
        <input type="button" value="取消设置" onclick = "huanyuan()">
      </form>
      <script type="text/javascript">
    //定义"改变颜色"的函数
    var zx = document.getElementById("h1");
    function gcolor(){
    zx.style.color = "red";
    zx.style.backgroundColor = "blue";
    }
    //定义"改变宽高"的函数
    var zv = document.getElementById("p1");
    function gkuangao(){
    zv.style.height = "300px";
    zv.style.width = "300px";
    }
    //定义"隐藏内容"的函数
    var zb = document.getElementById("p2");
    function yingcang(){
    zb.style.display = "none";
    }
    //定义"显示内容"的函数
    var zn = document.getElementById("p2");
    function xianshi(){
    zn.style.display = "block";
    }
    //定义"取消设置"的函
    function huanyuan(){
    var zc = confirm("是否取消设置");
    var zm = document.getElementById("txt");

        if(zc == true){
        zm.removeclass('style');}
    }


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

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

    2021-11-26

  • <!DOCTYPE HTML>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=gb18030">

            <title>插入js代码</title>



            <script type="text/javascript">

                document.write("开启JS之旅!");

            </script>

        </head>

        <body>

        </body>

    </html>

    查看全部
  • <!DOCTYPE HTML>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=gb18030">

            <title>插入js代码</title>



            <script type="text/javascript">

                document.write("开启JS之旅!");

            </script>

        </head>

        <body>

        </body>

    </html>

    查看全部
  • 确认(confirm 消息对话框)

    confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

    语法:

    confirm(str);

    参数说明:

    str:在消息对话框中要显示的文本返回值: Boolean值

    返回值:

    当用户点击"确定"按钮时,返回true
    当用户点击"取消"按钮时,返回false

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

    看下面的代码:

    <script type="text/javascript">
       var mymessage=confirm("你喜欢JavaScript吗?");
       if(mymessage==true)
       {   document.write("很好,加油!");   }
       else
       {  document.write("JS功能强大,要学习噢!");   }
    </script>

    查看全部
  • http://img1.sycdn.imooc.com//619eff550001b0fe04040535.jpg 

    js 

    if.....eles 判断语句

    查看全部
    • 程序命?
    • web 开发师 
    • 文本编辑器  
    • DOM
    查看全部
  • 元素节点即标签html、body、p
    文本节点即内容:li之类
    属性节点即属性:a标签里面的属性
    查看全部
    0 采集 收起 来源:认识DOM

    2021-11-21

  • 给元素设置className

    <p id="p1" class="one"/>

    获取元素,修改class

    var element = document.getElementById("p1");

    element.className = "two";

    查看全部
  • 获取元素

    var element = document.getElementById("id");

    element.innerHTML;

    element.style.display = "none";// 隐藏

    查看全部
  • 基本属性

    property

    backgroundColor

    height

    width

    color

    font

    fontSize

    fontFamily

    查看全部
    0 采集 收起 来源:改变 HTML 样式

    2021-11-20

  • var element = document.getElementById("con");

    element.innerHTML 

    查看全部
    0 采集 收起 来源:innerHTML 属性

    2021-11-20

  • 打开新窗口

    window.open("http://www.imooc.com","_blank","height=400,width=400,top=100");

    查看全部
  • 对话框

    var result = prompt("请问你想要什么颜色?","默认红色");

    查看全部
  • 消息对话框

    var result = confirm("确定吗");

    查看全部
  • <!DOCTYPE HTML>

    <html> 

    <head>

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

    <title>热身</title>

    </head>

    <body>

      <p id="p1">我是第一段文字</p>

      <p id="p2">我是第二段文字</p>

      

      <script type="text/javascript">

        document.write("hello");

    document.getElementById("P1").style.color="bule"

      </script>

    </body>

    </html>

    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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