javaScript(基础入门)

<!-
	1.js的历史（网景通信公司）
	布兰登10天时间开发liveScirpt
	后面与Sun合作---javascript
	2.同时期微软和 Nombas公司开发的jscript|scriptEase语言
	3.欧洲计算机协会上 三者制定了一套标准
	ECMAScript核心语法
	4.js与ECMAScript的关系
	ECMAScript用来约束js的语法。
	5.js的概念
	是一门基于客户端的脚本语言
	脚本语言：不需要通过编译，直接通过浏览器中的引擎实现效果。
	谷歌 |火狐 |欧朋浏览器
	6.js的组成
	ECMAScript--核心语法（变量，选择结构，循环结构，数组等等操作）
	DOM：文档对象模型---通过DOM可以获取HTML文件中的任意标签，实现增删改查
	BOM：浏览器对象模型，通过BOM可以对“数据的结果”进行输入输出以及获取浏览器上的地址并且可以设置，历史记录，屏幕的宽度和高度以及浏览器的版本和引擎
	7.基础入门
	js不能单独实现，将js脚本代码放入网页中才能实现效果。
	-->

alert 相当于弹窗

行内式

<button onclick="alert(123)" onmouseover ="this.style.backgroundColor='red';">按钮</button>

嵌入式

<script type="text/javascript">
		function sb(){
			alert("好好学习 天天向上");
		}
	</script>
<button onclick="sb();">嵌入式按钮</button>

外部式引入 通过scripct标签引入 ps:如果script标签中有src引入其他js脚本文件，这个标签的内容不能再次编写

<script type="text/javascript" src = "js/script.js"></script>

变量

var num=1;
console.log(num);//相当于syso
//js数据类型：number,string,boolean,object,undefiend(未定义)
// typeof()  判断值类型
		console.log(typeof(num));
		console.log(typeof(name));
		console.log(typeof(stu));
		console.log(typeof(arr));
		console.log(typeof(names));
		console.log(typeof(sb));

运算符

   // 算数运算符：+ - * / % ++ --
		// 赋值运算符 += = -= *= /= %=
		// 关系运算符 > < >= <= != == ===
		// 逻辑运算符 && || !
		// 三元运算符  表达式? 结果1:结果2
		// / 会保留小数点
        // == === 都是等于判断
		// == 判断内容
		// === 判断内容以及判断内容的类型
        
        var a = 1;
		var b = 1;
		console.log(a==b);//true
		console.log(a===b);//true
		var c = '1';
		console.log(a==c);//true
		console.log(a===c);//false

选择结构

//需求：判断一个数字是偶数还是奇数
var sb=10;
if(sb%2===0){
   console.log("偶数")
   }else{
       console.log("奇数")
   }

// 需求：三个number类型的数据，进行高-低排序
		var aa = 11;
		var bb = 3;
		var cc = 23;

//利用数学角度 假设法
if(aa>bb&&aa>cc){
    if(bb>cc){
        console.log("aa>bb>cc");
    }else{
        console.log("aa>cc>bb")
    }
}else if(bb>aa&&bb>cc){
    if(cc>aa){
        console.log("bb>cc>aa");
    }else{
        console.log("bb>aa>cc");
    }
}else if(cc>aa&&cc>bb){
    if(aa>bb){
        console.log("cc>aa>bb");
    }else{
        console.log("cc>bb>aa");
    }  
}
switch 
    ar str = 1;
		switch(str){
			case 1:
				console.log("吃肉");
				break;
			case 2:
				console.log("吃饭");
				break;
			default:
				console.log("吃鬼");
				break;
		}
    
          // 90以上 A  80以上B  70以上C 60以上D  60以下 种田。
		// Math.floor(数值)  向下取整
		var score = 99;
		switch(Math.floor(score/10)){
			case 10:
			case 9:
				console.log("A");
				break;
			case 8:
				console.log("B");
				break;
		} 

循环结构

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

//需求：计算1-100的和
		 var num = 1;
		 var sum = 0;
		 while(num <= 100){
		 	sum= sum+num;
			num++;
		  } 
		  document.write(sum);

//do while 循环
    var num = 1;
		  do{
		  	document.write(num+"<br>");
		 	num++;
		  }while(num<=100);

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

//数组的基本使用
 var names = ["张三","里斯","wangwu"]; 
		 for(var i = 0;i<names.length;i++){
		 	document.write(names[i]+"<br>");
		 }

js函数入门

// 函数：就是方法，封装代码，方便调用
//无返回无参数
//ps:函数编写完成后，需要手动调用 否则无效
//定义一个函数计算2个数字的和
 function add(){
		 	var a = 1;
		 	var b = 1;
		 	alert(a+b);
		 }
      add();
	<button onclick="add();">计算</button>

ECMAScript,BOM,DOM

 // js组成：ECMAScript,BOM,DOM
		// 
		// DOM:文档对象模型，通过DOM编程可以实现动态获取html文件的任意标签进行CURD（增删查改）
		// 根据标签的id属性可以得到标签本身。
		// document.getElementById(id);
        //输入项中的内容最终会保存在input中的 value属性中

        <input id="ywg" type="text" value="杨文广">
	   <button onclick = "sb();">点击获取输入项中的内容</button>

    function sb(){
			// 根据标签的id属性获取标签
			var bb = document.getElementById("ywg");
			alert(bb.value);
		}

实现简易计算机

第一个数字： <input id="num1" type="text">
	<br>
	第二个数字: <input id="num2" type="text">
	<br>
	结果: <input id="num3" type="text">
	<br>
	<button onclick="add();">加法运算</button>
     function add(){
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			var sum = parseInt(num1)+parseInt(num2);//转换成int类型
			// alert(sum);
			var num3 = document.getElementById("num3");
			num3.value = sum;
		}

九九乘法表(表格实现页面对齐)

document.write("<table border = '0' width = '100%'>");
		for(var i = 1;i<=9;i++){
			document.write("<tr>");
			for(var j = 1;j<=i;j++){
				document.write("<td>");
				document.write(j + " * " + i + " = " + ( i * j ));
				document.write("</td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");

输出语句

<!-- Java打印语句System.out.println(); -->
	<!-- js中的输入输出语句 -->
	<!-- 1.alert()  普通弹窗 -->
	<!-- 2.confirm()  确认弹窗语句 -->
	<!-- 3.prompt()弹窗输入语句，类似Scanner -->
	<!-- 4.document.write("内容");向页面输出语句 -->
	<!-- 5.终极输出
		HTML|css|js...
		开发者工具---F12
		console.log();//日志输出语句
		console.info();//普通信息输出
		console.dir();//对象的层级
	 -->
         // alert(123);
		// String int float
		// js  一门弱类型语言  统一使用var关键字
		// 确认弹窗 返回值   boolean类型
		// var f = confirm("你确定要和我分手吗？");
		// alert(f);
		//  自定义弹窗---模态框
		// var name = prompt("请输入你的姓名","张三");
		// alert(name);