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

最新推荐文章于 2024-02-29 10:25:44 发布

丶枫笙

最新推荐文章于 2024-02-29 10:25:44 发布

阅读量2.2k

点赞数 6

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/bxqm111/article/details/107281663

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言

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

基础背景知识

本部分主要简单介绍下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标签，将代码移植过去

学习笔记链接

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
JS学习笔记——入门基础知识总结

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

扫一扫