JavaScript 简单上手

JavaScript

JavaScript简称JS

1. 功能:负责给页面添加动态效果

JS特点

JavaScript属于编程语言，有以下特点

1. 属于脚本语言，不需要编译由浏览器解析执行
2. 属于弱类型语言，变量的赋值不限制值的类型
3. 基于面向对象的特点，有一些和面向对象相同的点
4. 安全性高，只能访问浏览器内部的数据不能访问浏览器外部磁盘上其他数据
5. 交互性强，可以直接嵌入在html页面中直接和用户接融

JS使用

1. 内联

<input type="button" value="按钮" onclick="alert('内联引入')">

2. 内部

<input type="button" value="按钮" onclick="fn1()">

<script type="text/javascript>
	function fn1(){
		alert('内部');
	}
</script>

4. 外部

<!-- 引入外部js文件 -->
<script type="text/javascript" src="first.js"></script>

JS语法

var x = 10;//使用var定义变量

方法的定义和调用

function fn1(){
	alert('');
}

JS控制页面元素内容

//通过id获取页面中的元素对象
var d = document.getElementById("id");
//给div设置文本
d.innerText = "abc";
//给文本框设置文本
i.value="abc";

isNaN(x) //判断x是否是数值，其中NaN代表Not a Number 

JS的组成

ECMAScript内置对象：number,striing,boolean等
DOM：页面相关对象 ，文档对象模型
BOM：浏览器相关对象，包含和浏览器相关的对象

1.BOM对象的使用

常用方法

window 全局方法
window.alert() 弹出提示框
window.confirm() 弹出确认框
window.prompt() 弹出文本输入框
window.parseInt() 转整数
window.parseFloat() 转小数
var timer = setInterval(方法，时间间隔() 开启定时器
ClearInterval(timer) 停止定时器
setTimeout(方法，时间间隔)只执行一次的定时器

常用属性

1. history 历史
   a. history.length 得到历史页面数量
   b. history.back() 返回上一页面
   c. history.forward() 前往下一页面
2. location 位置
   a.location.href 获取和修改浏览器的请求地址
   b.location.reload() 刷新
3. screen 屏幕
   a.screen.width/Height 获取屏幕的分辨率
4. navigator 导航/帮助
   a.navigator.userAgent 得到浏览器的版本信息

常用事件

事件：系统给提供的一些特定时间点，事件包括：鼠标事件，键盘事件，状态改变事件

1. 鼠标事件：
   a. onclick 鼠标点击事件
   b. onmouseover 鼠标移入事件
   c. onmouseout 鼠标移出事件
   d. onmousedown 鼠标按下事件
   e. onmouseup 鼠标抬起事件
   f. onmousemove 鼠标移动事件
2. 键盘事件：
   a. onkeydown 键盘按下
   b. onkeyup 键盘抬起
   event.keyCode 获取按键编码 String.formCharCode 把按键编码转成字符
3. 状态改变事件：
   a. onload 页面加载完成事件
   b. onresize 窗口尺寸改变事件
   c. onchange 值改变事件
4. 事件绑定
   a.静态绑定
   b.动态绑定
   通过js代码给元素添加事件 好让html代码和js代码分离
5. 事件传递
   如果在某一个范围有多个元素的事件需要响应，响应的顺序是从最底层往上层传递

JS常用功能

1. 弹窗

1.window.alert("666");
2.var bool = window.confirm("就这吗");
alert(bool);
3.var age = prompt("请输入年龄",18);

2. 转类型

window.parseInt();//转整数
widow.parseFloat();//转小数

3. 定时器

 1.倒计时
 var i = 1;
        //每隔1000毫秒运行一次
        var timer = setInterval(function () {
            console.log(i++);
            if(i>10){
                //停止计时器
                clearInterval(timer);
            }
        },1000);

2.定时显示图片
var i = 1;
        var timer = setInterval(function () {
            d1.innerHTML = "<img src='"+i+".png'>";
            i++;
            if(i>2){
                clearInterval(timer);
            }
        },1000);