JavaScript入门

最新推荐文章于 2025-02-09 23:16:16 发布

原创最新推荐文章于 2025-02-09 23:16:16 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Java 同时被 2 个专栏收录

65 篇文章

订阅专栏

前端知识

1 篇文章

订阅专栏

JavaScript入门

一、简介

1.1 什么是JS

JavaScript是一种轻量级的编程语言，可直接插入HTML页面；JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

1.2 JS的功能

直接写入 HTML 输出流
对事件的反应
改变 HTML 内容/图像/样式
验证输入

1.3 JS的用法

HTML 中的脚本必须位于之间的 JavaScript 代码。

JS代码可放在或标签中，两者都可；也可以外部导入：

<script src="myScript.js"></script>

例如，编写一个JS脚本，然后导入html页面：

alert("基金又tm跌了")

PS:外部JS不能包含< script >标签。

但外部JS运行效果与在htm页面中一致，也是在页面加载时就执行JS代码。

1.4 JS在Chrome中运行

1.4.1 Console 窗口调试 JavaScript 代码

1.4.2 Chrome snippets 小脚本

二、JS语法

2.1 JS输出

JS输出的方式有以下几种：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。

<p id="div-1">ddd</p>
<script>
    document.getElementById("div-1").innerHTML="内容是由innerHTMl修改的";
</script>
======
需要注意的是，id的命名要在getElementById方法执行异常，否则会报错 (Null)无法执行。

使用 console.log() 写入到浏览器的控制台。

2.2 JavaScript语法

数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：

{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}

函数（Function）字面量 定义一个函数：

function myFunction(a, b) { return a * b;}

关键字函数（Function）字面量、

数据类型

2.3 JS语句

JavaScript 语句向浏览器发出的命令，语句的作用是告诉浏览器该做什么。

2.6 作用域

在 JavaScript 中, 对象和函数同样也是变量；在 JavaScript 中, 作用域为可访问变量，对象，函数的集合；JavaScript 函数作用域: 作用域在函数内修改。

2.7 事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性

等等 …

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。

等等 …

2.7 JS字符串

字符串可以存储一系列字符，如 “John Doe”；字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号。

可以使用索引位置来访问字符串中的每个字符：

var character = carname[7];

字符串方法：

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值