js入门

最新推荐文章于 2024-07-12 09:36:48 发布

旧梦想吃汤圆

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量696

点赞数 15

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_80078038/article/details/137431144

版权

JS入门

一.JavaScript简介

1、JS简介

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

2、JS的组成部分

ECMAScript，描述了该语言的语法和基本对象。文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

3、JS的基本特点

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

4、JS的特性

JavaScript脚本语言具有以下特点: 1)脚本语言。 JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。 2)基于对象。 JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

简单。 JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
动态性。 JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
跨平台性。 JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。

二、JS的主要内容

1.直接写入HTML输出流

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <p>
    js试用
  </p>
  
  <script>
    document.write("<p>这是一段p标签内容</p>")
  </script>
  
</body>
</html>

2.对事件的反应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <p>
    js试用
  </p>
  <button type="button" οnclick="alert('欢迎！')">点击</button>
</body>
</html>

3.改变HTML内容

####

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="demo">
    js试用
  </p>
  <script>
    function changeWord()
    {
      x=document.getElementById("demo");
      x.innerHTML="hello "
    }
  </script>
  <button type="button" οnclick="changeWord()">点击</button>
</body>
</html>

4.改变HTML图像

5.改变HTML样式

js试用

点击

6.验证输入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="demo">
    js试用
  </p>
  <input type="text" id="demo">
  <script>
    function changeWord()
    {
      var x=document.getElementById("demo").value;
     if(x==""||isNaN(x))
     {
      alert("不是数字")
     }
    }
  </script>
  <button type="button" οnclick="changeWord()">点击</button>
</body>
</html>

三、JS的用法

1.输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>JS输出</p>
  <script>
    window.alert(5+6);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="demo">JS输出</p>
  <script>
    document.getElementById("demo").innerHTML="已修改"
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="demo">JS输出</p>
  <script>
    document.write(Date());
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="demo">JS输出</p>
  <script>
    a=5;
    b=6;
    c=a+b;
    console.log(c);
  </script>
</body>
</html>

2.语法

1）字面量

在编程语言中，一般固定值称为字面量（数字字面量可以使整数或者是小数，或者是科学计数法）

包含：数字字面量，字符串字面量，表达式字面量，数组字面量，对象字面量，函数字面量

2）变量

在编程语言中，变量用于存储数据值

JS中使用关键字var来定义变量，使用等号（=）为变量赋值

注：变量是一个名称，字面量是一个值

3）操作符

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述

4）关键字

abstract	else	instanceof	super

boolean	enum	int	switch

break	export	interface	synchronized

byte	extends	let	this

case	false	long	throw

catch	final	native	throws

char	finally	new	transient

class	float	null	true

const	for	package	try

continue	function	private	typeof

debugger	goto	protected	var

default	if	public	void

delete	implements	return	volatile

do	import	short	while

double	in	static	with

3.语句

1）分号

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句

2）代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落：

3）代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

4）语句标识符

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

5）空格

var person="runoob"; var person = "runoob";

4.注释

1）单行注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头。

本例用单行注释来解释代码

2）多行注释

多行注释以 /* 开始，以 */ 结尾。

注：可用注释阻止代码的执行，来进行代码的调试

5.变量

1.变量

变量是用于存储信息的"容器"

var x=5; var y=6; var z=x+y;

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

注： JavaScript 语句和 JavaScript 变量都对大小写敏感。

2.数据类型

JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

注：JS有动态类型，相同的变量可以赋值不同类型的变量

var x; // x 为 undefinedvar x = 5; // 现在 x 为数字 var x = "John"; // 现在 x 为字符串

3.变量声明

使用var进行变量的声明

var carname

可以在一条语句里面声明很多变量

var lastname="Doe", age=30, job="carpenter";

6.对象

1）对象定义：

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

2）对象属性：

可以说 "JavaScript 对象是变量的容器"。

但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

3）访问对象属性：

方法一：person.lastName; 类似数组

方法二：person["lastName"];

4）对象方法：

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

旧梦想吃汤圆

关注

15
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
js入门

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。ECMAScript，描述了该语言的语法和基本对象。文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。JavaScript是一种属于网络的高级脚本
复制链接

扫一扫