JavaScript基本语法及JavaScript对象的获取（理论知识及案例展示）

1 JavaScript基本语法

1.1 什么是javaScript

js是web 上一种强大的编程语言用于交互时web 页面 ,不需要编译直接嵌入在HTML页面中由浏览器执行 node.js(解析js程序的软件)

历史 95-96改名竞争失败捐献 ECMA（欧洲计算机制造商协会）开源

js用来向html 页面添加交互行为
js是一种脚本语言（脚本语言是一种轻量级的编程语言）
js通常嵌入到html页面中
js是一种解释性语言（代码不执行预编译）

1.2 javaScript组成

核心（ECMAScript）语法语句
文档对象模型（DOM document object module）操作文档中元素
浏览器对象模型（BOM browser object module）

1.3 JavaScript的作用

添加动画效果轮播图数据验证（减轻服务器压力）浏览器事件作出相应

读写html元素检测访客浏览器信息

1.4 如何使用

三种方式

1 内嵌式

<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">js代码</script>
	</head>

2 外嵌式

<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js文件路径"></script>
	</head>

3 内部
写在标签内部以属性的方式出现

<h1 onclick=""></h1>

1.5 基本语法

1.5.1 变量

变量名命名规则：必须以字母下划线开头中间可以是数字字符下划线$

变量名不能包含空格

不能使用js关键字 function
javaScript严格区分大小写

1.5.2变量的声明

var 变量名;

变量的赋值

变量名 = 值；

var a  = "dudu";

var age = 18;

1.5.3 数据类型

基本 null boolean(tru false) number string undefined(声明了一个变量但是未赋值 )

变量调用typeof 将返回上述五个值

引用类型：

通常叫class 类 new Object(); new Date(); new String()

object

1.5.4 函数字符串转数字

parseInt() 取整 parseFloat();取浮点数

<script type="text/javascript">
    // 取整数
    //先给变量赋值
    var num="123.1315926";
    alert(num);
    //使用parseInt(变量名) 获得整数
    var num1 = parseInt(num);
    alert(num1);
    //使用parseFloat(变量名) 获得小数
    var num2=parseFloat(num);
    alert("浮点类型"+num2);
</script>

调用typeof(变量名) 获取数据类型

<script type="text/javascript">
    var num=123;
    alert(num);
    alert('num数据类型是'+typeof (num))
</script>

1.5.5 运算符

js运算符和java运算符基本一致

++ – += x+=y—> x = x+y; / %

比较运算符

== 两边数据是否相等
===全等比较数据是否相等比较数据类型
！= > < <= >=

逻辑运算符

&& and

|| or
! not

<script type="text/javascript">
			var num = "5";
			//加法结果为55  不会生成隐式转换来自行计算 减 乘 除 都可以自行计算
			alert(num+5);
			// 隐式转换   变量num 转成number   再进行计算
			alert(num-3);
			alert(num*5);
			/*  比较运算   ==  两边数据是否相等
			 ===  比较数据是否相等   比较数据类型
			 * */
			if(5==="5"){
				alert("数据相等的")
			}else{
				alert("数据类型不等");
			}
		</script>

1.5.6 语句

js 也存在 if if-else for switch do{}while()与java使用方式一样

1.5.7 函数（重点）

常用定义函数的方式有两种

1 普通函数

function 函数名(参数列表){ js逻辑代码}

调用函数：函数名(参数)；

2 匿名函数

function(参数列表){js逻辑代码}

使用场景两种

1.将匿名函数赋值给一个变量使用变量名调用匿名函数

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

function xxx(数字类型，字符串，函数类型参数){}

调用

xxx(100,“aa”,function(){});

<script type="text/javascript">
			/*
			 js中函数就是方法
			 * */
			function sum(a,b){
				return a+b;
			}
			alert(sum("I","love java"));
			var fn = function(a,b){
				return a+b;
			}
			console.log(fn(1,2));
			/*  js中  没有重载的概念  
			   重载 参数列表(类型 个数   顺序)
			 * */
		</script>

1.5.8 事件（重点）

1 事件源：被监听的html 元素

2 事件: 某类动作点击事件鼠标移入事件敲击键盘事件

3 事件与事件源绑定：事件源上注册事件

4 事件触发的响应行为：事件触发后执行的代码 —》一般进行封装

5 监听器声音针孔摄像头为事件源安装监听器鼠标监听器键盘监听器处理方式 -----》函数

常用的事件

onload 某个页面或者图片被完成加载

onsubmit 表单提交时触发该事件事件源是form

onclick 鼠标点击

onblur 移除焦点

onfocus 元素获得焦点

onchange 用户改变域的内容

onkeydown 某个键盘被按下

onmousemove 鼠标移动

<body>
		<script type="text/javascript">
			function fun(){
				alert("按钮被点击");
			}
			function funblur(){
				alert("失去焦点");
			}
			function fn(){
				alert("让您点你就点啊");
			}
		</script>
		<input type="button" name="" id="" value="按钮" onclick="fun()" />
	<!--绑定事件  失去焦点-->
	<input type="text" onblur="funblur()"/>
	<div onclick="fn()">你点我啊</div>
	</body>

2 js的对象获取

2.1 BOM 对象（了解）

浏览器对象模型一组对象

location 对象完成后退 history对象完成

1 Screen 对象存放着浏览器显示器的相关信息

2 Windows 浏览器窗口对象（常用）

3 Nivgator 对象正在浏览器

4 History 浏览器历史记录

5 Location 本质是Windows对象的一部分(常用)

Windows 浏览器窗口对象（常用）三个作用

1 弹框（重点）

Window.alert(提示信息警示框);

confirm(“提示信息”);

prompt(“提示信息”);

<script type="text/javascript">
			if(confirm("确定删除吗")){
				alert("点击确定")
			}else{
				alert("点击取消")
			}
			var a = prompt("清输入商品的价格");
			console.log(a);
		</script>

2 定时器（重点）

1 执行多次的定时器 setInterval（函数,毫秒值）；

2 执行一次的定时器 setTimeout（函数,毫秒值）；

3 清除定时器

3 全局方法（了解）