目录

  • JavaScript基础入门js必看,基础语法,想学java先学前端和js(建议收藏)
  • 一 javaScript入门
  • 1.1、 JavaScript简介
  • 1.2、JavaScript的两种样式(js写代码的地方)
  • 二 js基本语法
  • 2.1 js中的注释
  • 2.2 变量的定义
  • 2.3 变量的应用
  • 2.4 输出语句
  • 2.5 警告框
  • 2.6 排错
  • 2.7 js中数据类型
  • 2.8 运算符
  • 2.9 字符串拼接 +
  • 2.10 string类型转换成数字类型

JavaScript基础入门js必看,基础语法,想学java先学前端和js(建议收藏)

一 javaScript入门

1.1、 JavaScript简介

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JS代码就是JavaScript编写的脚本文件的代码。用单独文件保存,扩展名为.JS JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。

JavaScript的标准是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。

为什么会出现js。在很久很久以前,那时候没有js,只有html和css。此时就会出现一个情况,用户注册,输入完成之后,提交到服务器。

服务器去校验账号密码是否符合输入规则。校验完成之后,返回浏览器信息,账号应该6-18位。此时是非常麻烦的。所以就希望提高用户体验,在用户输入完成之后就告知用户账号密码是否符合输入规则。html和css完成不了这种功能,所以急需一种能在浏览器运行的脚本语言,来去完成这些工作,所以就研发了一门语言。

此时无人问津。他们就想一个方案, 当时如日中天的语言java。所以他们将编程语言命名为 JavaScript。

1.2、JavaScript的两种样式(js写代码的地方)

1.页内样式

<body>
		
		
		
		<script type="text/javascript">
			// 写js代码   scr
			
		</script>
</body>

页内样式的js可以写到body中也可以写到head中。但是我们建议自己的js写到body结束标签的上面。因为代码执行流程是从上往下。

如果写到head中,先执行js代码再去执行body中的html,此时有可能js代码对页面标签的操作失效,原因是执行js代码的时候,还没有页面标签。所以写到body的结束标签上面,就不会有执行流程导致的问题。如果执意写到head中,需要添加window.onload=function(){}

2.页外样式

①在js文件夹中创建一个js文件。

②在需要使用当前js的文件夹中,通过script标签进行引入.src写外部js的路径

<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script type="text/javascript" src="js/haha.js"></script>
		
	</head>

注意一旦script标签用来引入外部样式,标签的中间就不能再写js代码了

二 js基本语法

2.1 js中的注释
<script type="text/javascript">
			//  单行注释   注释一行
			
			/**
			 * 多行注释
			 * 
			 */
			
		</script>
2.2 变量的定义

A 什么是变量

简单来说,变量就是可变的量,可以用在计算时

变量来源于数学,是计算机语言中能储存计算结果或能表示抽象概念

变量可以通过变量名访问。在指令式语言中,变量通常是可变的;

B 为什么需要变量 ---- 体现一种间接的思想

我们有一万个同学,都是18岁。

此时班主任需要将同学的信息输入。

小明 18 小红 18 小李 18.............(直接使用18这个数据)

过了一年,此时大家都是19岁。我们需要将之前输入的18全部改成19. 很麻烦 ---- 这就是直接使用数据的问题。

所以我们可以这样解决问题 a = 18 。

此时班主任需要将同学的信息输入。

小明 a 小红 a 小李 a.............(间接使用18这个数据)

过了一年,此时大家都是19岁。我们需要将之前的a改成 a=19; --- 这就是间接的思想

其中 a 就是一个变量。

C 在js中如何创建变量

<script type="text/javascript">
			
			var   a = 12;
			/* 
			 定义变量的格式: var   变量名    赋值符号    初始值  ;
			 var  js定义变量的关键字,不同的关键字代表不同的含义。编译器去执行代码的时候
			      就是按照不同的关键字做不同的操作。
			 a    变量名,要有命名规范:英文  有意义  小驼峰
			      小驼峰:首字母小写,如果有多个单词 从第二个单词开始 首字母大写。
				  例如:  helloWorld   getStudentByUserName
			 =    赋值符号 。数学中是等号,编程中 = 是赋值符号,代表将右边的结果 赋值给左边。
			 18   初始值。js中是有数据类型的 但是定义的时候都用var 
			  ;   结束符号,编程结束的时候 需要使用英文;
			 */  
			
		</script>
