JavaScript是什么？
- 1.JS的主要功能
- 2.入门案例
- 3.变量
- 4.(if...else)判断语句
- 5.函数
互动方法
- 1.输出内容
- 2.警告（alert消息对话框）
- 3.确认（confirm消息对话框）
- 4.提问（prompt消息对话框）
- 5.打开新窗口（window.open）
- 6.关闭窗口（window.close)
DOM操作
- 1.认识DOM
- 2.通过ID获取元素
- 3.innerHTML 属性
- 4.改变 HTML 样式
- 5.显示和隐藏（display属性）
总结

JavaScript是什么？

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

1.JS的主要功能

1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息，控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。

2.入门案例

html中嵌入javascript有2种方式

第一种方式：
写在onclick后面

此时会弹出警告窗

<input type="button" value="hello" οnclick="window.alert('hello js')"/>

第二种方式：
通过脚本块的方式，页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行（这个代码的执行不需要事件）。
此时会弹出警告窗

<script type="text/javascript">
window.alert("first.......");
</script>

3.变量

什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。

语法：
var 变量名
变量要先声明再赋值

var mychar;
mychar="javascript";
var mynum = 6;

变量可以重复赋值

var mychar;
mychar="javascript";
mychar="hello";

注意：
当系统没有赋值的时候，会默认给undefined，undefined是系统的一个存在值
当系统直接没声明直接调用一个值，会报错

4.(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>

5.函数

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。
语法：
function 函数名() { 函数代码; }
说明：

function定义函数的关键字。
"函数名"你为函数取的名字。
"函数代码"替换为完成特定功能的代码。
例子：

function add2(){var sum = 3 + 2;alert(sum);
}

常用函数

函数名	功能
indexOf	获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf	获取指定字符串在当前字符串中最后一次出现处的索引
replace	替换
substr	截取子字符串
substring	截取子字符串
toLowerCase	转换小写
toUpperCase	转换大写
split	拆分字符串

互动方法

1.输出内容

语法：
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>

2.警告（alert消息对话框）

语法：
alert(字符串或变量);
例子：

<script type="text/javascript">var mynum = 30;alert("hello!");alert(mynum);
</script>

注意:

在点击对话框"确定"按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序。
alert输出内容，可以是字符串或变量，与document.write 相似。

3.确认（confirm消息对话框）

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法：
confirm(str);
参数说明：
str：在消息对话框中要显示的文本
返回值: Boolean值
当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
例子：

<script type="text/javascript">var mymessage=confirm("你喜欢JavaScript吗?");if(mymessage==true){   document.write("很好,加油!");   }else{  document.write("JS功能强大，要学习噢!");   }
</script>

4.提问（prompt消息对话框）

弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法：
prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
点击确定按钮，文本框中的内容将作为函数返回值
点击取消按钮，将返回null
例子：

var myname=prompt("请输入你的姓名:");
if(myname!=null){   alert("你好"+myname); }
else{  alert("你好 my friend.");  }

5.打开新窗口（window.open）

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

例子：

<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

6.关闭窗口（window.close)

close()关闭窗口
语法：
window.close();//关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例子：

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

DOM操作

1.认识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”。

2.通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
语法：
document.getElementById("id")
例子：

<script type="text/javascript">var mychar= document.getElementById("con")          ;document.write("结果:"+mychar); //输出获取的P标签。
</script>

结果:null或[object HTMLParagraphElement]

3.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。
语法：
Object.innerHTML
注意：
1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。
2.注意书写，innerHTML区分大小写。
例子：

<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">var mychar= document.getElementById('con')          ;document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容mychar.innerHTML = "Hello World"document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>

4.改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法：
Object.style.property=new style;
注意：
Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
基本属性表：

例子：

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

5.显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意：
Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。
value取值：

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素
例子：

<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" οnclick="hidetext()" value="隐藏内容" /> <input type="button" οnclick="showtext()" value="显示内容" /> </form>
</body>

当我点击隐藏内容会消失

总结

以上就是一些关于JavaScript的一些入门的内容，由个人结合资料并总结。如果内容有错误，希望可以予以指出和批评！我一定会接受大家的批评并吸取经验，及时的做出改正！！！

JavaScript入门教学相关推荐

MySQL 入门教学，真的已经很简洁了
MySQL 阅读本文前必看:本文是 MySQL 入门教学,从简介 -> 建立数据库 -> 理解数据类型和字段约束 -> 建立数据表 -> DML(增删改,查单独在我的另一篇博客 ...
经典的JavaScript入门书
经典的 JavaScript 入门书 --<JavaScript基础教程(第7版)> 原版销售累计超过 150 000 册! 欢迎你使用 JavaScript !使用这种容易上手的程序设计 ...
原版销售累计超过150 000册的经典JavaScript入门书
媒体评论如果你要学习 JavaScript,本书绝对不容错过. --JavaScript.about.com 一本伟大的 JavaScript入门书!适合初级程序员和 Web设计师. --Amazo ...
《jQuery与JavaScript入门经典》——2.6　小结
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第2章,第2.6节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
《jQuery与JavaScript入门经典》——第 1 章　动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
Windows Azure Marketplace入门教学-利用TabLeau Public构建可视化DataMarket应用
公告 :本博客为微软云计算中文博客的镜像博客. 部分文章因为博客兼容性问题 ,会影响阅读体验 .如遇此情况,请访问原博客 . 在上一篇教学Windows Azure Mar ...
JavaScript入门经典(第4版)
循序渐进精细讲解所有JavaScript知识点指导您构建建出神入化的完美Web应用程序 JavaScript入门经典(第4版) 基本信息原书名: Beginning JavaScript 原出版社 ...
c语言作业ppt模板,C语言入门教学PPT模板
目前要说发展前景最好的行业,那么就必然是互联网行业了,大部分行业现在都离不开计算机,也就是说学好计算机,走到哪里都不怕,特别是程序员,那么C语言就是首先需要接触的.本模板是由西西为大家整理的C语言入门 ...
《JavaScript入门经典（第6版）》——2.7　问答
本节书摘来自异步社区<JavaScript入门经典(第6版)>一书中的第2章,第2.7节,作者: [美] Phil Ballard 译者:李军陈冀康,更多章节内容可以访问云栖社区&quo ...

JavaScript入门教学

目录