1.Js基础语法之组成,写法，注释，打印方式等

JavaScript基础语法

一. JavaScript发展历史（JS）

• JavaScript的起源、发展 -->简单了解
• 什么是前端开发(借助故事) -->来源于简书潜水的旱鸭子

二. JavaScript能干什么

1. 常见的网页效果【表单验证，轮播图。。。】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】

三.JavaScript是什么

• 含义:是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
• 作用:用来交互的行为,同时js也是是一门弱类型的编程语言。
• 特点:直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
• 为什么使用js:解决一些CSS无法解决的问题或者css解决起来颇为麻烦的问题。

四.JavaScript的组成(三大核心)

• 分为ECMAScript核心语法，BOM(浏览器对象模型)，DOM(文档对象模型)
• ECMAscript:核心语法
  • 定义了javascript的语法规范,描述了语言的基本语法和数据类型，是js的根基， 由ECMA控制
• BOM (Browser Object Model): 浏览器对象模型
  • 有一套成熟的可以操作浏览器的API，通过BOM可以操作浏览器,提供了浏览器的操作。
  • 如： 弹出框、浏览器跳转、获取分辨率等， 由w3c控制
• DOM (Document Object Model): 文档对象模型
  • 有一套成熟的可以操作页面元素的 API，通过DOM可以操作页面中的元素，提供了网页的操作
  • 如： 增加个 div，减少个 div，给div 换个位置等，由网景控制
• 补充知识点：
  • 网页三剑客：HTML-结构 css-样式 js-行为或交互
  • ECMAScript规定了，写什么样的代码，在BOM中操作DOM
  • 你会ECMA Script吗？就是js
• 总结: JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

五.JavaScript代码的书写位置

• js 也有多种方式书写，分为 行内式， 内嵌式，外链式

5.1行内式(内联)JS代码（不推荐)

• 写在标签上的 js 代码需要依靠事件（行为）来触发
• 注意:不建议使用，结构和行为的分离，优化项目，便于管理,为了测试方便

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>

<!-- 注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码-->

5.2内嵌式(内部) JS 代码

• 内嵌式的 js 代码会在页面打开的时候直接触发，不太不太建议使用内部，
• 补充：在js当中结构要和样式分离，公共部分，就是有相同的地方

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
	alert('我是一个弹出层')
</script>

<!-- 	注：script 标签可以放在 head 里面也可以放在 body 里面-->

5.3外链式(外联) JS 代码（推荐）

• 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
• 新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面

<!-- 我是一个 html 文件 -->
我是 index.js 文件
alert('我是一个弹出层')

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

六.script标签写在哪及用法

• 可以放在任何位置,最好放在body闭合和html闭合之间
• 注意:一个html文档不写文档声明头会发生怪异模式，发生降级处理
• 作用:
  • 1.直接把js标签写在Script标签当中<script>js代码</script>;将JavaScript代码嵌入进html网页当中
  • 2.用来引入一个外部的独立的js文件<script src="lib.js"></script>;引入外部的lib.js文件

七.JS 中的注释

• 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的，同时有利于我们以后阅读代码

7.1 单行注释

• 一般就是用来描述下面一行代码的作用
• 可以直接写两个 / ，也可以按 ctrl + /

// 我是一个单行注释
// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')

7.2多行注释，也可以叫文档注释

• 一般用来写一大段话，或者注释一段代码
• 可以直接写 /**/ 然后在两个星号中间写注释

/*
	我是一个多行注释,同时又是一个文档注释
*/

/*
	注释的代码不会执行
	alert('我是一个弹出层')
	alert('我是一个弹出层')
*/
alert('我是一个弹出层')

八.js中打印信息的方式

• 什么叫打印信息?

  • 不是输出信息,是打印：将计算机的执行结果或数据，给用户呈现出来

• 打印到浏览器的弹出框，操作的是BOM对象，浏览器

  • alert()

• 打印到页面，操作的是DOM对象，页面

  • document.write() document.write如果在页面加载完成后执行，会覆盖页面所有内容
  • document.write("<h1>hello</h1>")
  • document.write("<h1>hello</h1>")
  • document.write()既可以向网页输出普通文本，也可以输出完整的标签

• 打印到浏览器的控制台，操作的是BOM对象，浏览器（操作的V8引擎）

  • console.log() 可以将文本输出到控制台，但如果输出到控制台的文本当中也包含标签，那么并不会解析，而是当做普通文本输出

• 缺点：影响页面的正常结构

九.JS中的三大弹窗

• 9.1 alert('')
• 9.2confirm('')
• 9.3 prompt('')

十.语句结束符

• 语句结束符;
• 作用:告诉浏览器当前这句代码写完了,强制写上。方便后期的代码压缩,方便项目上线。
• 注意：使用一个变量不需要加引号，如果要输出一段话需要在内容上加引号

十一.文档就绪函数(文档入口函数)

• 作用：作用:让JavaScirpt代码在网页的最后加载
• 语法:window.onload = function {要执行的内容 }

后续更新完善中…