天天看点
返回

初识JavaScript 第三节

初识JavaScript

    • JavaScript 赋值
      • JavaScript 赋值运算符
    • JavaScript 数据类型
      • JavaScript 拥有动态类型
      • JavaScript 字符串值
      • JavaScript 数值
      • JavaScript 数组
      • JavaScript 对象
      • typeof 运算符
      • Undefined
      • 空值
      • Null
    • JavaScript 函数
      • JavaScript 函数语法
      • 函数调用
      • 函数返回
      • 为何使用函数？
      • () 运算符调用函数
      • 用作变量值的函数
      • 局部变量
    • JavaScript 对象
    • JavaScript 事件
    • JavaScript 字符串
      • JavaScript 字符串
      • 字符串长度
      • 特殊字符
    • JavaScript 字符串方法
      • 查找字符串中的字符串
      • 检索字符串中的字符串
      • 提取部分字符串
      • `slice()` 方法
      • `substring()` 方法
      • `substr()` 方法
      • 替换字符串内容
      • 转换为大写和小写
      • concat() 方法
      • `String.trim()`
      • `charAt()` 方法
      • `charCodeAt()` 方法
    • JavaScript 字符串搜索
    • JavaScript 字符串模板
    • 第三节到这里就结束了

JavaScript 赋值

JavaScript 赋值运算符

运算符：

  • =

  • +=

  • -=

  • *=

  • /=

  • %=

  • <<=

  • >>=

  • >>>=

  • &=

  • ^=

  • |=

  • **=

提示：**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。

赋值实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = 2525252;
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>
初识JavaScript 第三节

JavaScript 数据类型

  JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = 15455 + "Jager";
		document.getElementById("demo").innerHTML = x;
		</script>

		</body>
</html>
初识JavaScript 第三节

JavaScript 拥有动态类型

  JavaScript 拥有动态类型。这意味着相同变量可用作不同类型。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x;               
		var x = 545587;         
		var x = "Jager";      

		document.getElementById("demo").innerHTML = x;
		</script>

		</body>
</html>
初识JavaScript 第三节

JavaScript 字符串值

字符串（或文本字符串）是一串字符（比如 “Jager”）。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var carName1 = "Jager 215454";
		var carName2 = 'Jager 15428545';

		document.getElementById("demo").innerHTML =
		carName1 + "<br>" + 
		carName2; 
		</script>

	</body>
</html>
初识JavaScript 第三节

JavaScript 数值

  JavaScript 只有一种数值类型。超大或超小的数值可以用科学计数法来写。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x1 = 545.00;
		var x2 = 854;
		var x3 = 5.68;

		document.getElementById("demo").innerHTML =
		x1 + "<br>" + x2 + "<br>" + x3;
		</script>

	</body>
</html>
初识JavaScript 第三节

JavaScript 数组

  JavaScript 数组用方括号书写。数组的项目由逗号分隔。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var cars = ["Jager", "system", "jg"];

		document.getElementById("demo").innerHTML = cars[0];
		</script>

		</body>
</html>
初识JavaScript 第三节

JavaScript 对象

  JavaScript 对象用花括号来书写。对象属性是 name:value，由逗号分隔。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>
	
		<script>
		var person = {
		    firstName : "Jager",
		    lastName  : "jg",
		    age       : 35,
		    eyeColor  : "blue"
		};

		document.getElementById("demo").innerHTML =
		person.firstName + " is " + person.age + " years old.";
		</script>

	</body>
</html>
初识JavaScript 第三节

typeof 运算符

  您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型，typeof 运算符返回变量或表达式的类型。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		document.getElementById("demo").innerHTML = 
		typeof "" + "<br>" +
		typeof "Jager" + "<br>" + 
		typeof "Jager jg";
		</script>
	</body>
</html>
初识JavaScript 第三节

Undefined

  在 JavaScript 中，没有值的变量，其值是 undefined,typeof 也返回 undefined。

空值

  空值与 undefined 不是一回事。空的字符串变量既有值也有类型。

Null

  在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。不幸的是，在 JavaScript 中，null 的数据类型是对象。我们可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

JavaScript 函数

  JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		function myFunction(p1, p2) {
		    return p1 * p2;
		}
		document.getElementById("demo").innerHTML = myFunction(87, 8);
		</script>

		</body>
</html>
初识JavaScript 第三节

JavaScript 函数语法

  JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

函数调用

  函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）

函数返回

  当 JavaScript 到达 return 语句，函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = myFunction(654, 7);
		document.getElementById("demo").innerHTML = x;

		function myFunction(a, b) {
		    return a * b;
		}
		</script>

	</body>
</html>
初识JavaScript 第三节

