JS入门基础知识总结1

前言
基础背景知识
- 一、产生历史：
- 二、特点：
- 三、应用方向：
- 四、Javascript组成：
JavaScript书写使用方式
- 一、行内式（了解即可，项目中不使用，日常练习尽量不用）
- 二、内嵌式
- 三、外链式
学习笔记链接
- 1、Javascript由来及书写方式【本篇】
- 2、数据类型与简单运算
- 3、选择语句if、switch及练习题
- 4、循环语句while、dowhile、for及练习题
- 5、函数、预解析、作用域
- - 5.1、递归函数、斐波那契数列计算
- 6、对象基础知识
- 7、数组、冒泡排序、选择排序
- 8、字符串的JS方法
- 9、Math（数学）对象及内置方法

前言

鉴于本人还处于学习阶段，以下内容为个人理解所做笔记，可能存在一定错误，如果能指出错误之处感激不尽，希望能与大家共同进步。

基础背景知识

本部分主要简单介绍下JavaScript的由来以及特点和应用方向

一、产生历史：

1、1994年网景公司（Netscape）推出世界上第一款较成熟的网络浏览器Navigator浏览器0.9版本，该版本浏览器只能浏览页面，用户无法互动，当时只能采用现有语言，直接嵌入网页，或是发明一种全新的语言
2、1995年Sun推出JAVA语言，在市场上掀起了一股热潮
3、1995年网景录用Brendan Eich 10天设计出JavaScript的前身（liveScript最初叫Mocha），同年为了更好的推广该语言，在与Sun公司达成合作后将该语言改名为JavaScript（JavaScript与java没有一点关系，只是为了依靠当时Java的热度推广JavaScript）
4、1996年因网景与Sun联合推出的JAVAScript、微软推出的JScript、Cenvi的ScriptEase三种语言共存，为了建立一套中立的语法和语意标准，欧洲计算机制造商协会依据JavaScript1.1进行标准化，并于1997年6月推出了ECMAscript的第一个版本ECMA-262
（发展演化：liveScript（JavaScript前身） -->javaScript --> ECMAscript（标准化规范））

二、特点：

1）借鉴C语言的基本语法
2）借鉴Java语言的数据类型和内存管理
3）借鉴Scheme语言，函数为”一等公民”（即函数优先级最高）
4）借鉴Self语言，使用基于原型（prototype)的继承机制

三、应用方向：

1）网页效果实现
2）网页游戏【水果忍者： 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/】可在线学习编程，将编程学习制作成一款游戏，适合无基础学习能力较弱的同学）

四、Javascript组成：

1）ECMAScrip:JavaScript的语法规范，规定了基本语法与数据类型
2）BOM：浏览器对象模型（操作浏览器的API，如弹框、网页跳转等）
3）DOM：文档对象模型（操作页面元素的API，如增减标签，更改标签位置与内容等）

JavaScript书写使用方式

在这里稍微提一下在书写JS的时候需要注意"引号"的使用，举例说明：
<a href= 【’’】javascript:alert(【’】Hello JavaScript【’】)【"】>点击我试一试，我是alert
可以发现外层引号使用的是双引号，而内部引号使用的是单引号。
如果内部与上一级使用同一种引号会导致外部引号与内部引号进行配对即：
我们所想：”第一层 “第二层” “
实际代码解读：”第一层“ ”第二层“
结论：如果在父级使用了双引号（单引号），那么子一级需要使用单引号（双引号），否则代码可能不可执行

一、行内式（了解即可，项目中不使用，日常练习尽量不用）

行内式的JS代码需要有事件（行为）才能触发，接下来运用到了JS的点击事件onclick（鼠标单击到绑定的元素时触发onclick）
（a标签自带点击事件，只需要将JS代码写在href里便可以执行）
格式：
一般标签：<标签 onclick = “javascript:JS代码”>文字内容</标签>
a标签：<a href = ''javascript:JS代码”>文字内容</ a>

// 行内式<a href="javascript:alert('Hello JavaScript')">点击我试一试，我是alert</a> //弹出带有Hello JavaScript的弹窗<a href="javascript:prompt("前端真的很有意思","真的吗？")">点击我试一试，我是prompt</a><div onclick="alert('Hello JavaScript')">点击div出现弹框</div><div onclick="console.log('Hello JavaScript')">点击div出现控制台信息</div>

二、内嵌式

在< herd></ herd>、< body></ body>中插入标签< script></ script>,需要使用的JS代码就放在该标签中（script标签可以在同一个页面中使用多次）
格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础知识总结1</title><script>JS代码</script>
</head><body><script>JS代码</script>
</body>

