JavaScript入门篇 _学习笔记

首页免费课 JavaScript入门篇笔记

JavaScript入门篇

                
                慕课官方号
            页面重构设计

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

最热最新

qq_慕后端3361513
背景颜色变灰："#ccc"
语法:
```
Object.style.property=new style;
```
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
查看全部

0 采集收起来源：改变 HTML 样式
2018-12-11
邓爽1041306
```
function 函数名(){
     函数代码;
}
```
查看全部

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

邓爽1041306

定义变量使用关键字var,语法如下：

var 变量名

注意:
1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。
2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

查看全部

0 采集收起来源：JavaScript-什么是变量

2018-12-11

邓爽1041306
<script type="text/javascript"> </script>

插入js文件：
```
<script src="script.js"></script>
```
查看全部

0 采集收起来源：我也可以独立（引用JS外部文件）
2018-12-11
qq_抢你心房独做真王_0

<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="改变颜色" onlick="set.changeColor()" >
<input type="button" value="改变宽高" onlick="set.changeSize()" >
<input type="button" value="隐藏内容" onlick="set.objYingcang()" >
<input type="button" value="显示内容" onlick="set.objXianshi()" >
<input type="button" value="取消设置" onlick="set.Confirm()" >
</form>
<script type="text/javascript">
var txt=document.getElementById("txt");
var set={
changeColor:function(){
txt.style.color="red";
txt.style.backgroundColor="#ccc";
},
changeSize:function(){
txt.style.width="300px";
txt.style.height="300px";
},
objYingcang:function(){
txt.style.display="none";
},
objXianshi:function(){
txt.style.display="block";
},
confirm:function(){
var message=confirm("你确定要重置所有设置么？");
if(message==true){
txt.removeAttribute('style');
}
}
}
//定义"改变颜色"的函数

//定义"改变宽高"的函数

//定义"隐藏内容"的函数

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

//定义"取消设置"的函数

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

查看全部

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

qq_慕后端3361513

close()关闭窗口

用法：

window.close();   //关闭本窗口

或

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

例如:关闭新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

查看全部

0 采集收起来源：JavaScript-关闭窗口（window.close）

2018-12-11

qq_慕后端3361513
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法:
```
prompt(str1, str2);
```
查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-12-11
蓝心门

<!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="cq()">
<input type="button" value="改变宽高" onClick="cw()">
<input type="button" value="隐藏内容" onClick="ce()">
<input type="button" value="显示内容" onClick="cr()">
<input type="button" value="取消设置" onClick="ct()">
</form>
<script type="text/javascript">

//定义"改变颜色"的函数
function cq(){
var c2=document.getElementById("txt");
c2.style.color="red";
c2.style.backgroundColor="yellow";
}

//定义"改变宽高"的函数
function cw(){
var c2=document.getElementById("txt");
c2.style.width="600px";
c2.style.height="300px";
}

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

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

//定义"取消设置"的函数
function ct(){
var c1=confirm("是否恢复原始值？")
if(c1==true)
{
var c2=document.getElementById("txt");
c2.;
}
}
</script>
</body>
</html>

查看全部

0 采集收起来源：编程挑战
2018-12-11
胡文豪

window.close();关闭窗口

查看全部

0 采集收起来源：JavaScript-关闭窗口（window.close）
2018-12-10
胡文豪

window.open(【url】，【窗口名称】，【参数字符串】)

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-12-10
胡文豪

prompt(str1,str2);
str1:要显示在消息对话框中的文本，不可修改。
str2:文本框中的内容，可以修改。
jsp提问，弹出消息对话框，询问一些与用户交互的信息，弹出雄安熙对话框（包含一个确定按钮，取消按钮与一个文本输入框）

查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-12-10
胡文豪

<br>是jsp中的换行符

查看全部

0 采集收起来源：JavaScript-输出内容（document.write）
2018-12-10
娅123
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
```
Object.innerHTML
```
注意:
1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
我们通过id="con"获取<p> 元素，并将元素的内容输出和改变元素内容，代码如下:
结果:
查看全部

1 采集收起来源：innerHTML 属性
2018-12-10
娅123
认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
看下面代码:
```
<a href="http://www.imooc.com">JavaScript DOM</a>
```
查看全部

0 采集收起来源：认识DOM
2018-12-10
慕函数0327554

使用innerHTML属性替换指定文本将替换所有该文本

查看全部

0 采集收起来源：innerHTML 属性
2018-12-10