JavaScript基础入门及介绍

一、什么是JavaScript

      JavaScript简称“JS ”是一种轻量级的客户端“脚本语言”，用来在网页中添加一些动态效果与交互功能；可以部署在多种环境，最常见的部署环境是浏览器。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的操作方法。

二、 JavaScript的起源（即历史）

     JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发（这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。）。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。
之所以将 LiveScript 更名为 JavaScript，是因为 JavaScript 是受 Java 的启发而设计的，因此在语法上它们有很多相似之处 ，JavaScript 中的许多命名规范也都借鉴自 Java，还有一个原因就是为了营销，蹭 Java 的热度。

        同一时期，微软和 Nombas（一家名为 Nombas 的公司）也分别开发了 JScript 和 ScriptEase 两种脚本语言，与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准，不能互用。为了解决这一问题，1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，Netscape、Sun、微软、Borland（一家软件公司）组成了工作组，并以 JavaScript 为基础制定了（ECMAScript）。

      JavaScript与ECMAScript的关系：ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

三、JavaScript的组成

      1.ECMAScript：也就是JavaScript的基础语法。
      2.DOM：全称叫做Document Object Model（页面文档模型）可以通过DOM提供的接口对页面上的各种元素进行操作（大小，位置，颜色等）。
      3.BOM：全称Browser Object Model(浏览器对象模型)，可以与浏览器窗口进行互动的对象结构，可以操作浏览器窗口 ，例如：弹出框，控制浏览器跳转，获取分配率等，这里也是在基础学习完成后再进行BOM学习，由此可见JavaScript基础语法的重要性。

四、如何使用JS?

      1. 使用script标签,一般而言都是放在head标签中
      2. 编写js文件,通过script标签中的src属性引入,可以在同一个界面中引入多个js文件,执行顺序与引入顺序一致。

        <!-- 外部式引入 -->
		<script src="js/sb.js" type="text/javascript" charset="utf-8"></script>
	

五、JS的调试

      1.浏览器 : 控制台(Console)
      2.console
             .log() 打印信息（日志输出）
             .info() （普通信息输出）

           console.log('这是控制台日志输出');
		   console.info('这是普通信息输出');
		   
		   document.write('网页输出 直接看到');
		   document.write('<h1>标题</h1>');

六、基本语法

      1.JavaScript的语法和Java语言类似,每个语句以 ; 结束,语句块用{}
      2.JavaScript并不强制要求在每个语句的结尾加 ; 
      3.// 行注释
      4./* */ 块注释

           // 单行注释
			/*
			你好
			我好
			大家好
            多行注释
			*/

      5.JavaScript严格区分大小写

七、JS中的变量与数据类型

       1.在JS中,所有的变量都是使用var关键字声明
       2.并且变量的值与类型都可以发生改变
       3.使用 typeof 可以查看数据类型

            // typeof()  查看变量的类型
			var myname = '张三';
			console.log(typeof(myname));
			console.log(typeof(true));

      4.Number
               ①  JavaScript不区分整数和浮点数，统一用Number表示
               ②  NaN : 非数字
                     1）  1 / "a"
                     2） 非数字不能使用==比较,需要调用isNaN()方法
               ③  Infinity : 无穷大
               ④   parseInt() : String -> 整数
               ⑤   parseInt() : String -> 小数
               ⑥ % 求余
               ⑦  / 除法
                     1）由于精度问题会出现结果不精确
                     2）可以调用.fixed()方法保留小数点位数

            //  取整  取余
			console.log(10/3);
			console.log(10%3);

5.String
            ①.可以使用‘’和“”
            ②.使用``反引号可以创建模板字符串
6.Boolean
          ① || 或者
          ② && 并且
          ③  ! 单目运算符
          ④ 比较运算符
                1） ==
                     转换类型再比较
                2） ===
                      比较类型与内容

            // == ===  都是恒等于
			// == 比较值的内容
			// === 比较值的内容以及值的类型
			var a = 1;
			var b = 1;
			console.log("==   "+(a==b));
			console.log("===   "+(a===b));
			
			var aa = '1';
			var bb = 1;
			console.log("==   "+(aa==bb));
			console.log("===   "+(aa===bb));

