慕课网

精品课程 JavaScript入门篇

JavaScript入门篇

最热最新

阿卡学习
<!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" onclick="changeFontColor()" value="改变字体颜色" >

<input type="button" value="改变背景颜色" >
<input type="button" onclick="changeWidth()" value="改变宽高" >
<input type="button" onclick="hidetext()" value="隐藏内容" >
<input type="button" onclick="showtext()" value="显示内容" >
<input type="button" onclick="rmset()" value="取消设置" >
</form>
<script type="text/javascript">
//定义"改变字体颜色"的函数
function changeFontColor() {
var mychar = document.getElementById("txt");
mychar.style.color = `rgb(${getRandomColor()},${getRandomColor()},${getRandomColor()})`;
//定义一个函数获取0~255的随机数
function getRandomColor()
{
return parseInt(Math.random()*255)
}
}

//定义"改变背景颜色"的函数
//直接获取按钮,采用匿名函数
var inputs = document.getElementsByTagName("input")
inputs[1].onclick = function() {
var usein = prompt("请输入色值：","orange");
var mychar = document.getElementById("txt");
mychar.style.background = usein;
}

// function changeGroundColor() {
// var usein = prompt("请输入色值：","orange");
// var mychar = document.getElementById("txt");
// mychar.style.background = usein;
// }
//定义"改变宽高"的函数
function changeWidth() {
var mychar = document.getElementById("txt");
mychar.style.width = "700px";
mychar.style.height = "300px";

//下面为全体样式的设置,如果只设置宽高,则会把其他样式恢复默认值,上面设置过的字体颜色背景全都会被取消掉
// mychar.style.cssText = "width:700px;height:200px;";
// mychar.style.cssText="color: red;background-color: #CCC;width: 300px;";
}
//定义"隐藏内容"的函数
function hidetext() {
var mychar = document.getElementById("txt");
mychar.style.display = "none";
}
//定义"显示内容"的函数
function showtext() {
var mychar = document.getElementById("txt");
mychar.style.display = "block";
}
//定义"取消设置"的函数
function rmset() {
var usein = confirm("是否确认取消设置?");
if(usein){
var mychar = document.getElementById("txt");
mychar.removeAttribute("style")
}
}
</script>
</body>
</html>
查看全部

0 采集收起来源：编程挑战
2018-12-09
慕函数0327554

prompt( )在confirm（）基础上增加了可输入文本的对话框

查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-12-09
慕函数0327554
document.write( )输出文本：
1. 直接输出内容+“”
2. 输出变量不用+“”
3. 输出HTML标签+“”
查看全部

0 采集收起来源：JavaScript-输出内容（document.write）
2018-12-09
慕函数0327554
1. document.write( ) //直接在页面打印内容
2. alert( ) //页面弹出对话框
查看全部

0 采集收起来源：JavaScript-什么是函数
2018-12-09

weixin_慕少4095589

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。窗口名称：可选参数，被打开窗口的名称。    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表:

查看全部

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

2018-12-09

hahhaz

运行结果为什么是这样的

查看全部

0 采集收起来源：通过ID获取元素
2018-12-07
hahhaz

几个的结合

查看全部

0 采集收起来源：编程练习
2018-12-07
刘不会
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
```
Object.style.property=new style;
```
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素
代码示例
<!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 采集收起来源：改变 HTML 样式
2018-12-07

慕用0081202

confirm(str);


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

查看全部

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

2018-12-07

慕用0081202

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

查看全部

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

2018-12-07

慕用0081202

window.open([URL], [窗口名称], [参数字符串])

<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-12-07

尧丶L

得注意双引号啊！！！！！！！！！！！！！！！！

查看全部

0 采集收起来源：显示和隐藏（display属性）
2018-12-06
尧丶L

举个简单的例子
html这个文件就像桌子，上面什么都能放，内裤，上衣，衬衫，遥控器，沐浴露，洗发露等。太乱了！
怎么办？
用一个js的包包，把内裤，上衣，衬衫放进去，然后命名为衣服包。
桌子上就剩衣服包，遥控器，沐浴露，洗发露了。

查看全部

1 采集收起来源：我也可以独立（引用JS外部文件）
2018-12-06
尧丶L

script就是脚本的意思。
插入了一个啥？我们需要告诉浏览器
script type就是脚本类型=text/javascript

查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2018-12-06
尧丶L

write就是在页面写点东西，写啥你随意。
getElementById，不理解不怕。
先看用了以后发生了什么。用了以后，第一段文字变成了蓝色。说明后面的“blue”将p1渲染成了蓝色。
所以，getElementById，从名字上直译：通过ID获取元素，ID就是p1。
获取了啥元素？把它的style的color元素拿出来，拿出来干嘛？让他等于“blue”。

查看全部

2 采集收起来源：为什么学习JavaScript
2018-12-06

首页上一页 329 330 331 332 333 334 335 下一页尾页

0/150

提交

取消

开始学习

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

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

JavaScript入门篇

改变 HTML 样式