JavaScript快速入门

1.基础引入

1.1<script>标签插入代码

内部插入JS代码：

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

外部插入JS代码：

        单独创建一个JavaScript文件（简称JS文件），其文件后缀名为.js ，然后将JS代码直接写在JS文件中，不需要<script>标签，然后在HTML文件中使用<script>标签，例如：创建了一个script.js文件，在HTML中写入<script src ="script.js"></script>即可运行JS代码。

 JS在页面的位置：

        javascript作为一门脚本语言是可以（<script>）放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以位置在前的script先被执行

---

1.2注释

1. 单行注释：//+注释内容
2. 多行注释：/* + 多行注释内容 + */

---

1.3变量

语法： var  变量名

其中var可以表示任意数据类型，如整型，浮点型，字符串等。

变量名命名规则：

1. 变量必须使用字母、下划线(_)或者美元符($)开始。
2. 然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3. 不能使用JavaScript关键词与JavaScript保留字。

注意：

> 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。

> 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

---

1.4语句和判断语句

每一句JavaScript代码格式：语句;

        其中“;”分号为英文状态下输入，虽然分号可写可不写，加上分号有助于代码梳理。

 语法：

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

---

1.5函数

语法：

function 函数名()
{
     函数代码;
}

 函数调用：

        函数名( );

---

2.互动方法

2.1输出内容

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

四种输出方式：

1. 输出内容用""括起，直接输出""号内的内容，类似python中的print
2. 通过变量输出内容
3. 输出多项内容，内容之间用+号连接
4. 输出HTML标签，并起作用，标签使用""括起来

(1)

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

 (2)

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

(3)

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

(4)

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

如果想要实现输出空格，可以使用特殊字符如"&nbsp"实现

<script type="text/javascript">
  document.write("&nbsp;");//输出空格
</script>

---

2.2alert消息对话框

(1)语法：

        alert(字符串或变量);

(2)作用：
         弹出一个小窗口

例如：弹出 hello 的消息对话框

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

 

---

2.3conform消息对话框

(1)语法：

        confirm(str);

其中str为在消息对话框中要显示的文本，返回值是boolean值，当用户点击“确定”按钮时，返回true，点击“取消”则返回false。                                                                        

 (2)作用：

          弹出消息对话框用于允许用户做出选择

示例：

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

 

---

2.4prompt对话框

(1)语法：

        prompt(str1，str2);

(2)参数说明：

        str1：要显示在消息对话框中的文本，不可修改

        str2：文本框中的内容，可以修改

(3)返回值

        1.点击确定按钮，文本框中的内容将作为函数返回值

        2.点击取消按钮，将返回null

(4)作用：
        弹出消息对话框，通常用于询问一些需要与用户交互的信息；弹出消息对话框包含一个确定按钮，取消按钮和一个文本输入框

示例：

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

---

2.5打开新窗口

(1)语法：

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

(2)参数说明：

        URL：可选参数，在窗口中要显示网页的网址或路径，如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

        窗口名称：可选参数，被打开窗口的名称:

——>        1.该名称由字母、数字和下划线字符组成。

——>        2."_top"、"_blank"、"_self"具有特殊意义的名称。  

——>        _blank：在新窗口显示目标网页   _self：在当前窗口显示目标网页  

——>         _top：框架网页中在上部窗口中显示目标网页

——>        3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。  

——>        4.name 不能包含有空格。

        参数字符串：可选参数，设置窗口参数，各参数用逗号隔开

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

参数表:

参数	值	说明
top	Number	窗口顶部离开屏幕顶部的像素数
left	Number	窗口左端离开屏幕左端的像素数
width	Number	窗口的宽度
menubar	yes,no	窗口有没有菜单
toolbar	yes,no	窗口有没有工具条
scrollbars	yes,no	窗口有没有滚动条
status	yes,no	窗口有没有状态栏
height	Number	窗口的高度

示例：

<script type="text/javascript">
  function Wopen(){
   window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0')   
  } 
  Wopen();
</script>

---

2.6关闭窗口

(1)用法：

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

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

(2)close( )关闭窗口

示例：关闭新建的窗口

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

---

3.DOM操作

3.1认识DOM

        文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

---

3.2通过ID获取元素

（1） 网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

（2）语法：

document.getElementById("id")

示例：

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

 

---

3.3 innerHTML 属性

（1）innerHTML 属性用于获取或替换 HTML 元素的内容。

（2）语法：

        Object.innerHTML

注意：

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

> 注意书写，innerHTML区分大小写。

示例：

<p id="con">Hello Wrold!</p>
    <script>
        var mycon = document.getElementById("con");
        document.write("p标签原始内容："+mycon.innerHTML+"<br>")//
        
        mycon.innerHTML = "New Next!";//修改p元素的内容
        document.write("p标签修改后的内容"+mucon.innerHTML);
    </script>

 

---

3.4改变 HTML 样式

（1）HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

（2）语法：

        Object.style.property = new style;

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

 基本属性表：

属性	描述
backgroundColor	设追元素的背景颜色
height	设置元素的高度
width	设置元素的宽度
color	设置文本的颜色
font	在一行设置所有的字体属性
hontfamily	设置元素的字体系列
fontsize	设置元素的字体大小

示例：改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

 

---

3.5显示和隐藏 (display属性)

网页中经常会看到显示和隐藏的效果，可通过display属性来设置

语法：Object.style.diplay =value

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

value取值：

1. none：此元素不会被显示（隐藏）
2. block：此元素将显示为块级元素（即显示）

示例：实现id="con"的p标签元素的隐藏和显示

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

---

3.6控制类名 (clalssName 属性)

（1）className 属性设置或返回元素的class 属性。

（2）语法： object.className =classname

（3）作用：

1. 获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观