JavaScript编程基础：基础语法、调试、事件、内置对象

2017年3月15日14:25:38JavaScript JavaWeb评论119字数 2670阅读8分54秒阅读模式

JavaScript介绍

我们有三门技术，被称为浏览器端页面的三剑客
1 html 制作页面
2 css  美化页面
3 js   可以让页面的内容动态起来 给用户更好的体验效果

js概述

运行在浏览器端的一门语言，不需要编译可以直接被浏览器解析执行文章源自JAVA秀-https://www.javaxiu.com/312.html

js这门语言基于浏览器离不开浏览器文章源自JAVA秀-https://www.javaxiu.com/312.html

javascript和java的区别

都是一门语言，除了名称有点相似，别的没有关系
js:针对浏览器的开发语言   java:针对后台业务的开发语言

js的三个组成部分

1 ECMA script: 所有javascript的核心语法 （变量 运算符  if  for  函数..） 
2 BOM:浏览器对象模型 JS把浏览器划分成了多个对象  这些多个对象都可以帮你去操作浏览器 统一称为：BOM
3 DOM:文档对象模型  js把整个html文档划分成了多个对象 这多个对象都可以帮你去操作html标签 统一称:DOM

学习语法：ECMA script
使用浏览器功能：BOM
使用文档功能：DOM

js的引入方式

在页面编写js代码，js的代码的引入方式：有2种文章源自JAVA秀-https://www.javaxiu.com/312.html

 1 内部方式
        建议在<head></head>之间使用<script></script>来引入js代码
        <script></script>可以写多个 顺序执行：从上到下执行
 2 外部方式
        在外部创建一个js文件 编写js代码
        在需要用到的页面引入该js文件地址即可  格式：<script src="js文件地址">

js的小细节：文章源自JAVA秀-https://www.javaxiu.com/312.html

1 内部和外部可以共存 执行顺序页面从上到下执行
2 如果引入了外部的文件，在该script标签下就不能在写内部代码了
3 js的注释 （使用和java一样）//   /* */
4 js代码可以没有结尾分号，建议结尾加上

Js的核心语法(ECMA script)

变量   运算符   流程控制语句   函数（方法）

1 变量文章源自JAVA秀-https://www.javaxiu.com/312.html

js定义变量统一使用关键字：var
特点：定义的变量是弱类型变量  可以接受不同的数据类型值

2 数据类型文章源自JAVA秀-https://www.javaxiu.com/312.html

1 原始类型
   String               ""/''                           例如：  var a="aaa" 或 var a='aaa'
   Number             int/long/short/double/...         例如：  var b=123 或 var b=123.123
   boolean             true/false                       例如：  var c=true 或 var c=false
   object(null)          null                           例如：  var d=null
   undefined            undefined                       例如：  var e;
   测试以上5种数据类型：typeof(值):测试值类型
2  引用类型
     就是js提供的一批内置对象，都是引用类型

3 运算符(不同点)文章源自JAVA秀-https://www.javaxiu.com/312.html

算术运算符  不同点：/   除法运算会取小数位
赋值运算符  不同点：/=  除等运算也会取小数位  
比较运算符  不同点：
              == 等于  != 不等于   判断的是值不会判断类型
              === 恒等  !== 不恒等  既会判断值还会判断类型
逻辑运算符  && || ! 和java使用规律一致
三目运算符  不同点：名称不一致 规律和三元运算符一致

4 流程控制语句（if for）文章源自JAVA秀-https://www.javaxiu.com/312.html

java怎么用js就怎么用

需求：完成一个9*9法表文章源自JAVA秀-https://www.javaxiu.com/312.html

js的debug使用文章源自JAVA秀-https://www.javaxiu.com/312.html

5 函数文章源自JAVA秀-https://www.javaxiu.com/312.html

分为2种：声明式(掌握)       匿名式（了解）

声明式函数：文章源自JAVA秀-https://www.javaxiu.com/312.html

java方法： public 返回类型  方法名（参数...）
           {
                   代码；
                   [return 返回值]
            }

