慕课网

精品课程 JavaScript入门篇

JavaScript入门篇

最热最新

慕斯1313813

开心！000

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-10-27
qq_你们在哪里啊_0

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热身</title>
</head>
<body>
1、引用js文件。
<script src="script.js"></script><br />

2、当语句结束的时候后面加;号。
document.write("Hello"); <br />

3、单行注释//&bnsp;&bnsp;&bnsp;多行注释/*xxxxx*/<br />

4、变量
var 变量名; <br />

5、函数的定义，当需要触发时间的时候可以用onClick实现
function 函数名()
{
函数代码;
}
function add2(){
var sum = 3 + 2;
alert(sum);
}<br />

6、输出内容
document.write()
①内容的直接的输出：document.write("I love JavaScript！");
②输出变量：var mystr="hello world!";
document.write(mystr);
③输出多项内容：var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript"); <br />

7、消息对话框，弹出（警告）
alert(字符串或变量);
var mynum = 30;
alert("hello!");
alert(mynum);

8、confirm消息对话框（确认）
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大，要学习噢!"); }

9、prompt(str1, str2); 消息对话框（提问）
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }

10、打开新窗口（window.open）
window.open([URL], [窗口名称], [参数字符串])
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

11、关闭窗口(window.close)
<窗口对象>.close(); //关闭指定的窗口
window.close(); //关闭本窗口

12、通过ID获取元素（document.getElementById(“id”)）
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果:"+mychar); //输出获取的P标签。
// 这里是演示代码
</script>
</body>

13、改变或者替换HTML元素内容（innerHTML）
<body>
<h2 id="con">javascript</H2>
<script type="text/javascript">
var mychar=document.getElementById("con") ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML ="你们在哪里啊";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内
// 这里是演示代码
</script>
</body>

14、改变HTML的样式（Object.style.property=new style;）
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
mychar.style.width="300px";

15、显示和隐藏（Object.style.display = value）
var mychar= document.getElementById("con");
mychar.style.display="none"; //隐藏
mychar.style.display="block"; //显示

16、控制类名（className属性），获取class属性，更改某元素指定的css样式
<style type="text/css">
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>
// 这里是演示代码
<script type="text/javascript">
</script>
</body>
</html>

查看全部

0 采集收起来源：为什么学习JavaScript
2018-10-27
慕莱坞8008546

<body>
<p id="p1">我是第一段文字</p>
<p id="p2">我是第二段文字</p>
script type="text/javascript">
document.write("hello");
document.getElementById("p1").style.color="green";
</script>
</body>

查看全部

0 采集收起来源：为什么学习JavaScript
2018-10-26
慕莱坞8008546

JS代码必须要写在<script> 代码 </script>之间

查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2018-10-26

首页上一页 363 364 365 366 367 368 369 下一页尾页

0/150

提交

取消

开始学习

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

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