JavaScript 基础知识

1.认识JavaScript

描述

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

总结

（1）javascript 语言，简称js;
（2）javascript 借用java 名气，但是和java没有关系；
（3）javascript 是一门解释型语言，被浏览器解释执行(不用被编译，运行时直接解释从上到下，一行行执行)。

（1）JavaScript的作用

1. 可以进行各种交互，点击，移入，移出，拖动等；
2. 和后台的数据进行交互, 如登录；
3. 修改样式(通过js修改样式)；
4. 可以操作dom （添加，修改，删除），操作网页中的元素(读写HTML元素)。
5. 嵌入动态文本于HTML页面
6. 对浏览器事件做出响应。
7. 在数据被提交到服务器之前验证数据。
8. 检测访客的浏览器信息， 控制cookies，包括创建和修改等。
9. 基于Node.js技术进行服务器端编程。

（2） JavaScript的组成

（1）ECMAScript(ECMA 262标准): 基本语法和基本对象（包括变量，数据类型，选择结构 ，循环结构，函数，数组，字符串）；
（2）DOM(文档对象模型): 提供操作网页的方法和接口；
（3）BOM(浏览器对象模型): 提供操作浏览器的方法和接口。

2.JavaScript引入方式

（1）内嵌式

  语法： <script>js代码</script> 。
  //位置：可以写在网页中的任意位置。
  //建议最好写在body结束标签前，<script>js代码</script>，也可以写在head标签内的script标签内。
 
  	<script type="text/javascript">
       	// JavaScript语句
  	</script>

（2） 外链式（外联式）

  在外部创建一个.js的文件，里面写js代码。
  语法：直接通过script标签的src属性引入.js的文件。

  	<script src="./my.js">
     	 // JavaScript语句
  	</script>
  或者
  	<script src="./my.js" />

（3）在html标签中引入事件属性来绑定js代码

a.鼠标事件：
① onclick:鼠标单击事件；
② onmouseover:鼠标的移入事件；
③ onmouseout:鼠标的移出事件。

  在html标签中以on开头的事件,使用js代码绑定。
  语法： 直接在标签上写，如以下例子。

  	<p onclick="alter("发生了点击事件！")">
      	//可以有文字描述
  	</p>  

（4）a 标签中的href属性中使用js

  语法：通过a标签。
 
  	<a href="javascript:alert('跳转到首页')">
       首页内容即将呈现......
  	</a>

3.JavaScript输入输出

JavaScript输出

（1）弹出框： alert(“内容”)；

     注意：alert可以中断程序。
     
     	alert("输出的内容");
     	//字符串用引号引起来，变量不用引号
     	alert("一起学习JavaScript!")

效果图如下所示：

（2）控制台输出： console.log(“输出内容”);

  语法：
  	console.log("文字"); 打印日志；
  	console.debug(""); 一般用于调试；
  	//注意：在控制台中输出是使用最多的方式。

  	console.log("输出的内容");
  	console.log("欢迎学习JavaScript!");

效果图如下所示：

（3）网页输出: document.write(“输出的内容”)；

  语法：document.write("输出的内容");
  //可以输出中文、英文；
  //可以输出html代码(显示的结果是被修饰后的输入内容)。
  //document.write可以解析html标签

  	document.write("输出的内容");
  	document.write("欢迎来到我的CSDN学习");
  	document.write("hello world!");
  	document.write("<em>你好！</em>");
  	document.write("<h1>你好！欢迎来到我的博客！</h1>");

效果图如下所示：

JavaScript输入

  输入框
  	let 变量名 =  prompt("提示信息"); 
  	//注意：prompt返回的都是字符串。
 
 	let result=prompt("提示的内容"); 
  	let result=prompt(`提示的内容`); 
  	//` `使用模板字符串的好处是输入形式可以完全在页面上展示出来

  举个例子：
  	let choose = parseInt(prompt(`请你想要买的饮料：
        1、可口可乐 
        2、雪碧 
        3、鲜橙多 
        4、冰红茶 
        5、矿泉水
        `));

效果图如下所示：