慕课网

精品课程 JavaScript入门篇

JavaScript入门篇

最热最新

Jocelyn_mm

<!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=hide() />
  <input type="button" value="显示内容" onclick=show() />
  <input type="button" value="取消设置" onclick=cancel() />
</form>
<script type="text/javascript">
  //定义"改变颜色"的函数
  var obc=document.getElementById("con");
  var obt=document.getElementById("txt");
  function changecolor(){
    obc.style.color="brown";
    obc.style.backgroundColor="#CCC";
    obt.style.color="brown";
    obt.style.backgroundColor="#CCC";
  }

  //定义"改变宽高"的函数
  function changewidth(){
    obc.style.width="200px";
    obc.style.height="150px";
    obt.style.width="300px";
    obt.style.height="400px";
  }

  //定义"隐藏内容"的函数
  function hide(){
    obc.style.display="none";
    obt.style.display="none";
  }

  //定义"显示内容"的函数
  function show(){
    obc.style.display="block";
    obt.style.display="block";
  }

  //定义"取消设置"的函数
  function cancel(){
    var mymessage=confirm("取消设置?");
    if(mymessage){
      obc.removeAttribute('style');
      obt.removeAttribute('style');
    }
  }
</script>
</body>
</html>

查看全部

0 采集收起来源：编程挑战

2018-05-16

im_Waylon
```
window.close();   //关闭本窗口
```
```
<窗口对象>.close();   //关闭指定的窗口
```
查看全部

0 采集收起来源：JavaScript-关闭窗口（window.close）
2018-05-16
im_Waylon

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-05-16
前端学长

/定义"改变颜色"的函数
function changeColor(){
     txt.style.color="red";
     txt.style.backgroundColor="#ccc";

}

//定义"改变宽高"的函数
    function changeWh(){
         txt.style.width="200px";
         txt.style.height="100px";
    }

//定义"隐藏内容"的函数
    function hidden1(){

         txt.style.display="none";
    }

//定义"显示内容"的函数
    function display1(){
        txt.style.display="block";
    }

//定义"取消设置"的函数
    function resetss(){

    var message=confirm("你确定要取消所有设置吗？");
    if(message==true){
        txt.removeAttribute("style");
    }

    }

查看全部

1 采集收起来源：编程挑战
2018-05-16
微笑晴天TT

confirm：消息对话框，有确定和取消两个按钮
prompt：消息对话框，有确定，取消，文本输入框
window([URL],[窗口名称],[参数字符串])：打开新窗口
window.close()：关闭窗口

查看全部

1 采集收起来源：编程练习
2018-05-16

im_Waylon

1、open()方法可以查找一个已经存在或者创建的浏览器窗口
window.open([URL], [窗口名称], [参数字符串])
2、URL：可选参数，在窗口要显示网页的网址和路径。
窗口名称：可选参数，被打开的窗口明后名称。
_top：框架网页上部窗口中显示目标网页
_self：在当前窗口显示目标网页 
_blank：在新窗口显示目标网页
3、相同name窗口智能创建一个，创建多个name窗口不能相同，则name不能包含有空格。

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）

2018-05-16

qq_嘿嘿嘿_31

.removeAttribute("style")的方法，注意里面是双引号，外面是修改的对象的名字，不是自己定义的变量。

查看全部

0 采集收起来源：编程挑战
2018-05-16
慕斯7306088

function openWindow(){
var k=confirm("是否打开此网页！");
if(k==true){
var url=prompt("请输入打开的网址：");
if(url!=null){
window.open('url','_blank','width=400,heigth=500,menubar=no,toolbar=no');
}
}
}

查看全部

0 采集收起来源：编程练习
2018-05-16
im_Waylon

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。
prompt(str1,str2);
str1:显示在对话框的文本，不可修改 str2:文本框的内容，可修改
确定按钮：文本框内容作为函数的返回值
取消按钮：返回null

查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-05-16
im_Waylon

confirm 消息对话框通常用于允许用户做选择的动作
confim(str) str:在消息列表中姚先生的文本

查看全部

0 采集收起来源：JavaScript-确认（confirm 消息对话框）
2018-05-16
im_Waylon

alert输出内容，可以是字符串或变量，与document.write 相似

查看全部

0 采集收起来源：JavaScript-警告（alert 消息对话框）
2018-05-16
牛逼不哄哄

<head>
<script type="text/javascript">

    // 新窗口打开时弹出确认框，是否打开
    var isOpen = confirm("是否打开新窗口？");

    // 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
    if(isOpen)
    {
        var openUrl = "http://www.imooc.com/";
        openUrl = prompt("请输入需要打开的网址:",openUrl);

    //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
        window.open(openUrl, "_blank","width=400,height=500,menubar=no,toolbar=no");
    }



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

查看全部

0 采集收起来源：编程练习
2018-05-16
牛逼不哄哄
关闭窗口
- window.close(): 关闭本窗口
- <窗口对象>.close(): 关闭指定窗口
- ```
<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>
```
查看全部

0 采集收起来源：JavaScript-关闭窗口（window.close）
2018-05-16
牛逼不哄哄
查找一个已经存在的窗口或新建窗口
- window.open([url], [窗口名称], [参数字符串])
  - 可选，在窗口中要显示网页的地址或路径。如果为空或省略，那么就不系那是任何文档
  - 窗口名称：可选，表示被打开窗口的名字
    - 由数字，字母和下划线组成
    - "_top", "_blank", "_self"是具有特殊意义的名称
      "_top": 框架网页中在上部窗口中显示目标网页
      "_blank": 在新窗口显示目标网页
      "_self": 在当前窗口显示目标网页
    - 相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同
    - name 不能包含有空格。
  - 参数字符串：可选，设置窗口参数，各参数用逗号隔开
- 示例
- ```
<script type="text/javascript"> 
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
```
查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-05-16
牛逼不哄哄
提问 / 消息对话框
- prompt(str1, str2)
  - str1: 要显示在消息对话框中的文本，不可修改
  - 文本框中的内容，可以修改
- 返回值：
  - 点击确定按钮，文本框中的内容将作为函数返回
  - 点击取消按钮，将返回null
查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-05-16

首页上一页 511 512 513 514 515 516 517 下一页尾页

0/150

提交

取消

开始学习

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

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