JavaScript基础知识篇一

JavaScript篇一

概述：全称 （javaScript）作用在浏览器的 脚本语言 , 可以直接在浏览器 解释运行 的脚本

一. 基本知识

1.js的作用：

html 和 用户交互

2.js 和 java 对比

Javascript和java除了名字和语法有点像，其他没有任何的关系

js基于对象 , 可以直接在浏览器解释 , js是弱类型原因 变量类型不需要声明 

变量所有的类型都是var

3. 2个交互函数

alert("hello world ");  浏览器弹窗
console.log("hello js");//控制台输出 控制台调 出来 (F12--->选择console)

4.js写的位置

1.  <!-- 
	可以引入 外部的js文件 （推荐使用）	
	src 就是引入外部js文件的 资源路径 
	如果script 标签 引入了外部文件 就不要在这个标签中写js代码 不能识别
	-->
	<script type="text/javascript" src="../js/a.js" >
	</script>
2.  可以写在  scirpt 标签中  
	<script>
		alert("hello js 我是 内部的 script 标签 ");
	</script>	
3.  可以写在html标签中  (不推荐这个写法)
	<button οnclick="alert('点我干啥....');">点我啊</button>

5.变量

变量的声明：
	js中所有的数据类型 都使用var 来声明:
	语法:  var a = 1; // a 是数据类型
		  var b = "hello"; // b 是字符串类型
		  var c = new Date(); // c 日期类型
	js是弱类型原因
变量：
	1. 全局变量: 在script标签中可以使用
	2. 局部变量: 在函数这种可以使用 函数结果后销毁
    

6.数据类型

undefined    定义了变量  没有赋值的数据类型
null  		(赋值为null) 判断他的类型为obj
string 		字符串数据类型  （js 中的字符串可以是使用 "" 或者'' 包裹）
boolean     布尔型 ture false
number   	包含了  整数 / 小数 / NaN(不是数字) / Infinity (无穷大)
obj 		数据类型
date		数字

7.表达式与运算符

===  等同符：不会发生类型的自动转化
==   等值符：会发生类型自动转化、自动匹配
算术运算符/赋值运算符/字符串运算符/条件运算符

8.分支语句

if…else		语句完成了程序流程中的分支功能，如果其中的条件成立，则程序执行相应的语句。
swith		可以根据一个变量的不同取值而采取不同的处理方法，在程序设计中提供不同的分支，
			这样的语句叫做分支语句。
在同时可以使用switch和if时推荐使用switch以获得更好的效率			

9.循环语句

for/While循环/Do-While
break语句是结束当前的循环，并把程序的控制权交给循环的下一条语句  这里是结束循环，循环到此为止
continue语句是结束当前的某一次循环，但是并没有跳出整个的循环  这里是结束一次循环，整个循环还在进行

二. 数组

概述：js数组更加类似java的容器。长度可变，元素类型也可以不同

​ Js数组长度随时可变！随时可以修改！我们可以通过修改数组的长度清空数组

1.js 中数组的创建

1. new Array();  通过new 创建数组

2. var a = ["值","值"]        可以 直接通过 [] 创建和赋值

2.数组的赋值

1.	var arr1 = new Array();
	arr1[0] = "张三";
	arr1[1] = "李四";
	arr1[2] = "王五";
2.	var a = [1,2,3,4,5];

3.数组的 取值

通过下标来取值  (下标 要小于数组的长度 )
如果取 一个下标不存在 不会报错 取的值是  undefined

4.数组的长度

arr.length 长度可以设置
如果长度设置 过长  其他没有数据的地方 补 null
如果设置的长度太短了 会删除 后面的数据

5.遍历

数组的遍历  循环 遍历 通过下标 获取数组的值
	for(var i = 0; i < arr.length;i++){
		console.log(arr[i]);
	}

6.函数

push() 尾部添加一个数据 
pop()  尾部删除数据
unshift() 头部添加数据
shift()   头部删除数据集
toString() 把数组转成字符串

三. 函数

概述：一个段代码执行 返回一个结果 (和java方法一样 method)

1.语法

关键字 function 函数名(参数列表){
						// 方法的实现 
		          }
	        函数的调用: 函数名();

2.参数列表

js都是弱类型语言  var 参数列表 var 可以省略
可以给任何参数 (包括 函数)
function test(a,b){
			 }

3.方法的返回值

return 结果;
	function test02(a1,b1){
	 	return a1 + b1;
	}

4.函数的参数为函数

		   /**
			 * test  函数名称     函数的参数需要传递一个 函数 
			 * @param {Object} a
			 * @param {Object} func
			 */
			function test(a,func){
				func(a);
			}
			
			
           /**
            *   "hello" test04 参数 1
            *   myFunc  test04 参数 2 (myFunc 函数 的地址 )
            * 
            */
            test("hello",myFunc);
			
			function myFunc(a){
				console.log("我是 方法  myFunc " + a);
			}

5.函数另外一个写法

			// 左边是 变量      右边  是函数  
			// 函数本质上也是个对象 把 这个对象的 地址 赋值给 变量 eat 
			var eat = function(){
			   console.log("hello function");
			}
			// 打印变量   eat 是一个函数 
			console.log(eat);
			// 调用 函数     函数名(); 
			eat();

6.内置函数

 	        // 内部函数    可以只调用系统函数 为 内部函数
			//  typeof   类型判断 
			var a = 1;
			var b = "hello";
			console.log(typeof a);
			console.log(typeof b);

			// parseInt() 数据类型转换  

			var n1 = "22";
			// 把字符串的数组直接转成  number 数据 
			console.log(parseInt(n1));

			// 字符串前面是数字可以提前出来转成Number 数据  如果不是在前面 不能转成数字 
			var n2 = "33abc";
			console.log(parseInt(n2));

			var n3 = "abc";
			// 不能转成 输出数字  结果为NaN  (not a number)
			console.log(parseInt(n3));
			// parseFloat()

			// isNaN()  判断是否是 NaN（不是数字） 数据类型  

			console.log(isNaN("abc")); //  true
			console.log(isNaN(34)); //  false 

			//eval() 根据上下文解析字符串 
			eval("var e1 = 'hello'");
			console.log(e1);

			var str = "中国";
			var str1 = escape(str);
			// 把str 进行 编码  (把人认识的转成  机器认识的 )
			console.log(str1);
			// 把机器认识的转成  人认识的
			var str2 = unescape(str1);
			console.log(str2);

四. 事件机制

1.事件机制的用途

1. 数据校验
2. 更好的交互体验

2.常用事件

onclick点击事件 / onmousenter鼠标移入事件 / onblur失去焦点事件  / onload页面加载事件

3.事件开发步骤

1. 添加指定的事件  	onclick
2. 事件触发的函数   xxx()

4.例子

		    <button οnclick="test01()"> 点我 </button> <br />
		    // 单击 事件 
			function test01(){
				console.log("点我干啥...");
			}
			
			name : <input οnblur="test02(this)" type="text" />

			 // 失去焦点  执行的函数 
			function test02(obj) {
				// 获取 我们的 输入框输入的内容  
				console.log(obj.value);
				console.log("我失去了焦点 ");
			}