js基础语法

静态网页组成：
    结构（html）、样式（css）、动作（javascript 简称 js）。

 菜鸟教程地址：菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。..https://www.runoob.com/

js三部分组成：
        核心（ECMAscript）、文档对象（DOM）、浏览器对象（BOM）
        js基于对象，不是面向对象
        基于对象：系统事先创建对象，直接使用。
        面对对象：自己创建对象

JavaScript大体模块：

ECMAscript

首先ECMA表示欧洲计算机协会，JavaScript刚出来版本非常杂乱，这时候ECMA站出来制定了一个标准。

它就是JavaScript的语法了，也是最枯燥的一部分

ECMAscript又分为

js引入方式

1、html页面script标签

<script type="text/javascript">
    alert("hello world!");
</script>

2、html引入js文件

// js文件
alert("hello world!");

// html文件(建议body底部引入)
<script type="text/javascript" charset="utf-8" src="./js.js"></script>

js的语法

// js是弱类型语言

//1 声明变量, 变量的类型是随时可以变化的
var a = 1;
a = "haha";
a = false;
//2 注释    注释写法与java一模一样.没有文档注释. //   /**/
//3 声明变量
var b=2,c=3;
//4 js中每行语句的结束使用 ";" 号来表示. 也可以不使用";".(推荐都加上)
		     
//5 声明变量时,也可以不加var => 加var声明,作用范围在代码块中.不加var声明,作用范围为全局
		   
//6 字母大小写.语法区分大小写 
		     
function fun1(){
    var d = "hello"
    e =  "heihei";
}
		     
fun1();
alert(e);//

js的变量

<script type="text/javascript">
			//java中的变量分类
				//1 基本数据类型 => 8个
				//2引用数据类型
			//js中的变量分类
				//1 原始类型
				//2 对象类型
	//---------------------------------------------------------------
		//js的原始类型  5种
			//1 number 数字  不分整型或浮点型
			//2 string 字符串  
			//3 boolean 布尔 
			//4 null  一般人为来赋值为null.  对象数据类型的占位符.
			//5 undefined(未定义) null的衍生值. 通常是系统自动赋值.当我们创建一个变量,并且没有初始化.
			
			var a = 10;
			var b = 3.14;
			var c = "hello";
			var d = 'world';
			var e = true;
			var f = null;
			var g = undefined;
			var h ;
			var i = new Object();
		//运算符=> typeof => 返回原始类型的类型
		
		/* alert(typeof a);
		alert(typeof b);
		alert(typeof c);
		alert(typeof d);
		alert(typeof e);
		alert(typeof f);
		alert(typeof g);
		alert(typeof h); */
		alert(typeof i);
		// typeof null => object
		// 是javascript中的一个bug.后来将该bug保留了.
//----------------------------------------------------
//对象类型,下午介绍
		</script>

js的语句

<script type="text/javascript">
		//java中的语句
			//1 判断
				// if  else/ switch
			//2 循环
				// for / while do / do while
		//js中的语句(语法种类等都与java的一模一样)
			//1 判断
				// if  else/ switch
			//2 循环
				// for / while do / do while
		//----------------------------------------------------------------
		function fun1(){
					var num1 = 100;
					var num2 = 100;
					if(num1<num2){
						alert("num1小");
					}else if(num1==num2){
						alert("相等");
					}else{
						alert("num1大");
					}
				}
		//fun1();
	//-----------------------------------------------------------------
	//从1累加到100
	function fun2(){
		var count = 0;
		for(var i = 1 ; i<=100 ; i++){
			count += i;
		}
		alert(count);
	}
	fun2();
	
	</script>

js的运算符

一元运算符：表示只有一个参数，参与运算（如正负号，自增，自减）

		<script type="text/javascript">
		//java中的运算符
		var a = -2;
		var b = +2;
		//=======================================
		var c = "1234";
		alert(typeof c);
		c = -c;
		alert(typeof c);
		//js是弱类型=>js中的类型会根据需要自动变化.
		//上面的例子中因为+是数学运算符.所以需要c是数字类型.js就会自动将c转换为number类型.
		
	</script>

typeof是用来查看变量的类型

Boolean运算

<script type="text/javascript">
		
	//--------------------------------------------------
		//js会在需要什么类型时,对类型自动进行转换
		
	
		
		// number => boolean   除了+0,-0,NaN  其他都是true.
		// string => boolean   字符串不为空,那么其他都是true.
		// null => boolean 		false
		// undefined => boolean false
		// Object   => boolean	true
		
	//----------------------------------------------------------------	
		/* var n = +"abc";// NaN => not a number 
		alert(n); */
	//-----------------------------------------------------------------
	
	 	if("haha"&& new Object()){
			alert("true");
		}else{
			alert("false");
		} 
	</script>

数学运算

<script type="text/javascript">
		//js中的运算符
		// 使用+法时, 如果相加的值包含字符串,会自动转换为字符串类型
			var a = "1"+1;
			alert(a);
		//其他数学运算符中,字符串会自动转换为数字
			var b = "2"-1;
		</script>

