码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript介绍

时间:2019-01-21 22:10:40      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:正则   button   引入   关闭   gettime   onchange   分享图片   时间   事件绑定   

什么是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 :提交 

JavaScript介绍

标签:正则   button   引入   关闭   gettime   onchange   分享图片   时间   事件绑定   

原文地址:https://www.cnblogs.com/wzhsc/p/10301229.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!