JavaScript

JavaScript

• 作用: 给页面添加动态效果
• 语言特点
  1.属于脚本语言
  2.基于面向对象
  3.属于弱类型语言
  强类型:int x=10; String name=“张三”; int y;
  弱类型:var x=10; var name=“张三”;
  4.安全性高:js语言只能访问浏览器内部的数据不能访问浏览器以外的数据
  5.交互性高:js语言可以直接嵌入到html页面中,可以让用户脱离后端服务器只在前端页面和页面内容进行交互

如何在html页面中引入JavaScript代码

三种引入方式

• 内联:在标签的事件属性中添加js代码,当事件触发时执行
  事件: 就是系统提供的一些特定时间点, 点击事件:就是元素被点击时的时间点
• 内部:在html页面中的任意位置写script标签,在标签体内些js代码
• 外部:在单独的js文件中写js代码,在html页面中通过scrpt标签的src属性引入

语法

数据类型,变量,运算符,语句,方法声明

变量声明和赋值

• javaScropt语言属于弱类型语言
• java: int x =10; String s = “abc”; x=“xyz”;(报错 类型不匹配)
  Person p = new Person();
• JavaScript: var x=10; var s=“abc”; x=“xyz”;可以执行 var p = new Person();

数据类型

• 在javaScript中有对象类型
• 常见的对象类型
  数值 : number相当于java中所有数值类型的总和
  字符串: string 可以用单引号或双引号修饰
  布尔型: boolean true/false
  未定义: undefined 当变量只声明不赋值时,次变量的类型为未定义
  自定义: object Person Car Hero

运算符+ - * / % > < >= <= != = == ===

• 和java大体相同
• ==和===,==先统一等号两边变量的类型再比较,===先比较类型是否 相等,相等后再比较值"666"==666 true "666"===666 false
• typeof x 获取变量的类型

语句

• 和java大体相同
• for循环中int i=0;改为var i=0;

方法声明及调用

• java: public 返回值类型 方法名(参数列表){方法体}
• JS: function 方法名(参数列表){方法体}
• 三种声明方法的方式
  function 方法名(参数列表){方法体}
  var 方法名 = function(参数列表){方法体}
  var 方法名 = new Function(“参数a”,“参数b”,“方法体”);

和页面相关的方法

• 通过标签id获取标签对象

var d = document.getElementById("id");

• 获取和修改元素的文本内容

d.innerText = "xxx"; 修改元素的文本内容
d.innerText 获取

• 获取和修改文本框的值

var i = document.getElementById("i1"); 
	//获取文本框的值
	 //alert(i.value); 
	 //修改文本框的值
 	 i.value="按钮点击了";

• 修改元素的HTML内容

//修改
 d1.innerHTML="<h1>abc</h1>";
  //追加内容
   d1.innerHTML+="<h2>xyz</h2>";

NaN
Not a Number 不是一个数

JavaScript对象分类

• 内置对象:内置对象: number/string/boolean等
• 浏览器相关对象BOM: Browser Object Model 浏览器对象模型
• 页面相关对象DOM: Document Object MOdel 文档对象模型

BOM浏览器相关内容

• window: 该对象里面的属性和方法称为全局属性和全局方法,访问时可以省略掉window

window.alert()     window.parseInt()    window.isNaN()

• window对象中场景的方法

window.isNaN()  判断变量是否是NaN
window.parseInt()和window.parseFloat()  将字符串转成整数和转成浮点数
window.alert() 弹出提示框
window.confirm() 弹出确认框
window.prompt() 弹出文本框
window.setInterval(方法,时间间隔) 开启定时器  
window.clearInterval(timer) 停止定时器
window.setTimeout(方法,时间间隔) 开启只执行一次的定时器

• window中常见的属性

1.location:位置
	location.href  获取和修改当前浏览器的地址
	location.reload();  刷新页面
2.history: 历史
	history.length; 获取当前窗口的历史页面数量
	history.back(); 返回上一页面      等效左箭头
	history.forward(); 前往下一页面   等效右箭头 
	history.go(n);   n正值代表前进  n负值代表后退  0代表刷新
3.screen 屏幕
	screnn.width/height  获取屏幕的分辨率
4.navigator 导航帮助
	navigator.userAgent;  获取浏览器的版本信息

事件

• 什么是事件: 系统给提供的一些特定的时间点, 事件包括:鼠标事件/键盘事件/状态改变事件
• 鼠标事件:

onclick 点击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件
onmousemove 鼠标移动事件

• 键盘事件

onkeydown 键盘按下事件
onkeyup 键盘抬起事件

• 状态改变事件

onload  页面加载完成事件
onchange 值改变事件

事件绑定

• 如何给元素添加事件
  事件属性绑定

 <input type="button" value="事件属性绑定" 
        onclick="alert('触发!')">

动态绑定

btn.onclick = function(){
            alert("动态绑定事件触发!");
        }

事件取消

 在事件中执行retrun false; 则可以取消当前事件
​
       //在事件中执行return false可以终止事件
•   <a href="http://www.baidu.com" 
•   onclick="return confirm('您确认离开此页面吗?')">百度</a>

事件传递(事件冒泡)

当某一个位置有多个元素的事件需要触发,则事件响应的顺序是从最底层往上层传递,类似气泡从下往上所以称为事件冒泡

DOM文档对象模型

• 和页面相关的内容
  通过id获取元素 document.getElementById(“id”)
  获取和修改元素的文本内容 innerText
  获取和修改元素的html内容 innerHTML
  获取和修改文本框的值 i.value