关系运算

		<script type="text/javascript">
		//js中的运算符
		
		alert("2">1);// "2" => 2  true
		
		alert("aa">"aaa");//字符串的比较规则=>asc码的比对   true
	
		</script>

等性运算

<script type="text/javascript">
		//js中的运算符
		// == != 
			
		/* alert(1 == true);//true
		alert(2==true);// false
		alert(0==false);// true
		alert(0 == null);// false 
		alert(null == undefined);//true
		alert(NaN == NaN);// false  凡是NaN参与判断运算符 除了 ! != 其他全是false
		*/
	//--------------------------------------------------------------
		// ===	比较时包括类型本身
		
		alert(1 === true);//false
		alert("1" === 1);// false
			
		alert(typeof "1"+1);
		//alert(typeof +"1"+1);
	</script>

三元运算

<script type="text/javascript">
		//js中的运算符
		var a = 100;
		var b =20;
		alert(a>b?"a厉害":"b厉害");
	</script>

如果a>b?a:b执行 如果a大于b成立，则执行a，反之则执行b

赋值运算

<script type="text/javascript">
		//js中的运算符
		/* var a = 1;
		
		a+="1";
		
		alert(a);//11 */
		//-------------------------------------------------
		
		var a ="5";  //自动类型转换  临时类型转换
		if(a>3){
			
			alert("haha");
		}
		alert(typeof a);//string
	</script>

基础语法，说完了，接下来讲讲对象

对象

function

初识函数

<script type="text/javascript">
	//1 对象的功能
					/* function fun1(){
						alert("hello");
					}
					alert(fun1.toString());//打印函数具体代码
					alert(fun1);
					fun1(); */
	//2 对象的创建
		var fun2 = function (a,b){
		
			alert("hello2");
		};
		var fun3 = new Function("alert('hello3');");
		//fun2();
		//fun3();
	//3 对象的属性
		alert(fun2.length);//length属性代表函数的参数个数
	//4 对象的方法
		// toString => 打印函数的定义
</script>

函数进阶

<script type="text/javascript">
	//函数的进阶 
	function fun1(a,b){
		alert(a+b);
	}
	//调用
	fun1(1,2);//3
	fun1(1,2,3,4);//3
	fun1();//NaN
	//结论: js中的函数在调用时,只看函数名称.不看参数.
</script>

<script type="text/javascript">
	//函数的进阶 
	// arguments  => 函数运行时,参数的封装
	function fun1(){
		//alert(arguments.length);//打印实际传递的参数个数
		var count = 0;
		
		for(var i =0; i<arguments.length ; i++){
			
			count += arguments[i];
		}
		alert(count);
	}
	//调用
	fun1(1,2);//3
	fun1(1,2,3,4);//10
	fun1();//0
</script>

<script type="text/javascript">
	//函数的进阶
	//与java一样,使用return 关键字
	// return 也可以结束方法的调用
	function fun1(a,b){
		alert(a+b);
		return a+b;
	}
	
	//alert(fun1(1,2));
	//------------------------------------------------
		function fun2(){
		alert("haha");
		return ;
		alert("heihei");
	}
	//alert(fun2());//undefined
	//-------------------------------------------------
	//void运算符: 用于拦截方法的返回值.
</script>

三个包装对象

<script type="text/javascript">
	//三个包装对象
	//js中5个原始类型,有3个包装类. => Number String Boolean
//------------------------------------------------------------------
	//js中  有伪对象的概念.原始类型可以直接调用 对应包装类型的属性或函数.
//-------------------------------------------------------------------	
	// String
	//1 创建
	//填写任何类型的参数都可以.
	//也就是说构造方法具有强制数据类型转换的功能.=>  Number String Boolean 的构造都具有强制数据类型转换的功能
	var str = new String("hello");
	//2 属性
	/* alert(str.length);
	alert("world".length); */
	//3 方法
	//一:没有用的=>帮助生成Html标签的方法
		//alert(str.anchor("haha"));
	//二:有用的 => 与java一样
	var str2 = new String("hello world");
		//charAt
		alert(str2.charAt(1));
		//indexof
		alert(str2.indexOf("e", 5));
		//lastindexof
		//substring
		alert(str2.substring(0, 5));
		//toLowerCase/toUpperCase
	//三:有用的=>与正则结合使用的
		//split
		//replace
		//match
		//search


</script>

instanceof

<script type="text/javascript">
	//Instanceof  用于判断变量是否属于指定类型
	
	var str = new String("abc");

	alert(str instanceof String);//true

	alert("abc" instanceof String);//false

</script>

Global（全局）

表示js整个范围，都可以使用。

<script type="text/javascript">
	// encodeURI/decodeURI 可以将中文Url编码 例如:  汤姆=>%E6%B1%A4%E5%A7%86
	// encodeURIComponent/decodeURIComponent 转换的范围更大,包括一些url中的字符. & : /
	//username=%E6%B1%A4%E5%A7%86
	
	var str ="http://www.baidu.com?wd=&汤?姆";
	var encodeStr = encodeURIComponent(str);
	alert(encodeStr);