PS.
script在html中不同位置插入< script>效果是不一样的，一般将其写在herd标签末尾或body标签末尾，而herd标签末尾和body标签末尾也有一些区别，具体如下：

1）herd中的script标签：在JS被调用时候才会执行。写在herd中的script可以保证JS代码在任何调用前被加载完成
（一般herd中的script标签存放（1）需要调用才能执行的JS代码（2）事件触发时执行的JS代码）

2）body中的script标签：在页面加载的时候就会被执行。如果将事件绑定标签如div写在script标签之后会导致div标签绑定事件不生效
（一般body中的script标签存放需要立即执行的JS代码，该部分一般是用来完成页面内容）

三、外链式

与内嵌式基本一致，只是需在script标签中添加src属性，属性值为外部JS文件存放路径
格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础知识总结1</title><script src=”外部JS文件存放路径”>JS代码（代码失效）</script><script>JS代码</script>
</head><body><script src=”外部JS文件存放路径”>JS代码（代码失效）</script><script>JS代码</script>
</body>

PS.
需要注意的是如果script标签加上了src属性链接到了外部JS文件会使script内的JS代码失效。
如果需要用内嵌式的方法书写script标签内的代码需要重新插入个script标签，将代码移植过去

学习笔记链接

1、Javascript由来及书写方式【本篇】

JS学习笔记——入门基础知识总结

2、数据类型与简单运算

JS学习笔记——入门基础知识总结（数据类型与简单运算）

3、选择语句if、switch及练习题

JS学习笔记——入门基础知识总结（选择语句）

4、循环语句while、dowhile、for及练习题

JS学习笔记——入门基础知识总结（循环语句）

5、函数、预解析、作用域

JS学习笔记——基础知识总结（函数）

5.1、递归函数、斐波那契数列计算

JS学习笔记——函数拓展（递归函数）

6、对象基础知识

JS学习笔记——基础知识总结（对象）

7、数组、冒泡排序、选择排序

JS学习笔记——基础知识总结（数组）

8、字符串的JS方法

JS学习笔记——基础知识总结（字符串）

9、Math（数学）对象及内置方法

JS学习笔记——JS内置对象Math（数学方法）

JS学习笔记——入门基础知识总结相关推荐

HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
php基础教学笔记,php学习笔记：基础知识
php学习笔记:基础知识 2.每行结尾不允许有多余的空格 3.确保文件的命名和调用大小写一致,是由于类Unix系统上面,对大小写是敏感的 4.方法名只允许由字母组成,下划线是不允许的,首字母要小写,其 ...
【学习笔记--FMCW基础知识】
学习笔记--FMCW基础知识前言 mmWave测距原理 mmWave区分多个物体 mmWave的距离分辨率(Range Solution) mmWave的最大测量距离前言由于工作原因需要了解TI ...
SAS学习笔记1——基础知识（库、PDV、变量选择、观测值排序、创建新变量
SAS学习笔记1--基础知识 1.逻辑库.临时库.永久库 2.数据步 2.1数据步语法 2.2 数据步的编译和执行过程 2.3变量的选择 2.3.1 keep和drop语句 2.4变量的重命名rena ...
WebGL学习笔记（基础知识篇）
WEBGL基础知识介绍 1.场景(scene) 场景如其名,即显示3D空间内物体的容器,就好比一个箱子是一个3D场景. 2.坐标系: webgl使用笛卡尔坐标系(宽度.高度和深度),我们也可以指定使用 ...
Python学习笔记----入门基础
第一章 Python入门基础第一节优雅的Python 一.Python的基本介绍 (1)Python是程序设计语言 1.自然语言 2.机器语言 3.程序设计语言 ①由文字组成的文本文件, ②程序设 ...
《UNIX 环境高级编程》学习笔记——UNIX 基础知识
UNIX环境高级编程--UNIX 基础知识引言 UNIX 体系结构登录文件和目录输入和输出程序和进程出错处理用户标识信号时间值系统调用和库函数引言所有操作系统都为它们所允许的程 ...
单片机学习笔记——微机基础知识
微机基础知识微处理器,微机和单片机概念微处理器的组成一.运算器主要寄存器主要寄存器(IR),指令译码器(ID) 程序计数器(PC) 地址寄存器(AR) 二.控制器存储器和输入输出接口一. ...
[前端学习笔记]JavaScript基础知识
一.JS三种书写位置行内式直接写到元素的内部. <input type="button" value="唐伯虎" onclick="aler ...

JS学习笔记——入门基础知识总结