前端JS基础篇（一）

最新推荐文章于 2025-05-21 13:26:47 发布

志若鸿鹄，尺步寸微

最新推荐文章于 2025-05-21 13:26:47 发布

阅读量341

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端基础 js 文章标签： js js关键字和保留字 js输出方式

本文链接：https://blog.youkuaiyun.com/qq_41363062/article/details/86452339

js 同时被 2 个专栏收录

15 篇文章

订阅专栏

前端基础

11 篇文章

订阅专栏

这篇博客主要介绍了JavaScript的基础知识，包括JavaScript的起源、网页组成部分、JS的三种引入方式及其优缺点、输出方式如弹框和控制台输出、变量和常量的概念以及命名规范。同时，还探讨了JS的关键字和保留字，帮助初学者理解JavaScript的基本概念和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一．javascript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [1]
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
JavaScript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

二．JS课外知识扩展

一个完整产品上线过程

产品->设计师->前端->后台（调接口，后台返回的动态数据）->测试->上线->产品需求改变->网页重构（维护）

网页的组成部分

网页结构 -》HTML（标记语言）
网页外观-》CSS（标记语言）
网页行为-》JavaScript(轻量级的脚本语言)

学习JS的组成部分

1.ECMAscrtpt语法部分（es5,es6.es7）:变量，命名规范。数据类型，语句等
2.DOM（document object model 文档对象模型）部分；提供了操作页面元素常用的属性和方法
2.BOM（browser object model 浏览器对象模型）部分；提供了操作浏览器常用的属性和方法

三．JS的三种引入方式

同css一样分为行内式，内嵌式，外链式

（1）行内式（写在标签里，不安全，没有实现代码分离，不推荐）

在行内写入onclick事件

<!--JS行内式--!>
<div id="div1" onclick="alert(1)">JS你认识吗</div>

(2)内嵌式(写在所有标签的后面，JS要操作页面元素，前提是必须保证这个元素存在)

标准浏览器中，可以直接通过id获取到这个元素，这是偷懒写法，不推荐

<!--JS内嵌式  写在所有标签后面--!>
<script>
           div1.onclick=function(){
           alert(1);
           }
<script>

一般不把js代码写在头部，非要写在头部需要设定整个页面加载完成后，再加载js代码

<script>
window.function(){
     div1.onclick=function(){
           alert(1);
           }
}     
<script>

(3)外链式（新建js文件，然后再引入到页面）

<!--JS外链式  --!>
<script  src="index.js"><script>

四．JS输出的方式（调试代码）

（一）、弹框

alert(1);适合简单的数据，在页面以弹框的方式展示（常用）
在浏览器中弹出一个提示框（提供确定按钮，点击确定弹框消失）
使用ALERT弹框提示信息，提示的内容最后都会被转换为字符串输出（调用了toString这个方法）

alert(1+1); //=>"2"

confirm(“是否删除”) 询问的方式在页面以弹框方式展示（了解）
在alert基础上增加了让用户选择性的操作（提供了俩个按钮：确定和取消）

var confirmFlag = confirm('are you sure delete this!')
alert(confirmFlag);

prompt:在confirm基础上增加让用户输入的效果

var Flag = prompt ('are you sure delete this!')
alert(Flag);

prompt用户点击取消按钮，我们获取到的结果是null，如果点击确定按钮，我们将会获取到用户输入的内容，（如果用户没有输入任何内容，获取的结果是空字符串）
当用户点击确定按钮的时候，我们接收到的结果是true，点击取消按钮我们接收到的结果是false，此后我们可以根据接收的结果做不同的处理即可

（二）、控制台输出

1.F12(FN+F12) 打开浏览器的控制台
2. console.log(“把数据在控制台打印出来”) 简单的信息（常用）
优势不会转换数据类型，输出什么格式的数据都可以
3. console.dir(“把控制台打印详细的信息”)（常用）
4. console.table 把JSON数据展示为一个表格
5. document.write()(在页面展示数据) （了解）

四、js 变量和常量

变量

值是可以变的,变量其实就是一个无意义的名字，他所代表的意义都是其存储的值

var 变量名 =  值；（ES6中定义变量使用let）
var num =12;
var str ='eweas'

常量

值不可以变，任何一个具体的数据值都是常量，例如，12就是一个常量。
和变量类似，我们设置一个常量（也是一个名字），
给其存储一个值，但是这个存储的值不能修改

const num =12；//=>定义一个常量

定义一个常量NUM，给他存储了12，如果在写 num =13；会报错，常量存储的值不能修改

五、js命名规范

1.JS中严格区分大小写

  var test ="JS123";
   var Test ="CSS123";

test和Test是俩个不同的变量

2.遵循国际命名规则（驼峰命名法）
第一个单词首字母小写，其余每一个有意义单词首字母大写

var studentInfo;

注意：命名使用英文单词，不要使用拼音
不是所有单词都能简写，我们需要保证大家看到名字后知道所代表的意思；
Info ： information 信息
Init ： Initialization初始化
add/insert/create ：增加创建插入
remove/rm /clear /del/ delete : 删除
update：修改
get /query /select : 查询获取

js中很多的词都是有特殊含义的，我们这些词叫关键字，现在没有特殊含义的，以后可能作为关键字的，我们叫保留字，关键字和保留字都不能随便用来命名；

六、js关键字和保留字

JS关键字


break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while

JS保留字


abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient