JavaScript基本入门

一. js简介

1. 什么是js

JavaScript是web开发中不可少的脚本语言, 不需要编译进可以运行,它是"寄生"在html体内随网络传输到客户端,在浏览器内存中运行

2. js的作用

实现动态效果:

• 让网页动起来(js可以操作网页)
• 让浏览器动起来(js可以操作浏览器)

3. js的组成

• ECMAScript: 基本语法规范

• dom (Document Object Model ): 文档对象模型. js调用dom对象可以造作网页

• bom (Browser Object Model ): 浏览器对象模型, js调用bom对象可以造作浏览器

4. js的引入

• 内部js: 在一个html中使用,在html中加入script标签

<script>
	alert();
</script>

• 外部js: 在多个html中使用,在外部定义script内容,html要使用时根据路径引入即可

<script src="js文件路径"></script>

     注意事项:

1. 一个script标签功能要单一,不能内部和外部嵌套使用
2. js代码越晚加载越好,通常放在body结束标签之前

二. js的基本语法

1. 基本语法

1.1 定义变量

js是弱类型语言:

声明变量时,不需要声明类型,一切变量的声明都使用: var

1.2 数据类型

js是动态性语言:

• number: 数字类型,一切数字都是number
• string: 字符串类型
• object: 对象类型(js的引用数据类型,内置类,只有9个)
• boolean: 布尔类型,true,false
•  undefined: 未定义类型,值只有一个:  undefined

1.3 运算符

+,-,*,/,+=,-=,*=,/=,%,%=,>,<,>=,<=,==,!=,&&,||,!,++,--

注意事项:

==和===:

• ==: 比较值,只要值一样就是true
• ===: 比较值和类型,只有值和类型都一样才是true

 - , * , / :

• 如果运算的都是数字,结果是数字运算的结果
• 如果有变量不是数字,js会尝试转换成数字再运算,如果转换不成功,结果是NaN
• 如果除数是0,结果是Infinity

1.4 流程控制语句

if, else, for, switch, while

注意事项:

在if语句中,判断条件的结果是false, 0, "" , undefined, null 其判断条件的结果是false,其他结果都是true

2. 函数

2.1 命名函数(普通甘薯)

//定义普通函数
function 函数名(形参1,形参2,...){
    //函数体
    //需要返回值就return,否则就不return
} 

//调用函数
var result = 函数名(形参1,形参2,...);

 

2.2 匿名函数

1. 匿名函数赋值给一个变量,通过变量名调用

   //定义匿名函数
   var fn = function(){
       //函数体    
   }
   
   //调用匿名函数
   var  result = fn();

    

2. 匿名函数作为另一个函数的实参

   //setInterval方法,定时执行
   setInterval(function(){}, 2000);

    

3.事件

3.1 相关概念

• 事件源: 被监听的对象,通常是html标签
• 事件(监听器): 用于监听事件源上发生的动作或者状态变化
• 响应行为: 监听到事件源变化后要执行的代码

3.2 事件(监听器)

事件	描述
onclick	鼠标单击
ondblclick	鼠标双击
onsubmit	表单提交
onchange	域内容改变,通常用于下拉框选项
onload	加载完成
onfocus	获取焦点(光标)
onblur	失去焦点(光标)
onkeydown	键盘按下
onkeypress	键盘按下或按住
onkeyup	键盘弹起
onmousedown	鼠标按下
onmouseup	鼠标弹起
onmouseover	鼠标进入
onmouseout	鼠标出去
onmousemove	鼠标移动

3.3 事件绑定

• 普通函数的方式

  <input type="button" value="点击弹窗" onclick="show()">
  
  <script>
      function show(){
      alert("点我干嘛");
  }
  </script> 

• 匿名函数的方式

  <input type="button" value="点击窗口" id="bt">
  
  <script>
      document.getElementById("bt").onclick = function(){
          alter("点我干嘛");
  }
  </script>

三. js的bom

1. bom对象简介

浏览器对象模型,是把浏览器抽象封装成的对象,js通过操作bom对象来操作浏览器

有哪些bom对象:

• window: 浏览器窗口对象
• location: 浏览器地址对象,可以操作地址进行跳转
• history: 浏览器的历史记录对象,可以操作历史记录,进行前进后退
• screen: 浏览器的屏幕信息显示对象,可以操作浏览器大小,位置,颜色等显示信息
• navigator: 浏览器信息对象,只读的,可以获得浏览器的内核,版本,操作系统等信息

2. bom对象的使用

2.1 window:操作浏览器窗口

2.1.1 让浏览器弹窗:

• 普通弹窗: alert(内容) ,没有返回值
• 确认弹窗: confirm(内容), 返回boolean值,确认返回true,取消返回false
• 输入弹窗: prompt(内容), 返回输入的内容,确定返回string,取消返回null

2.1.2 通知浏览器开启定时任务

• 执行多次的定时器:

开启: var timer = setInterval(函数对象,间隔毫秒值)

清除: clearInterval(timer)

• 执行一次的定时器:

开启: var timer = setTimeout(函数对象,延迟毫秒值)

清除: clearTimeout(timer)

2.1.3 其他方法

• parseInt(string): 转换成整数 
• parseFloat(string): 转换成小数
• eval(string): 把string作为js代码执行一次

2.2 location:操作浏览器地址

• 获取当前地址: var url = location.href;
• 网址跳转: "http://www.baidu.com"
• 页面刷新: location.reload()

四. js的dom