JavaScript基础

古其

已于 2024-05-09 10:42:38 修改

阅读量759

点赞数 14

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2024-05-09 10:41:42 首次发布

本文链接：https://blog.youkuaiyun.com/2202_75900709/article/details/138603838

Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区

分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当换缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。JavaScript的正式名称是"ECMAScript"。这个标准由ECMA组织发展和维护。ECMA-262是正式的 JavaScript标准。这个标准基于JavaScript (Netscape)和JScript (Microsoft)。Netscape(Navigator 2.0) 的Brendan Eich发明了这门语言，从1996年开始，已经出现在所有的Netscape和Microsoft浏览器中。ECMA-262的开发始于1996年，在1997年7月，ECMA会员大会采纳了它的首个版本。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容

动,数据动态变化和动画特效等。

JS特点：

JS是运行在浏览器上的一种脚本语言

1.脚本语言

脚本语言是一种简单的程序，规模小,不需要编译,运行快,是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

2.基于面向对象的语言

面向对象有三大特点（封装，继承，多态）缺一不可。

3.事件驱动

在网页中执行了某种操作的动作，被称为"事件"(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

4.简单性

变量类型是采用弱类型，并未使用严格的数据类型。

var a,b,c; a=123; b="abc"; a=b;

5.安全性

JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互

6.跨平台性

JavaScript依赖于浏览器本身，与操作平台无关，只要计算机安装了支持JavaScript的浏览器（装有JavaScript解释器），JavaScript程序就可以正确执行。

缺点：

各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

HTML和CSS和JS这之间的关系

HTML和CSS和JS都是前端的主要技术,三者各有分工.HTML可以用于制作网页的主体结构,CSS用于给网页做美化,JS用于在网页上添加动态效果

基本语法：

<script type="text/javascript">
alert("javaScript 你好，我来了!!");
</script>

核心语法约定

1、代码区分大小写

javaScript的关键字小写

内置对象大写字母开头，对象名称通常是小写，方法函数命名规则采用驼峰命名法。

2、变量、对象和函数的名称

标识符命名规范：只能包含数字、字母、下划线和$，且不能以数字开头，不能使用javaScript关键字与保留字。

3、分号表示结束符

注意：按语法可以省略，但行业内部要求一般都写上。

一、脚本的引入方式

1、行内引入

<body>
你好，javaScript ，我们来了!!
<a onclick="javaScript:alert('你点了我！');">行内引入</a>
</body>

注意：当js需要用到引号的时候，由于写标签已经用了双引号，所以写成单引号。

2、内嵌

<script type="text/javascript">
alert("内嵌方式");
</script>

其中html5默认type属性的值为"text/javascript",因此可以不写，但是不推荐省略。

3、外部

A、创建一个扩展名为js的文件，并写js代码

B、在目标页面引入该js文件

<script type="text/javascript" src="js/main.js">
</script>

src 表示要引入的外部js脚本文件的完整路径

小结：script标签可以在页面中有多段js程序，js代码的引入可以在head中，也可以在body中。

外部引用优点：

代码复用度高，更易于维护代码

注意事项：

1、在一个页面上可以同时引入多个js文件

2、每个js的文件的引入都要使用一个独立的script标签

二、js注释

方便阅读代码，有利于代码维护及协同开发。

1、单行注释

注释一行 //开始 ctrl + /

2、多行注释

/* 注释的内容 */ ctrl + shift + /

三、js输入/输出方式

输出方式

1、弹出提示框

以弹框的形式在页面中输出要显示的内容

alert("里面是我们要显示的内容");

2、在页面中输出信息

A、输出简单的信息

<script type="text/javascript">
document.write("这是我们要在页面中输出的内容");
</script>

B、输出格式的内容信息（含html标签）

<script type="text/javascript">
document.write("这<h2>是我</h2>们要<br/>在页面中输出的内容");
</script>

注意引号的使用，不要同时使用同一个引号

document对象指的是html文档本身

其中“.”操作符可以直接调用该对象的功能或值。

3、控制台日志信息

console表示控制台对象，在大多数浏览器中要打开控制台，可以按快捷键f12 选择console选项卡。

1、控制台普通信息

console.info("我是控制台日志信息");

2、控制台日志信息

console.log("我是控制台日志信息");

输入方式

1、确定框

confirm("需要提示的信息!");

会有两个按钮确定 . 取消

<script type="text/javascript">
var result;
result = confirm("需要提示的信息!");
document.write("操作结果:"+result);
</script>

学完变量我们就会发现，想要知道操作的结果并存起来使用，那么我们可以使用变量接收操作结果。

2、信息输入对话框

prompt("请输入年龄：") ; 接收用户输入的数据

var result;
result = prompt("请输入年龄：");
document.write("操作结果:"+result);

prompt("你确定要删除么？",18); 接收用户输入的数据，后一个默认值

感谢大家的阅读，如有不对的地方，可以私信我，感谢大家！