JavaScript入门篇 _学习笔记

首页免费课 JavaScript入门篇笔记

JavaScript入门篇

                
                慕课官方号
            页面重构设计

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

最热最新

赌书泼茶香zzZ

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

第一种:输出内容用""括起，直接输出""号内的内容。

<script type="text/javascript">
  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。</script>

第二种:通过变量，输出内容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名，输出变量存储的内容。</script>

第三种:输出多项内容，内容之间用+号连接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接</script>

第四种:输出HTML标签，并起作用，标签使用""括起来。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

关于JS输出空格问题，请查看wiki中" JS如何输出空格 "

查看全部

0 采集收起来源：JavaScript-输出内容（document.write）

2019-01-10

赌书泼茶香zzZ
定义变量使用关键字var,语法如下：
```
var 变量名
```
变量名可以任意取名，但要遵循命名规则:
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
变量要先声明再赋值，如下：
```
var mychar;
mychar="javascript";
var mynum = 6;
```
变量可以重复赋值，如下：
```
var mychar;
mychar="javascript";
mychar="hello";
```
注意:
1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。
查看全部

0 采集收起来源：JavaScript-什么是变量
2019-01-10
程序小白zxcn
定义变量使用关键字var,语法如下：
```
var 变量名
```
变量名可以任意取名，但要遵循命名规则:
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
查看全部

0 采集收起来源：JavaScript-什么是变量
2019-01-10
慕神6875736

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,left=0');

}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2019-01-10
程序小白zxcn

一行的结束就被认定为语句的结束，通常在结尾加上一个分号";"来表示语句的结束。
alert("上一句，\n下一句!");
document.write("上一句，<br/>下一句!");

查看全部

0 采集收起来源：JavaScript-认识语句和符号
2019-01-10
慕粉0752087006

<!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="col()">
<input type="button" value="改变宽高" onclick="ruler()">
<input type="button" value="隐藏内容" onclick="display()">
<input type="button" value="显示内容" onclick="play()">
<input type="button" value="取消设置" onclick="re1()">
</form>
<script type="text/javascript">
var txt=document.getElementById("txt");
//定义"改变颜色"的函数
function col(){
var col1=prompt("你要把文字改成什么颜色？","red");
if(col1!=null){
txt.style.color=col1;
}
var col2=prompt("你要把背景改成什么颜色？","#ccc");
if(col2!=null){
txt.style.background=col2;
}
}
//定义"改变宽高"的函数
function ruler(){
var rul1=prompt("你要把宽改为多少px？","200");
if(rul1!=null){
txt.style.width=rul1+"px";
}
var rul2=prompt("你要把高改为多少px？","300");
if(rul2!=null){
txt.style.height=rul2+"px";
}
}
//定义"隐藏内容"的函数
function display(){
txt.style.display="none";
}
//定义"显示内容"的函数
function play(){
txt.style.display="block";
}
//定义"取消设置"的函数
function re1(){
var re1=confirm("你确定要重置所有内容吗？");
if(re1==true){
document.getElementById('txt').removeAttribute('style');
}
}

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

查看全部

0 采集收起来源：编程挑战
2019-01-09
慕粉0752087006

<!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属性）
2019-01-09
慕粉0752087006

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

查看全部

0 采集收起来源：改变 HTML 样式
2019-01-09

慕雪4950640

JavaScript-打开新窗口（window.open）

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

语法：

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

参数说明:

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

参数表:

例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

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

2019-01-09

Mavis79

注释：
单行用// ……
多行用/* …… */

查看全部

0 采集收起来源：JavaScript-注释很重要
2019-01-09
Mavis79

嵌入外部JS代码到HTML：
<script scr="script.js"></script>

查看全部

0 采集收起来源：我也可以独立（引用JS外部文件）
2019-01-09
Mavis79

在HTML中插入JS代码：
<script type="text/javascript">
</script>

查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2019-01-09
慕尼黑2104920
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
```
confirm(str);
```
```
str：在消息对话框中要显示的文本
返回值: Boolean值
```
```
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
```
<script type="text/javascript">
function rec(){
var mymessage= confirm("你是男士吗?") ;
if(mymessage==false)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
查看全部

0 采集收起来源：JavaScript-确认（confirm 消息对话框）
2019-01-09
慕尼黑2104920
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。
```
alert(字符串或变量); 
注:alert弹出消息对话框(包含一个确定按钮)。
注意:1. 在点击对话框"确定"按钮前，不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容，可以是字符串或变量，与document.write 相似。
```
查看全部

0 采集收起来源：JavaScript-警告（alert 消息对话框）
2019-01-09
慕尼黑2104920
JavaScript输出内容document.write
第一种:输出内容用""括起，直接输出""号内的内容。
```
document.write("I love JavaScript！");
```
第二种:通过变量，输出内容
```
var mystr="hello world!";
  document.write(mystr);
```
第三种:输出多项内容，内容之间用+号连接。
```
var mystr="hello";
  document.write(mystr+"I love JavaScript");
```
第四种:输出HTML标签，并起作用，标签使用""括起来
```
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
```
查看全部

0 采集收起来源：JavaScript-输出内容（document.write）
2019-01-09

首页上一页 308 309 310 311 312 313 314 下一页尾页

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript入门篇

JavaScript-打开新窗口（window.open）