JavaScript基础入门_jilujs-CSDN博客

本文介绍了JavaScript的历史，从网景公司的LiveScript到与Sun合作的JavaScript，再到微软的JScript和Nombas的ScriptEase。接着讲述了ECMAScript作为JavaScript的核心语法，约束JavaScript的语法。JavaScript是一门客户端脚本语言，主要由ECMAScript、DOM和BOM组成。文中还详细讲解了JavaScript的基础语法，包括变量、选择结构、循环结构、数组、函数以及DOM和BOM的使用，并提供了实际代码示例。最后，文章提到了JavaScript在HTML中的引入方式，包括行内式、嵌入式和外部式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        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脚本代码放入网页中才能实现效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<!-- 外部式引入js文件  通过script标签引入 -->
	<!-- 注意：如果script标签中有src引入其他js脚本文件，这个标签的内容不能再次编写 -->
	<script type="text/javascript" src = "js/script.js"></script>

	<!-- js的嵌入式 -->
	<script type="text/javascript">

		// js的注释   //   /*多行注释*/
		//js的函数
		function sb(){
			alert("好好学习 天天向上");
		}

// js中的运算符
		// 算数运算符：+ - * / % ++ --
		// 赋值运算符 += = -= *= /= %=
		// 关系运算符 > < >= <= != == ===
		// 逻辑运算符 && || !
		// 三元运算符  表达式? 结果1:结果2
		// / 会保留小数点
		var num = 5;
		console.log(num/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



		// js选择结构（if,switch)
		// 需求：判断一个数字是偶数还是奇数。
		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){//假设aa是最大的
			if(bb>cc){
				console.log("aa>bb>cc");
			}else{
				console.log("aa>cc>bb");
			}
		}else if(bb>aa && bb>cc){
			if(aa>cc){
				console.log("bb>aa>cc");
			}else{
				console.log("bb>cc>aa");
			}
		}else if(cc>aa && cc>bb){
			if(aa>bb){
				console.log("cc>aa>bb");
			}else{
				console.log("cc>bb>aa");
			}
		}



		var 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;
		}

// js的循环结构
		// while循环
		/*
			初始化循环变量;
			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);

		 // 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函数入门
		// 函数：就是方法，封装代码，方便调用
		//无返回无参数
		
		/*
			函数语法：
					function 函数名称(){
						结果集;
					}
	
			注意:函数编写完成之后，需要手动调用  否则无效


			函数的调用有以下方式：
				直接调用
				直接借助标签自带的事件属性
				间接借助标签自带的事件属性
					间接：script标签中首先得到标签对象，然后在调用属性。

// js组成：ECMAScript,BOM,DOM
		// 
		// DOM:文档对象模型，通过DOM编程可以实现动态获取html文件的任意标签进行CURD（增删查改）

		// 根据标签的id属性可以得到标签本身。
		// document.getElementById(id);
	</script>
</head>
<body>
	<!-- JOPtionPane.showMessageDialog(); -->
	<!-- js如何引入html中  3种方式 -->

	<!-- 第一种方式：行内式js编写 -->
	<!-- 注意：行内式js编写主要是为了解决"js代码少的情况下而定的" -->
	<!-- 事件：HTML每个标签中都有一些自带的事件属性 -->
	<button onclick="alert(123)" onmouseover ="this.style.backgroundColor='red';">按钮</button>


	<!-- 第二种方式  嵌入式借助script标签 -->
	<!-- 要向将js代码存放到script标签中运行  结束js提供的函数 -->
	<button onclick="sb();">嵌入式按钮</button>
<!-- js中的输入输出语句 -->
	<!-- 1.alert()  普通弹窗 -->
	<!-- 2.confirm()  确认弹窗语句 -->
	<!-- 3.prompt()弹窗输入语句，类似Scanner -->
	<!-- 4.document.write("内容");向页面输出语句 -->
	<!-- 5.终极输出
		HTML|css|js...
		开发者工具---F12
		console.log();//日志输出语句
		console.info();//普通信息输出
		console.dir();//对象的层级
	 -->

<!-- JS的组成部分之一====ECMAscript核心 -->
	<!-- 
		ECMAScript核心：
			注释，变量，选择结构（if,switch）,循环结构（while  do...while  for）,内置对象：Date日期，Math数学，数组Array,String字符串
	 -->

</body>
</html>