为何使用函数？

  我们能够对代码进行复用：只要定义一次代码，就可以多次使用它。您能够多次向同一函数传递不同的参数，以产生不同的结果。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		function toCelsius(f) {
		    return (5/9) * (f-32);
		}
		document.getElementById("demo").innerHTML = toCelsius(123.8);
		</script>

	</body>
</html>
初识JavaScript 第三节

() 运算符调用函数

  使用上面的例子，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

用作变量值的函数

  函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

局部变量

  在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量只能在函数内访问。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo1"></p>

		<p id="demo2"></p>

		<script>
		myFunction();

		function myFunction() {
		    var carName = "Jager";
		    document.getElementById("demo1").innerHTML =
		    typeof carName + " " + carName;
		}

		document.getElementById("demo2").innerHTML =
		typeof carName;
		</script>

	</body>
</html>
初识JavaScript 第三节

JavaScript 对象

  我们之前已经学到，JavaScript 变量是数据值的容器。这段代码把一个单一值（porsche）赋给名为Jager的变量。

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var Jager = "jg";
		document.getElementById("demo").innerHTML = Jager;
		</script>

	</body>
</html>
初识JavaScript 第三节

JavaScript 事件

  HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

HTML 事件的例子：

  • HTML 网页完成加载
  • HTML 输入字段被修改

  • HTML 按钮被点击

    实例：

<!DOCTYPE html>
<html>
	<body>

		<button onclick="document.getElementById('demo').innerHTML=Date()">点我显示时间</button>

		<p id="demo"></p>

	</body>
</html>
初识JavaScript 第三节

下面是一些常见的 HTML 事件：

  • onchange HTML 元素已被改变
  • onclick 用户点击了 HTML 元素
  • onmouseover 用户把鼠标移动到 HTML 元素上
  • onmouseout 用户把鼠标移开 HTML 元素
  • onkeydown 用户按下键盘按键
  • onload 浏览器已经完成页面加载

JavaScript 字符串

JavaScript 字符串

  JavaScript 字符串是引号中的零个或多个字符。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = "Jager";
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>
初识JavaScript 第三节

字符串长度

  内建属性

length

可返回字符串的长度。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var txt = "566546546546846546546";
		document.getElementById("demo").innerHTML = txt.length;
		</script>

	</body>
</html>
初识JavaScript 第三节

特殊字符

  由于字符串必须由引号包围，JavaScript 会误解这段字符串，避免此问题的解决方法是，使用

\

转义字符。

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>

		var x = "\"Jager\"";
		document.getElementById("demo").innerHTML = x; 

		</script>

	</body>
</html>
初识JavaScript 第三节

JavaScript 字符串方法

查找字符串中的字符串

  

indexOf()

方法返回字符串中指定文本首次出现的索引（位置）。

实例：

<!DOCTYPE html>
<html>
	<body>
		<p id="demo"></p>

		<script>
		var str = "The full name of China is the People's Republic of China.";
		var pos = str.indexOf("full");
		document.getElementById("demo").innerHTML = pos;
		</script>

	</body>
</html>
初识JavaScript 第三节

检索字符串中的字符串

  

search()

方法搜索特定值的字符串，并返回匹配的位置。

提取部分字符串

有三种提取部分字符串的方法：

  • slice(start, end)

  • substring(start, end)

  • substr(start, length)

slice()

 方法

  

slice()

提取字符串的某个部分并在新字符串中返回被提取的部分。

substring()

 方法

  

substring()

类似于

slice()

。不同之处在于

substring()

无法接受负的索引。

substr()

 方法

  

substr()

类似于

slice()

。不同之处在于第二个参数规定被提取部分的长度。

替换字符串内容

  

replace()

方法用另一个值替换在字符串中指定的值。

转换为大写和小写

  通过

toUpperCase()

把字符串转换为大写。通过

toLowerCase()

把字符串转换为小写。

concat() 方法

  

concat()

连接两个或多个字符串。

String.trim()

  

trim()

方法删除字符串两端的空白符。

提取字符串字符

  • charAt(position)
  • charCodeAt(position)

charAt()

 方法

  

charAt()

方法返回字符串中指定下标（位置）的字符串。

charCodeAt()

 方法

  charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码。

JavaScript 字符串搜索

搜索字符串的 JavaScript 方法：

  • String.indexOf()
  • String.lastIndexOf()
  • String.startsWith()
  • String.endsWith()

JavaScript 字符串模板

  • Template Literals
  • Template Strings
  • String Templates
  • Back-Tics 语法

第三节到这里就结束了

我爬得越高，眼前的风景就越发迷人。
网络 javascript 前端 html
上一篇: 第三节：CSS 核心基础
下一篇: 引入组件的两种方式

继续阅读