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

  • A+
所属分类:JavaScript JavaWeb

JavaScript介绍

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

js概述

运行在浏览器端的一门语言,不需要编译可以直接被浏览器解析执行

js这门语言基于浏览器 离不开浏览器

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种

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

js的小细节:

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

Js的核心语法(ECMA script)

变量   运算符   流程控制语句   函数(方法)

1 变量

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

2 数据类型

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使用规律一致
三目运算符  不同点:名称不一致 规律和三元运算符一致

4 流程控制语句(if for)

java怎么用js就怎么用

需求:完成一个9*9法表

js的debug使用

5 函数

分为2种:声明式(掌握)       匿名式(了解)

声明式函数:

java方法: public 返回类型  方法名(参数...)
           {
                   代码;
                   [return 返回值]
            }

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

函数的特点(重要)

1 js的函数没有重载一说 函数名相同,后面的会覆盖前面的

2 js的函数可以传递多个参数,会自动创建一个数组,该数组会接受值,然后将数组的值给参数 数组的名称:arguments

3 传递的参数可以是任意类型

ps:arguments开发中几乎不用 但是可以用于看js框架的源码

匿名式函数:

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

js函数中变量的作用域(全局变量和局部变量)

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

定时器

轮播图

JS的事件(重要)

触发某些条件可以实现指定的功能

js提供的常见事件:

onclick 单击事件 ondblclick 双击事件 onfocus 获取焦点事件 onblur 失去焦点事件 onmouseover 鼠标移入到某个元素身上 onmouseout 鼠标移出到某个元素身上 onload 页面加载事件

Js的内置对象

1.Array数组对象

创建方式:

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数组的特点:

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

js数组的方法:

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

2.Date日历对象

创建方式:

var date=new Date()

方法:

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

总结:

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>之间使用方法 不需要对象

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

在浏览器中的调试

IE、Chrome、FireFox中调试的快捷键:F12

设置断点和语法错误提示示例:

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

  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
一个Java基础入门的教程视频
Java图书管理系统
C语言郝斌老师教程
C语言项目源码分享

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: