JavaScript入门 | 冷大大猫

JavaScript

发布日期: 2019-09-05

更新日期: 2019-11-22

文章字数: 1.3k

阅读时长: 5 分

阅读次数:

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript简介

客户端脚本编程语言
结合HTML、XML、Flash
网景公司设计，已发展20多年
动态、弱类型、基于原型的语言

JavaScript作用

动态改变网页内容
动态改变网站外观
验证表单数据
事件响应

实例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <button type="button" onclick="alert('这是一次测试')" >点击进入</button>
</body>
</html>

效果展示

JavaScript编辑器

记事本：最简洁，最方便的文本编辑器，功能单一。
dreamweavercs6
Sublime Text
……

JavaScript在HTML中的应用

在HTML网页中嵌入JavaScript

一般嵌入网页标签<head></head>,<body></body>或元素中

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript">
        document.write("hello")
    </script>
</head>
<body>
    <script type="text/javascript">
        document.write("world")
    </script>
</body>
</html>

效果:

test

引用js文件

将js代码写入一个文件(.js)，通过<script src=""></script>引用js文件

实战演练

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实战演练01</title>
    <script>
        function showin(){
            alert("欢迎到来！")
        }
        window.onload=showin
    </script>
</head>
<body>

</body>
</html>

基本语法

1.JavaScript代码执行

按照HTML文件中出现的顺序逐行执行
最好放到HTML文档中标签中
函数体内的代码只有被调用时才执行
JavaScript对大小写严格区分

2.分号和空格的应用

分号：可有可无(最好在语句结尾加上分号，保证准确性)
空格：javascript会自动忽略多余的空格

3.注释

单行注释：//放在行首注释该行
多行注释：以/开头，以/结尾

4.语句

语句：一条javascript语句可以由一个或多个表达式、关键字、运算符组成。(使用分号结束单个语句)
语句块：对个语句能组成，通常由大括号括起来。经常出现在函数中或流程控制语句

数据结构

1.标识符
概念：javascript的变量名称、函数名称

由字母、下划线、中文来组成，不能包含空格、标点符号和运算符号
标识符第一个字符必须是字母、中文或下划线
定义标识符不能与javascript中关键字相同

2.保留字
Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

abstract	arguments	boolean	break
byte	case	catch	char
class*	const	continue	debugger
default	delete	do	double
else	enum*	eval	export*
extends*	false	final	finally
float	for	function	goto
if	implements	import*	in
instanceof	int	interface	let
long	native	new	null
package	private	protected	public
return	short	static	super*
switch	synchronized	this	throw
throws	transient	true	try
typeof	var	void	volatile

标记的关键字是 ECMAScript5 中新添加的。

3.常量

常量：值是固定的例如数字、字符型、布尔型等
定义格式:

const
    name: type=value;

4.变量

变量：指在程序运行过程中值可以发生改变的量，可读写的内存单元
定义形式:

var 变量名 = 值;  //定义变量
变量名 = 值;      //赋值

变量的作用范围：

全局变量：整个HTML文档中生效的，函数体外
局部半两：只在一个小范围内生效，函数体内

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变量</title>
</head>
<body>
    <p>点击创建变量并显示结果</p>
    <button onclick="myfunc()">单击这里</button>
    <p id="demo"></p>
    <script type="text/javascript">
        function myfunc(){
            var carname = "张三";
            document.getElementById("demo").innerHTML=carname
        }
    </script>
</body>
</html>

效果：

变量

点击创建变量并显示结果

## 数据类型

每种程序设计语言都规定了一套数据类型，其中最基本不可再细分的类型称为基本数据类型。JavaScript基本数据类型包括字符串型、布尔型和数值型等。
1.typeof
语法格式：

typeof 变量/值

返回值：

Undefined
布尔型
数值型
字符串型
object

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>typeof</title>
</head>
<body>
    <script type="text/javascript">
        var car = null;
        document.write(typeof(1) + "<br>");
        document.write(typeof(NaN) + "<br>");
        document.write(typeof("123") + "<br>");
        document.write(typeof(true) + "<br>");
        document.write(typeof(null) + "<br>");
        document.write(typeof(sss) + "<br>");
        document.write(typeof(car) + "<br>");
    </script>
</body>
</html>

效果：

typeof

NaN: 特殊类型的数字常量，非数字
Null: 表示空值，定义空的或不存在的引用，不等于空字符串和0
Null与Undefind区别: Null表示一个变量被赋予了空值，undefined还未被赋值

2.Undefined

变量还未赋值

3.Null

表示一个变量被赋予了空值

4.Bollean

布尔型，表示一个逻辑的值：

逻辑真： true 1
逻辑假： false 0

5.Number

整数（正数，负数，0）
浮点数

6.String

使用单引号或双引号

7.Object

对象类型（包含多种数据类型）

运算符

算数运算符
比较运算符
位运算符
赋值运算
逻辑运算
条件运算

1.算数运算符

运算符	描述
+	加
-	减
*	乘
/	除
%	取余
++	自增
–	自减

2.比较运算符

运算符	描述
==	等于
！=	不等于
>	大于
>=	大于等于
<	小于
<=	小于等于

3.位运算符

运算符	描述
&	与
\|	或
^	异或
~	取补
<<	左移
>>	右移

4.逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

5.赋值运算符

运算符	描述
=	将运算符右边表达式值赋给左边变量
+=	将运算符左边变量加上右边表达式值赋给左边变量
-=	将运算符左边变量减去右边表达式值赋给左边变量
*=	将运算符左边变量乘以右边表达式值赋给左边变量
/=	将运算符左边变量除以右边表达式值赋给左边变量
%=	将运算符左边变量与右边表达式的变量进值取模结果赋给左边变量
&=	将运算符左边变量与右边表达式的变量进行与运算结果赋给左边变量
\|=	将运算符左边变量与右边表达式的变量进行或运算结果赋给左边变量
^=	将运算符左边变量与右边表达式的变量进行异或运算结果赋给左边变量