//------------------------------------------	
</script>

<script type="text/javascript">
// parseInt  转换成整数  => 从左到右依次转换.转换到遇到不能转换的字符为止
// parseFloat 转换成浮点数

var str = "123";

var num1 = parseInt(str);
var num2 = +str;
var num3 = new Number(str);

//alert(typeof num);
//------------------------------------------
var str2 = "123a";//NaN

//alert(+str2);
//alert(parseInt(str2));//123
//-------------------------------------------
var str3 = "a123";

//alert(parseInt(str3));//NaN
//-------------------------------------------
var str4= "3.14";

//alert(parseFloat(str4));//3.14
//alert(parseInt(str4));//3
</script>

<script type="text/javascript">
//isNaN() 判断一个值是否是NaN 
var num = NaN;

/* if(isNaN(num)){
	alert("是NaN");
}else{
	alert("不是NaN");
} */
//-------------------------------------------------
//eval() 解析运行 方法

alert(eval("1+1"));//2
alert(eval("new String('abc')"));// abc

</script>

Math

<script type="text/javascript">
//math 数学工具类 
	//属性
		//PI 圆周率
	//方法
		// random 随机数
		var num = Math.random();
		//alert(num);
		// round  四舍五入
		var  num2 = Math.round(3.54);
		//alert(num2);
		//pow 计算幂
		var num3 = Math.pow(2, 3);
		//alert(num3);8
		// min/max  返回最小/最大数
		var num4 = Math.min(1,2,3);
		alert(num4);
		var num5 = Math.max(1,2,3);
		alert(num5);
</script>

Array

<script type="text/javascript">
	//数组
	//对象的功能
		//表达数组, 可以存取值
	//对象的创建
		var arr1 = [1,2,3,4];
		var arr2 = new Array(1,2,3,4);
		var arr3 = new Array(4);// 如果调用数组构造,只传递一个参数,并且参数的值是数字.那么该值将作为数组初始化长度
	//对象的属性
		// length  长度
		//alert(arr1.length);//4
		//alert(arr2.length);//4
		//alert(arr3.length);//4
	//对象的方法
		//pop 弹栈  将0索引 的变量移除并返回
		//push 压栈 将一个值放入数组的0索引位置
		//reverse 将数组反转 => 会对数组本身顺序进行调整
			//alert(arr1.reverse());
		//sort 排序 => 默认会按照字符串比较的方式排序.而不是数字.
		
		var arr5 = [100,1,5,9,2,3,8,7];
		
		//alert(arr5.sort(abc));
		
		// sort 可以传入一个比较器 => 比较器决定排序规则
		
		function abc(a,b){
			return a-b;
		}
	//----------------------------------------------------------------------
	//进阶  js中的array没什么原则
		//1 数组中元素的类型可以任意
		//2 数组的长度是可以随时变化的.
		var arr6 = ["haha",3.14,true,null,undefined,new Object()];
		
		alert(arr6.length);
		
		arr6[10] = "itcast";
		alert(arr6[10]);//itcast
		alert(arr6.length);// 11
		
		alert(arr6[9]);//undefined
</script>

Date

<script type="text/javascript">
//Date对象  => 日期

//1 创建
	var date1 = new Date();
	var date2 = new Date(12983798123121);
//2 方法
	//1.new Date() 获取当前时间
	//2.getFullYear() 获取年份
	alert(date2.getFullYear());
	//3.getMonth() 获取月份注意 1月份结果为0
	alert(date2.getMonth());
	//4.getHours() 小时
	alert(date2.getHours());
	//5.getDate() 日期
	alert(date2.getDate());
	//6.getMinutes() 分钟
	alert(date2.getMinutes());
	//7.getSeconds() 获取秒
	alert(date2.getSeconds());
	//8.getTime()  获取毫秒值.
	alert(date2.getTime());
	//9.toLocaleString() 获取本地的时间格式字符串.
	alert(date2.toLocaleString());
</script>

RegExp对象

<script type="text/javascript">
//正则对象  =>  使用正则匹配字符串.
//表单校验时会用到正则
	
	//1 创建
		//参数1: 正则表达式
		//参数2: 匹配模式. g: 全局  i: 忽略大小写
	var reg1 = new RegExp("e","gi");
	var reg2 = /z/g;
	//2 方法
	// test 方法 => 校验 字符串是否能与正则表达式匹配
	//alert(reg2.test("hello"));//true
//------------------------------------------------------------------------
// String 与正则结合的 4个方法
	var str = "hello world";
	//split 切割
	alert(str.split(/o/g));
	//replace 替换
	alert(str.replace(/l/g, "a"));
	//match 匹配并获得 => 找不到就返回null
	alert(str.match(/or/g));//or
	//search 查找索引
	alert(str.search(/e/g));//1
</script>