JavaScript介绍

Posted 2021-02-05 wzhsc

什么是JavaScript

javascript 被设计用来向html页面添加交互行为。

JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。

JavaScript 通常被直接嵌入HTML页面。

JavaScript的引入方式

内部引入方式：定义<script type=”text/javascript”>   </script> 任意位置

外部引入方式：定义<script type=”text/javascript”></script> 通过src属性引入外部的js

                          例如：<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>  

注意：

        1、可以定义在html的任意地方，但是定义的位置会影响执行的顺序

        2、script可以定义多个

JavaScript的组成部分

ECMAScript

1、数据类型：

         1、原始数据类型

                     1、number：数字，NaN（不是数字的一个数字类型）

                     2、string:字符串

                     3、boolean：true&false

                     4、null：一个对象为空的占位符

                     5、undefined：未定义。如果一个变量没有给初始值，就会默认赋值undefined

         2、引用数据类型： Array  Boolean  Date  Math  Number  String  ReqExp

2、变量

      java 是强类型语言；JavaScript是弱类型语言

      强类型和弱类型的区别：

              强类型：在开辟空间的时候确定类型，以后只能存储该类型

              弱类型：在开辟空间的时候不确定类型，以后能存储各种类型

      语法：var 变量名 = 赋值号

      属性：typeof 获取变量的类型

      注意：null运算后结果是object

3、运算符

      1、++，--

                string 到 number 会发生自加

                注意：如果string 不是数字： 结果是NaN

      2、boolean 转 number

                结果：true：1  false：0

      3、== ：只判断值

           ===：判断值的同时判断类型

      4、逻辑运算符：&&  ||

                  1、number：0或者NaN为假，其他都是真

                  2、string：除开（""）是假的，其他都是真的

                  3、nul l& undefined，假

                  4、对象,所有对象都是真的

       5、流程控制语句

                  if、do...while、while、for 等语法的应用不变

                  switch：可以接收任意类型

                  for-in（for each）

                        例如：var arr = ["a","b","c"];

                                   for(index in arr){

                                          alert(arr[index]);

                                    }

 4、基本对象（详情：http://www.w3school.com.cn/jsref/jsref_obj_math.asp）

         1、Function（函数/方法）对象

                   创建方法：

                                 1）function 方法名（参数）{}

                                      eg：function  aaa( a, b) {

                                                  return a+b;

                                             }

                                 2）var 方法名 = function(){}

                                       eg：var b = function (a, b) { }

                    注意：

                              1、function的参数列表，底层实际上是一个数组（arguments）

                              2、定义参数不用写类型，返回值也不写类型

                              3、方法的调用之和方法名相关，和参数无关

         2、Array数组对象

                   创建：

                           var arr = new Array(元素列表);

                           var arr = new Array(长度)

                           var arr = [元素列表];

                   方法：

                           join();将数组中的元素，按照一定的分隔符拼接为字符串

                           push（）：向数组的末尾添加一个元素或者多个，并返回新的长度

                   属性：length：长度

                   注意：js中的数组长度是可变的，元素类型也是可以改变的

         3、Date对象

                   创建：var date = new Date();

                   方法：

                             toLocaleString：本地时间格式

                             getTime：毫秒值

         4、Math对象

         5、RegExp对象

                    方法：

                           var reg = new Reg("正则表达式");

                           reg.test();

BOM                   

         window（窗口）：

                概念：所有跟window相关的方法和属性 都可以省略掉window 直接使用

                弹框：

                         警告框：alert()

                         提示框：pormpt（），（确定：返回输入值 取消：null）

                         确认框：confirm()，（确定：true  取消：fasle）

                open()：打开一个新的网页

                close()：关闭当前网页，eg：<button onclick="window.close()">点</button>

                定时器：

                         setTimtout(code,mills)：延时多久时间后，执行一次

                         setInterval()：每个多少时间，执行一次

                         clearTimeout（定时器的id）

                         clearInterval（定时器id）

                         eg：

                                 var id=  window.setTimeout(function () {

                                         alert("hello java")

                                 },3000)

                注意：code可以是一段代码，也可以是一个方法

         location（定位信息）

                href：设置或者获取url，eg：location.href = "http://www.baidu.com"

                reload():刷新

         history（历史）

                back() ：后退

                forward()：前进

                go()：go(-1)：后退；go(1)：前进

 DOM

         节点（Node）：

                文档节点：document

                元素节点：element

                属性节点：attribute

                文本节点：text

                注意：如果我们可以获取到节点 那么就可以动态的修改节点的属性和方法        

         获取节点的方式：

                getElementById()：通过id获取

                getElementsByClassName（）：通过class名

                getElementsByName：通过name名获取

                getElementsByTagName（）：通过标签名获取

         设置获取节点的value：

                节点对象.value;

                节点对象.value= 值

         设置获取节点的标签体：

                节点对象.innerHTML

                节点对象.innerHTML = 值

                innerHTML和innerText：

                         innerText：只针对于文本，如果文本中有html标签 ，会原样输出

                         innerHTML：如果文本中有html标签 ，会解析以后输出

         设置获取节点的style属性：

                节点对象.style.属性；

                节点对象.style.属性 = 值

         设置获取节点的属性：

                节点对象.属性；

                节点对象.属性 = 值

         创建节点对象：

                document.createElement()：创建元素节点

                              添加元素：appendChild()

                document.createTextNode()：创建文本节点

                             添加文本节点： appendChild()

                document.createAttribute()：创建属性节点

                              添加属性节点：setAttributeNode()

         事件介绍：

                1、点击事件

                           单击：onclick

                           双击：ondblclick

                           事件绑定：

                                   1、通过标签本身的相关属性设置

                                   2、通过element对象绑定事件  

                2、焦点事件

                           获取焦点：onfocus

                           失去焦点：onblur

                3、加载事件

                           onload：页面加载完成触发

                           window.onload = function (ev) {}

                4、鼠标事件

                          onmousedown 鼠标按钮被按下   

                          onmousemove 鼠标被移动

                          onmouseover 鼠标移到某元素之上

                           onmouseout  鼠标从某元素移开

                           onmouseup   鼠标按键被松开

                5、键盘事件

                           onkeydown 某个键盘按键被按下

                           onkeypress 某个键盘按键被按下并松开

                           onkeyup 某个键盘按键被松开

                           

                           onkeydown：键盘上的所有按键

                           onkeypress：无法识别系统按键（回车，箭头）

                6、选择和改变

                           onchange：内容改变

                           onselect：文本被选择

                7、表单事件

                           onsubmit ：提交