慕课网

精品课程 JavaScript入门篇

JavaScript入门篇

最热最新

qq_旋转跳跃我闭着眼_0
```
if(条件)
{ 条件成立时执行的代码 }else{ 条件不成立时执行的代码 }
```
查看全部

0 采集收起来源：JavaScript-判断语句（if...else）
2018-03-27
慕容2426815

script-开始js的书写。

查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2018-03-27
痛经少女

subimit 方框
button 按钮

查看全部

0 采集收起来源：JavaScript-什么是函数
2018-03-27
qq_zwm_0

<script type="text/javascript">
function openWindow()
    {

       if(confirm("是否打开新窗口？"))
       {
         var t=prompt("请输入一个网址","http://www.imooc.com/");
         window.open( t,"_blank","toolbar=no, menubar=no, scrollbars=yes, width=400, height=400");
       }

    }
</script>

查看全部

0 采集收起来源：编程练习
2018-03-26
qq_惟Ta命_0

<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>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />

查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-03-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>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="chgcolor()">
<input type="button" value="改变宽高" onclick="chgsize()">
<input type="button" value="隐藏内容" onclick="hidcontent()">
<input type="button" value="显示内容" onclick="showcontent()">
<input type="button" value="取消设置" onclick="txtreset()">
</form>
<script type="text/javascript">
var newtxtsty = document.getElementById("txt");
//定义"改变颜色"的函数
function chgcolor(){
newtxtsty.style.color="red";
newtxtsty.style.backgroundColor="blue";
}
//定义"改变宽高"的函数
function chgsize(){
newtxtsty.style.width="700px";
newtxtsty.style.height="500px";
}
//定义"隐藏内容"的函数
function hidcontent(){
newtxtsty.style.display="none";
}
//定义"显示内容"的函数
function showcontent(){
newtxtsty.style.display="block";
}
//定义"取消设置"的函数
function txtreset(){
if(mychoose = confirm("是否取消？")){
newtxtsty.removeAttribute("style");
}
}
</script>
</body>
</html>

查看全部

0 采集收起来源：编程挑战
2018-03-26
心念阳

removeAttribute取消操作

查看全部

0 采集收起来源：编程挑战
2018-03-26
Mis_claire

<!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="changeColor()">
    <input type="button" value="改变宽高" onClick="changeWidth()">
    <input type="button" value="隐藏内容" onClick="changeHidden()">
    <input type="button" value="显示内容" onClick="changeShow()" >
    <input type="button" value="取消设置" onClick="changeRcover()">
</form>
<script type="text/javascript">
    //定义"改变宽高"的函数
function changeWidth(){
   var n1=document.getElementById('txt');
    n1.style.width="400px";
    n1.style.height="200px";
}

//定义"改变颜色"的函数
function changeColor(){
    var n1=document.getElementById('txt');
    n1.style.color="#ff00ff";
    n1.style.backgroundColor="#ccc"
}
//定义"隐藏内容"的函数
function changeHidden(){
    var n1=document.getElementById('txt');
    n1.style.display="none";
}

//定义"显示内容"的函数
function changeShow(){
    var n1=document.getElementById('txt');
    n1.style.display="block";

}

//定义"取消设置"的函数
function changeRcover(){
    var mymessage=confirm("确定取消操作吗？");
    var n1=document.getElementById('txt');
    if(mymessage==true)
    {

    n1.style.display="block";
    n1.style.color="#333";
    n1.style.backgroundColor="#fff"
    n1.style.width="600px";
    n1.style.height="400px";
    }
    else{ }


}

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

查看全部

0 采集收起来源：编程挑战
2018-03-26
Mis_claire

<!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 = two;
    }
</script>
</body>
</html>

查看全部

0 采集收起来源：控制类名（className 属性）
2018-03-26
Mis_claire

<!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>

查看全部

0 采集收起来源：显示和隐藏（display属性）
2018-03-26
Mis_claire

<!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="#ff0000";
    mychar.style.backgroundColor="#ccc";
    mychar.style.width="300px";
</script>
</body>
</html>

查看全部

0 采集收起来源：改变 HTML 样式
2018-03-26
Mis_claire

<!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>

查看全部

0 采集收起来源：innerHTML 属性
2018-03-26
Mis_claire

<!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 mydialog=confirm("是否要打开新窗口？");
      if(mydialog==true){

           var myurl= prompt("请输入一个网址","http://www.imooc.com/");
           if(myurl!=null)
            {
            window.open( myurl,"_blank","toolbar=no, menubar=no, scrollbars=yes, width=400, height=400");

            }
            else
            {
               alert("请输入新窗口的网址");

            }


      }else{
        var mywindow= window.open( url,"_blank","toolbar=no, menubar=no, scrollbars=yes, width=400, height=400");
        mywindow.close();
    }
    }
    // 新窗口打开时弹出确认框，是否打开
    // 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
    //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。


</script>
</head>
<body>
   <input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-03-26
Mis_claire

注意:
1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

查看全部

0 采集收起来源：JavaScript-什么是变量
2018-03-26
慕田峪1058214

document.getElementById('con')获取的只是P标签，返回的是[object HTMLParagraphElement]，
document.getElementById('con').innerHTML获取的才是P标签里的内容，返回的是JavaScript

查看全部

1 采集收起来源：通过ID获取元素
2018-03-26

首页上一页 579 580 581 582 583 584 585 下一页尾页

0/150

提交

取消

开始学习

课程须知: 该课程是针对新手的一个简单基础的课程，让您快速了解JS，通过一些简单的代码编写体会JS。如果您已经对JS有所了解，可以跳过本课程，学习JS进阶课程，进一步学习JS相应的基础知识。学习本课程，希望您至少具备HTML/CSS基础知识，认识常用的标签。

老师告诉你能学到什么？: 1. 理解JavaScript基础语法； 2. 掌握常用语句的使用方法； 3. 学会如何获取DOM元素及进行简单操作。