js函数：  function 方法名（参数...）{
                   代码
                   [return 返回值]
              }
调用：方法名(参数...);

函数的特点(重要)

1 js的函数没有重载一说函数名相同，后面的会覆盖前面的文章源自JAVA秀-https://www.javaxiu.com/312.html

2 js的函数可以传递多个参数，会自动创建一个数组，该数组会接受值，然后将数组的值给参数数组的名称：arguments文章源自JAVA秀-https://www.javaxiu.com/312.html

3 传递的参数可以是任意类型文章源自JAVA秀-https://www.javaxiu.com/312.html

ps:arguments开发中几乎不用但是可以用于看js框架的源码文章源自JAVA秀-https://www.javaxiu.com/312.html

匿名式函数：文章源自JAVA秀-https://www.javaxiu.com/312.html

/*匿名式函数*/
var 变量名 = function(参数列表) {
     函数体;
}
/*调用*/
变量名();

js函数中变量的作用域（全局变量和局部变量）文章源自JAVA秀-https://www.javaxiu.com/312.html

全局变量可以在当前任意位置获取到
局部变量只能在本函数中获取到 在外部获取不到 
注意：如果局部变量去掉了var关键字 会默认转换成全局变量 不建议使用这种方式 看到别人写 能知道即可

定时器文章源自JAVA秀-https://www.javaxiu.com/312.html

轮播图文章源自JAVA秀-https://www.javaxiu.com/312.html

JS的事件(重要)

触发某些条件可以实现指定的功能文章源自JAVA秀-https://www.javaxiu.com/312.html

js提供的常见事件：文章源自JAVA秀-https://www.javaxiu.com/312.html

onclick 单击事件 ondblclick 双击事件 onfocus 获取焦点事件 onblur 失去焦点事件 onmouseover 鼠标移入到某个元素身上 onmouseout 鼠标移出到某个元素身上 onload 页面加载事件文章源自JAVA秀-https://www.javaxiu.com/312.html

Js的内置对象

1.Array数组对象

创建方式：文章源自JAVA秀-https://www.javaxiu.com/312.html

1.var arr1=[el,el,el,el];  掌握
2.var arr2=new Array();   了解  创建一个长度为0的数组
3.var arr3=new Array(2);  了解  创建一个长度为2的数组
4.var arr4=new Array(el,el,el);  了解  创建一个数组并赋值

js数组的特点:文章源自JAVA秀-https://www.javaxiu.com/312.html

1.数据可以是任意类型
2.数组的长度是动态可变的
3.数组的索引不存在角标越界行为

js数组的方法：文章源自JAVA秀-https://www.javaxiu.com/312.html

1.concat() 将多个数组组成一个数组
2.reverse() 对数组中的内容进行反转
3.sort()  对数组的内容进行排序

2.Date日历对象

创建方式：文章源自JAVA秀-https://www.javaxiu.com/312.html

var date=new Date()

方法:文章源自JAVA秀-https://www.javaxiu.com/312.html

toLocaleString() 将日期变成当前日期的字符串格式

总结：文章源自JAVA秀-https://www.javaxiu.com/312.html

1 会在页面导入js代码（2种）
ECMASCRIPT
2 知道怎么样定义一个变量 以及变量的类型
3 运算符 流程控制语句要会使用
4 会定义各种函数以及知道函数的特点
5 轮播图
      DOM: document(write(..)  getElementByID（..）)      
      BOM: window(alert()   setInterval(...))
6 js的事件  
7 js的内置对象（Array  date）

Js的全局函数

特点：直接可以在<script></script>之间使用方法不需要对象文章源自JAVA秀-https://www.javaxiu.com/312.html

1.parseInt() 将字符串转成number类型   只取整数  截取首字母之前的内容
2.parseFloat() 将字符串转成number类型 取全部包含小数  截取首字母之前的内容
3.isNaN()  判断是不是 不是一个数值 
4.encodeURI() 可以将字符串转化成utf-8编码格式
5.decodeURI() 可以将utf-8编码格式转换成字符串