JavaScript入门篇 _学习笔记

首页免费课 JavaScript入门篇笔记

JavaScript入门篇

                
                慕课官方号
            页面重构设计

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

最热最新

宝慕林7297105
prompt 消息退化框
confirm 确认框
查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2019-02-25
拉普吉

引用JS外部文件
单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js
在JS文件中，不需要<script>标签,直接编写JavaScript代码就可以了。
<script src="script.js"></script>

查看全部

0 采集收起来源：我也可以独立（引用JS外部文件）
2019-02-25
拉普吉

如何插入JS

<script type="text/javascript">
表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言
<script>标签要成对出现，并把JavaScript代码写在<script></script>之间。
使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。

查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2019-02-25
拉普吉

为什么学习JavaScript
JavaScrip可以让网页呈现各种动态效果

查看全部

0 采集收起来源：为什么学习JavaScript
2019-02-25

燕麦片

JavaScript-输出内容（document.write）

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-02-25

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

0 采集收起来源：JavaScript-什么是函数
2019-02-25
燕麦片
JavaScript-判断语句（if...else）
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）
2019-02-25
燕麦片
变量是可变的量
变量是用于存储某种/某些数值的存储器。
可以把变量看做一个盒子
为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）
定义变量使用关键字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-02-25
燕麦片

Java

查看全部

0 采集收起来源：JavaScript-认识语句和符号
2019-02-25
燕麦片
如何写入JS代码？你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。
<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。
任务
```
添加<script>标签，使第7行代码运行，结果窗口显示"开启JS之旅!"
```
1.请在右边编辑器的第6行，输入
<script type="text/javascript">
2.请在右边编辑器的第8行,输入</script>
查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2019-02-24
慕移动3008453

window.open('网址','打开方式','打开形式')。
打开方式：_blank打开新网页 _self当前窗口 _top框架上部窗口
打开形式：top据顶部像素数left距左端像素数
height:高度像素数width:宽度像素数
menubar:有没有菜单toobar:有没有工具条scrollbars：有没有滚动条status:有没有状态栏

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2019-02-24
养猪的腿毛叔叔

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
<script type="text/javascript">
function contxt() //定义函数contxt()
{
alert("哈哈，调用函数了!");//alert为弹窗
}

</script>
</head>
<body>
<form>
<input type="button" value="点击我" onclick=" contxt()" /> 
</form>
</body>
</html>

查看全部

0 采集收起来源：JavaScript-什么是函数
2019-02-24
kuma34
```
//可以正确运行的一段示例
```
<!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="sizeChange()">
<input type="button" value="隐藏内容" onclick="hiddenContent()">
<input type="button" value="显示内容" onclick="showContent()">
<input type="button" value="取消设置" onclick="cancelSet()">
</form>
<script type="text/javascript">

//获取 div 的对象，并获得其一些属性的原始值
var divOb = document.getElementById("txt");
var preColor = divOb.style.color;
var preBackgroundColor = divOb.style.backgroundColor;
var preWidth = divOb.style.width;
var preHeight = divOb.style.height;

//定义"改变颜色"的函数
function colorChange(){
divOb.style.color="red";
divOb.style.backgroundColor="blue";
}

//定义"改变宽高"的函数
function sizeChange(){
divOb.style.width="200px";
divOb.style.height="200px";
}

//定义"隐藏内容"的函数
function hiddenContent(){
divOb.style.display="none";
}

//定义"显示内容"的函数
function showContent(){
divOb.style.display="block";
}

//定义"取消设置"的函数
function cancelSet(){
var isReset = confirm("是否取消设置？");
if (isReset == true){
divOb.style.color=preColor;
divOb.style.backgroundColor=preBackgroundColor;
divOb.style.width=preWidth;
divOb.style.height=preHeight;
divOb.style.display="block";
}
else return;
}
</script>
</body>
</html>
查看全部

0 采集收起来源：编程挑战
2019-02-23
慕慕6033450

<!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="hiddennr()">
<input type="button" value="显示内容" onclick="xsnr()">
<input type="button" value="取消设置" onclick="yn()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
function changecolor(){
var mychar=document.getElementById("con");
mychar.style.color="blue";
mychar.style.backgroundColor="red";
}
//定义"改变宽高"的函数
function changewh(){
var mychar=document.getElementById("con");
mychar.style.width="100px";
mychar.style.height="200px";
}

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

}

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

function xsnr(){
var mychar=document.getElementById("txt");
mychar.style.display="block";
}
//定义"取消设置"的函数

function but5(){
var box=confirm("是否取消设置")
if(box==true){
var txt=document.getElementById("txt");
txt.removeAttribute('style')
}
else{return;}
}

</script>
</body>
</html>
小伙伴们，请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。

查看全部

0 采集收起来源：编程挑战
2019-02-23
慕慕6033450
控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
```
object.className = classname
```
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
看看下面代码，获得 <p> 元素的 class 属性和改变className：
查看全部

0 采集收起来源：控制类名（className 属性）
2019-02-23