JavaScript入门篇 _学习笔记

首页免费课 JavaScript入门篇笔记

JavaScript入门篇

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
帝堵抢车位动画制作
初级·36959
免费课程
                                
JavaScript进阶篇
入门·467077
免费课程
                                
                难度入门
            
                时长 1小时35分
            
                学习人数
            
综合评分9.57
                            5509人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.4
                                逻辑清晰

最热最新

乐_开_

制作新按钮，“新窗口打开网站” ，点击打开新窗口。

查看全部

2 采集收起来源：编程练习
2015-04-16
慕莱坞5843282
```
制作新按钮，打开一个新的窗口
```
<script type="text/javascript">
function openWindow(){
var open = confirm("是否确认新增窗口打开新的网站？");
//新窗口打开时弹出确认框，是否打开
if(open==true){
var url = ("确定打开的网址","http://www.imooc.com/");
// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
if(url!=null){
window.open(url,'_blank','width=400,height=500,menubar=no,topbar=no')；
//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
}
else{
alert("退出")；
}
}
}
</script>
查看全部

2 采集收起来源：编程练习
2020-07-27
陈帅帅6322487

function openWindow (){

confirm("是否打开新的窗口") == true ? window.open("http://" + prompt('请输入网址', 'www.imooc.com'), '_blank','width=400,height=500,menuber=no.toolbar=no') : null;

}

查看全部

2 采集收起来源：编程练习
2020-07-04
weixin_慕标0270067

object.removeAttribute("style");将以上设置全部恢复原样

查看全部

2 采集收起来源：编程挑战
2020-05-16
慕盖茨6013945

<!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 optionsStr="是否要打开弹窗?";
        var optionChange=confirm(optionsStr);
        if(optionChange){
            window.open("http://www.imooc.com/","-blank","width=400,height=500,menuBar=yes,toolBar=yes")
        }
    }

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

    //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。


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

查看全部

2 采集收起来源：编程练习
2020-03-30
Skhizeinx

document.getElementById("id")：
①若id存在，且在输出时+.innerHTML()则输出标签内的内容，否则为［object HTMLParagraphElement］。
②若id不存在，则为null。

查看全部

2 采集收起来源：通过ID获取元素
2020-03-01
慕瓜5182834

1，getElementById()是查查找特定的元素，例如 ;getElementById("p1")就是查找 p1 这个id。
2,document.write("<h1></h1>")加双引号；
document.write("文字")加双引号；
document.write（123）加数字不带引号；
document.write（'"123"'）输出为“123” 输出双引号需要在单引号下输出；
document.write（3+5)输出结果为8，
document.write（"3+5"）输出结果为3+5；
注意引号一定是英文输入法下的。

查看全部

2 采集收起来源：为什么学习JavaScript
2019-11-09
慕神9087410

document.getElementById(“id”)
document.write("结果:"+mychar.innerHTML); //输出获取的P标签。
//在最后输出时用的函数中若不加innerHTML则会出现提示中说明的null或［object HTMLParagraphElement］，但当加了inner则会显示标签p里面的内容，这就是函数inner的用途。

查看全部

2 采集收起来源：通过ID获取元素
2019-07-23

qq_慕先生6178270

在运行的时候我发现有两个函数没有响应调用，后来我把函数的标识符改了之后问题就解决了，

    <input type="button" value="改变颜色" onclick="width()">  
    <input type="button" value="改变宽高" onclick="height()">
    <input type="button" value="隐藏内容" onclick="txtnone()">
    <input type="button" value="显示内容" onclick="txtblock()">
    <input type="button" value="取消设置" onclick="qw()">
  </form>
  <script type="text/javascript">
  var myh2=document.getElementById("con");
  var div=document.getElementById("txt");
//定义"改变颜色"的函数
function width(){
    myh2.style.color="red";
    myh2.style.backgroundColor='#CCC';
}

//定义"改变宽高"的函数
function height(){
    div.style.width="400px"
    div.style.height='500px'
}

这里总结一下js的命名规则

一：标识符必须由字母、数字、下划线、美元符组成。

二：标识符的首字母不能是数字。

三：不可以使用保留字。

我这里出现了问题是使用了js的保留字命名。

查看全部

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

2019-06-15

Pilibill

<!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
慕码人4321850

function openWindow(){
var openSwitch=confirm("是否打开网站！");
if (openSwitch==true){
var address=prompt("请确认网址","http：//www.imooc.com/");
if(address=='http：//www.imooc.com/'){
window.open('http://www.imooc.com','_blank','width=400,height=500,menubar=no,toolbar=no')
}

}
}

查看全部

3 采集收起来源：编程练习
2019-04-30
一般般的我

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
{document.write();}
function openWindow(){
var open=confirm("是否打开?");
if(open==true)
window.open('http://www.imooc.com/','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>

查看全部

2 采集收起来源：编程练习
2019-04-01
慕移动4467821

使所用的设置恢复原始值：
object.removeAttribute("style");
或者
object.style=null;

查看全部

2 采集收起来源：编程挑战
2019-04-01
昼夕

JS中如何输出空格
解决方法:
1. 使用输出html标签 来解决
document.write("  "+"1"+"    "+"23");
结果: 1 23
2. 使用CSS样式来解决
document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
结果: 1 2 3
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

查看全部

2 采集收起来源：JavaScript-输出内容（document.write）
2019-02-03
qq_慕盖茨0175325


<input type="button" value="改变颜色" onclick="color()">
<input type="button" value="改变宽高" onclick="wh()">
<input type="button" value="隐藏内容" onclick="hidetext()">
<input type="button" value="显示内容" onclick="showtext()">
<input type="button" value="取消设置" onclick="canel()">
</form>
<script type="text/javascript">
function color()

{

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

mycolor.style.color="#fff";

mycolor.style.backgroundColor="#333";

}

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

function wh()

{

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

mywh.style.width="300px";

mywh.style.height="400px";

}

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

function hidetext()

{

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

myhide.style.display="none";

}

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

function showtext()

{

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

myshow.style.display="block";

}

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

function canel()

{

var canel=confirm("是否取消设置？")

if (canel==true)

{

var mycanel=document.getElementById("txt")

mycanel.style.color="#000";

mycanel.style.backgroundColor ="#fff";

mycanel.style.height="400px";

mycanel.style.width="600px";

mycanel.style.border="#333 solid 1px";

mycanel.style.padding="5px";

mycanel.style.display="block";

}

else{

null;

}

}

查看全部

2 采集收起来源：编程挑战
2019-01-05

首页上一页 5 6 7 8 9 10 11 下一页尾页

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript入门篇

JS中如何输出空格