JavaScript入门篇 _学习笔记

首页免费课 JavaScript入门篇笔记

JavaScript入门篇

                
                慕课官方号
            页面重构设计

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

最热最新

慕莱坞3007505
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。
语法:
```
alert(字符串或变量);
```
看下面的代码:
```
<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>
```
注:alert弹出消息对话框(包含一个确定按钮)。
结果:按顺序弹出消息框
注意:
1. 在点击对话框"确定"按钮前，不能进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容，可以是字符串或变量，与document.write 相似。
查看全部

0 采集收起来源：JavaScript-警告（alert 消息对话框）
2018-11-04

慕莱坞3007505

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>

查看全部

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

2018-11-04

慕莱坞3007505
函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。
如何定义一个函数呢？基本语法如下:
```
function 函数名(){
     函数代码;
}
```
说明:
1. function定义函数的关键字。
2. "函数名"你为函数取的名字。
3. "函数代码"替换为完成特定功能的代码。
我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字：“add2”，代码如下：
```
function add2(){
   var sum = 3 + 2;
   alert(sum);
}
```
函数调用:
函数定义好后，是不能自动执行的，所以需调用它,只需直接在需要的位置写函数就ok了,代码如下:
查看全部

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

慕莱坞3007505

if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。

语法:

if(条件)
{ 条件成立时执行的代码 }else{ 条件不成立时执行的代码 }

假设我们通过年龄来判断是否为成年人，如年龄大于等于18岁，是成年人，否则不是成年人。代码表示如下:

<script type="text/javascript">   var myage = 18;
   if(myage>=18)  //myage>=18是判断条件   { document.write("你是成年人。");}   else  //否则年龄小于18   { document.write("未满18岁，你不是成年人。");}</script>

查看全部

0 采集收起来源：JavaScript-判断语句（if...else）

2018-11-04

慕粉9543091

js设置字体颜色大小必须要加双引号

查看全部

0 采集收起来源：改变 HTML 样式
2018-11-04
qq_慕斯6533709
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
```
object.className = classname
```
查看全部

0 采集收起来源：控制类名（className 属性）
2018-11-04
qq_慕斯6533709

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
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>
</html>

查看全部

0 采集收起来源：控制类名（className 属性）
2018-11-04
qq_慕斯6533709
```
Object.style.display = value
```
value
none 隐藏
block 显示
查看全部

0 采集收起来源：显示和隐藏（display属性）
2018-11-04
qq_慕斯6533709
```
Object.style.property=new style;
```
backgroundColor 背景色
height 设置元素高度
width 宽度
font 字体
fontFamily 字体系列
fontSize 字体大小
查看全部

0 采集收起来源：改变 HTML 样式
2018-11-04
qq_慕斯6533709

并将元素的内容输出和改变元素内容，
var mychar=document.getElementById("con"); ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="Hello world";
document.write("修改后的标题:"+mychar.innerHTML); /

查看全部

0 采集收起来源：innerHTML 属性
2018-11-03
qq_慕斯6533709

.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

查看全部

0 采集收起来源：innerHTML 属性
2018-11-03
qq_慕斯6533709

getElementById() 获取的是一个object对象
var mychar= document.getElementById("con"); ;
document.write("结果:"+mychar.innerHTML);

查看全部

0 采集收起来源：通过ID获取元素
2018-11-03
嘿咯嘿咯咯咯咯

<!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="colortext()" value="改变颜色" >
<input type="button" onclick="widthandheight()" value="改变宽高" >
<input type="button" onclick="hidetext()" value="隐藏内容" >
<input type="button" onclick="showtext()" value="显示内容" >
<input type="button" onclick="returntext()" value="取消设置" >
</form>
<script type="text/javascript">
var txt=document.getElementById("txt");
//定义"改变颜色"的函数
function colortext()
{
var colortrans = document.getElementById("txt");
colortrans.style.color="blue";
colortrans.style.backgroundColor="#CCC"
}
//定义"改变宽高"的函数
function widthandheight()
{
var widthtrans = document.getElementById("txt");
var heighttrans = document.getElementById("txt");
widthtrans.style.width="1000px";
heighttrans.style.height="500px"
}

//定义"隐藏内容"的函数
function hidetext()
{
var hide = document.getElementById("txt");
hide.style.display="none";
}

//定义"显示内容"的函数
function showtext()
{
var show = document.getElementById("txt");
show.style.display="block";
}

//定义"取消设置"的函数
function returntext()
{
var reback =confirm("确定重置吗");
if(reback==true){
txt.removeAttribute('style');
}
}
</script>

查看全部

0 采集收起来源：编程挑战
2018-11-03
慕莱坞3007505
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。
定义变量使用关键字var,语法如下：
```
var 变量名
```
变量名可以任意取名，但要遵循命名规则:
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
变量要先声明再赋值，如下：
```
var mychar;
mychar="javascript";
var mynum = 6;
```
变量可以重复赋值，如下：
```
var mychar;
mychar="javascript";
mychar="hello";
```
查看全部

0 采集收起来源：JavaScript-什么是变量
2018-11-03
慕用65872

<!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="changeWh()">
<input type="button" value="隐藏内容" onClick="hidecon()">
<input type="button" value="显示内容" onClick="showcon()">
<input type="button" value="取消设置" onClick="cancel()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
function changeColor() {
var head = document.getElementById('con');
var text = document.getElementById('txt');
head.style.color = "red";
head.style.backgroundColor = "black";
text.style.color = 'yellow';
text.style.backgroundColor = "blue";

}

//定义"改变宽高"的函数
function changeWh() {
var head = document.getElementById('con');
var text = document.getElementById('txt');
head.style.width = "100px";
head.style.height = "30px";
text.style.width = '400px';
text.style.height = "300px";

}

//定义"隐藏内容"的函数
function hidecon() {
var head = document.getElementById('con');
var text = document.getElementById('txt');
head.style.display = "none";
head.style.display = "none";
text.style.display = "none";
text.style.display = "none";

}

//定义"显示内容"的函数
function showcon() {
var head = document.getElementById('con');
var text = document.getElementById('txt');
head.style.display = "block";
head.style.display = "block";
text.style.display = "block";
text.style.display = "block";

}

//定义"取消设置"的函数
function cancel() {
var head = document.getElementById('con');
var text = document.getElementById('txt');
var cancelSetting = confirm('是否确认要取消呢？');
if(cancelSetting === true){
head.removeAttribute('style');
text.removeAttribute('style');
}
}

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

查看全部

0 采集收起来源：编程挑战
2018-11-03

首页上一页 358 359 360 361 362 363 364 下一页尾页

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript入门篇