7.Object
          默认为null值
8.undefined
           未初始化的变量

          //undefined 未定义类型，没有给变量赋值
            var age;
			console.log(age);

八、JS中的弹窗

          1.alert ：提示框
          2.confirm ：询问框
          3.prompt ：输入框

	       //提示框
           alert('123');
           //输入框
           prompt('请输入你的姓名');
		   //询问框
		   confirm('你确定要分手吗？');

九、基本结构语句

         1. if结构

          // 判断一个数字是否偶数
			var f = 10;
			if(f%2==0){
				console.log("偶数");
			}else {
				console.log("奇数");
			}

           // 定义三个变量  求最大值
			var a1 = 33;
			var a2 =23;
			var a3 = 11;
			if(a1 > a2 && a1 > a3){//假设a1最大
				console.log(a1);
			}else if(a2 > a1 && a2 > a3){
				console.log(a2);
			}else if(a3 > a1 && a3 > a2){
				console.log(a3)
			}

  
         2.switch结构
 

           // 判断当week=11时的状态
   			var week = 11;
			switch(week){
				case 1:
					console.log("吃肉");
					// break;
				case 2:
					console.log("吃火锅");
					break;
				default:
					console.log("吃土");
					break;
			}

        3.while结构
 

          // while循环输出1-100
			 var i = 1;
			 while(i<=100){
			 	document.write(i+"<br>");
			 	i++;
			 }

          // 输出1-100的和
			 var i = 1;
			 var sum = 0;
			 while(i<=100){
			 	sum+=i;
			 	i++;
			 }
			 console.log(sum);

        4.for结构
  

          // for循环打印
			 for(var i = 1;i<=100;i++){
				console.log(i);
			 }
			

简单案例：

  1.打印四边形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="text-align: center;">
		<script type="text/javascript">
			var a = prompt('请输入正方形的行数：')
			if (a <= 10) {
				for (var b = 0; b < a; b++) {
					for (var c = 0; c < a; c++) {
						document.write("#&nbsp;&nbsp;&nbsp;")
					}
					document.write("<br>")
				}
			} else {
				for (var b = 0; b < 10; b++) {
					for (var c = 0; c < 10; c++) {
						document.write("#&nbsp;&nbsp;&nbsp;")
					}
					document.write("<br>")
				}
			}
		</script>
	</body>
</html>

  2.获取问候语

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间数</title>
		<script type="text/javascript">
			var a = prompt("请输入当前的小时数")
			switch(a){
				case "6":
				case "7":
				case "8":
				case "9":
				case "10":
				case "11":
				document.write("上午好！！！");
				break;
				case "12":
				case "13":
				case "14":
				case "15":
				case "16":
				case "17":
				document.write("下午好！！！");
				break;
				default:
				document.write("晚上好！！！");
			}
		</script>
	</head>
	<body>
	</body>
</html>

  3.简单语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 获取输入项中的内容借助DOM操作中的一个语法
			//可以根据标签所提供的唯一ID值来获取
			//语法  document.getElementById("标签的id属性值");
			// window.onload = function(){//最后执行的}
			function add(){
				var a1 = document.getElementById('a1');
				  console.log(a1.value);//获取内容
				  alert(a1.value)
				var a2 = document.getElementById('a2');
				
				var sum = parseInt(a1.value)+parseInt(a2.value);
				  alert(sum);
				
				var a3 = document.getElementById('a3');
				 a3.value = sum;
			}
				
		</script>
	</head>
	<body>
		<!-- 利用DOM操作来动态获取页面标签上的内容实现效果 -->
		数字一: <input value = '12' type="text" id="a1"> <br>
		数字二: <input type="text" id="a2"> <br>
		结果: <input type="text" id="a3"> <br>
		<input type="button" value="加法运算" onclick="add()">
	</body>
</html>