2.3 变量的应用
<script type="text/javascript">
			
			var   a = 12;
			/* 定义一个变量b 并且将a的值赋值给 b */
			var  b = a;
			/* 给变量a重新赋值为15 */
			/* 此时b还是12  */
			a = 15;
			/* 变量定义完成之后 可以使用多次 */
			/* 先执行右边a+a 的结果 赋值给  c */
			var c = a+a;  
			/* 变量定义之后 可以使用  */
			c = a+c;
			
		</script>
2.4 输出语句
/* 控制台输出 */
			console.log(  c );//输出c这个变量的值
			console.log( "c" );//输出字符文本c

F12--->控制台

以后我们遇到变量的值无法确定,或者程序执行有问题我们要排查问题,此时可以使用控制台输出语句 验证我们的变量内容是否正确。

2.5 警告框
alert("你好世界"); // 警告框
confirm("你好 世界"); // 确定框
prompt("请输入您喜欢的对象");//输入弹框
			
document.write("哈哈哈哈哈");// 页面输出
2.6 排错

Uncaught SyntaxError: "" string literal contains an unescaped line break index.html:29:30

2.7 js中数据类型
<script type="text/javascript">
			
			// js中的数据类型
			var  a = 10;
			var  a1 = 10.5; // number 数字类型
			
			var  b  = "你好 世界";
			var  b1 = "你好 world";
			var  b2 = "你好 123";
			var  b3 = "world";
			var  b4 = "a";
			var  b5 = "10.5"; // string 字符串类型
			
			var  c = true;
			var  c1 = false;// boolean布尔类型  只有两个值  true  false  
			 
			var  d = null;// 空对象object
			
			var  e; // 此时e的值  undefined 未定义   类型也是undefined
			console.log(c);
			console.log(typeof c);
		
</script>
2.8 运算符

一目运算符

++   --
<script type="text/javascript">
			
			var  a = 79;
			
			alert(a);
			a++;// 自增1
			a--;
			alert(a);
			
		</script>
<script type="text/javascript">
			
			var  a = 10;
			
			var b = a++; // 先进行a++  a变成11  但是因为是后置++ 所以用a之前的值进行赋值 
			var c = ++a; // 先执行++a  a变成12  但是因为是前置++ 所以使用当前a的值进行赋值
			
			console.log(a,b,c); 
			
		</script>

二目运算符

+   -    *   /   %取余   +=  -+  *=  /=       >     <    >=   <=    ==   !=   &&  ||

这些运算符 都是需要两个变量/值参与才能完成

<script type="text/javascript">
    var  a = 79;
		var  b = 10;
		
		var c = a%b;// 将  a除以b的余数 赋值给 c   (前面除以后面的余数)
		
		//    X%3 余数范围 [0-2]   X%Y 余数的范围 [0- y-1 ]
		
		var d = 10;
		alert(d);
		 // 自增5  d+=5;
		 d-=5;
		 d*=5;
		 d/=25;
		alert(d);
</script>

三目运算符(三元运算符)

(条件表达式) ?  (为真)  : (非真)
<script type="text/javascript">
			
			var  a = 79;
			var  b = 10;
			
			var c = a>b ? a: b;
			var d = a>b ? a+b :a-b;
			var e = (a>b)  ? ( a<b?a+b:a-b ) : (a*b);
			
		</script>
2.9 字符串拼接 +

+ 有多种含义:① 如果都是数字 代表数学相加运行 ②任意一方是字符串 则代表字符串拼接

<script type="text/javascript">
			
			/* 两个变量/值 进行+的时候 如果有一个方是字符串 则会进行拼接 并且所得的结果类型也是字符串 */
			var b = "10"+10+10+10;
			var c = 10+"10"+10+10;
			var a = 10+10+"10"+10;
			var d = 10+10+10+"10";
			
			//10101010    10101010    201010    3010
			console.log(b,c,a,d);
			
		</script>
<script type="text/javascript">
			
			var a = prompt("请输入一个数");// 将用户输入的内容赋值给a
			var b = prompt("请输入一个数");// 将用户输入的内容赋值给b
			
			var c =  a + "+"  +  b  +   "=" + (a+b);
			document.write(c);
    //结果会是拼接的字符串
			
		</script>
2.10 string类型转换成数字类型
<script type="text/javascript">
			
			var a =  Number(  prompt("请输入一个数")    );// 将用户输入的内容赋值给a
			var b =  Number(  prompt("请输入一个数")    );// 将用户输入的内容赋值给b
			
			// parseInt() 取整   parseFloat()保留小数  Number()
			//转换成number类型 结果为两个数之和
			var c = a + "+" +b +"=" + (a+b);
			
			document.write(c);
			
		</script>