javascript 基础入门

咩咩573

已于 2022-03-31 22:35:05 修改

阅读量59

点赞数 1

文章标签： java

于 2022-03-31 22:18:32 首次发布

本文链接：https://blog.csdn.net/qq_68180489/article/details/123885055

版权

1.js的历史（网景通信公司）

2.同时期微软和 Nombas公司开发的jscript|scriptEase语言

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>

咩咩573

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 基础入门

1.js的历史（网景通信公司）布兰登10天时间开发liveScirpt 后面与Sun合作---javascript 2.同时期微软和 Nombas公司开发的jscript|scriptEase语言 3.欧洲计算机协会上三者制定了一套标准 ECMAScript核心语法 4.js与ECMAScript的关系 ECMAScript用来约束js的语法。...
复制链接

扫一扫