JavaWeb从入门到进阶（javaScript）

北极的代码

发布于 2026-04-22 19:29:59

630

前言

JavaScript（简称：JS）是一门跨丧台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互，不需要进行编译，只需要通过浏览器进行解释。 JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。 JavaScript在1995年由Brendan Eich发明,并于1997年成为ECMA标准。 ECMAScript 6(ES6)是最新的JavaScript 版本(发布于2015年)。

javaScript的引入方式

内部脚本：将javacript代码定义在HTML界面中

注意点：javaScript代码必须写在<script></script>标签之间

在HTML文档中，可以在任意位置放不同数量的script标签

我们一般会把脚本置于<body>元素的底部、

外部文本：将javaScript代码定义在外部文件中，然后再引入到HTML中

外部文件中，只包含代码不包含标签

JavaScript语法

区分大小写:与Java一样，变量名、函数名以及其他一切东西都是区分大小写的每行结尾的分号可有可无注释: 单行注释://注释内容快捷键 cltl+/ 多行注释:/*注释内容*/ 快捷键 cltr shift+

大括号表示代码块 //判断 if(count == 3) alert(count);

输出语句

使用window.alert()写入警告框使用

document.write()写入HTML 输出使用

console.log()写入浏览器控制台 <script> window.alert("HelloJavaScript");//浏览器弹出警告框 document.write("Hello JavaScript");//写入HTML,在浏览器展示 console.log("Hello JavaScript");//写入浏览器控制台</script>/

变量

Javascript中用var关键字(variable的缩写)来声明变量。 JavaScript是一门弱类型语言，变量可以存放不同类型的值。变量名需要遵循如下规则: 组成字符可以是任何字母、数字、下划线(_)或美元符号($) 数字不能开头建议使用驼峰命名

定义在写在{}中的变量是全局变量，即使定义在外面也能用

注意事项 ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。 ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

JavaScript中分为:原始类型和引用类型。原始类型 number:数字(整数、小数、NaN(Not a Number)) string:字符串，单双引皆可 boolean:布尔。true,false null:对象为空 undefined:当声明的变量未初始化时，该变量的默认值是 undefined

但是我们知道JS是弱类型的语言，我们怎么知道数据是什么类型的呢

这时我们可以用typeof运算符可以获取数据类型alter（typeof 变量）

运算符

算术运算符:+，-，*，/，%，++，--

赋值运算符:=，+=，-=，*=，/=，%=

比较运算符:>，<，>=，<=,!=,==,= 逻辑运算符:&&，l，! 三元运算符:条件表达式?true_value:false_value

注意：==会进行类型转换，===不会进行类型转换

类型转换

字符串类型转为数字: 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。其他类型转为boolean: Number:0和 NaN为false,其他均转为true。 String:空字符串为false,其他均转为true。 Null和 undefined:均转为false。

alter（paseInt “12”）；//12

alter（paseInt “12A45”）//12

流程控制语句

流程控制 if...else if ...elsq.. switch for while do... while

函数

介绍:函数(方法)是被设计为执行特定任务的代码块。定义:JavaScript函数通过function关键字进行定义，语法为: function functionName(参数1,参数2..) //要执行的代码注意: 形式参数不需要类型。因为]avaScript是弱类型语言返回值也不需要定义类型，可以在函数内部直接使用return返回即可调用:函数名称(实际参数列表)

JS对象

Array

JavaScript中Array对象用于定义数组。定义 var 变量名=new Array(元素列表);//方式一 var arr = new Array(1,2,3,4);

var 变量名=[元素列表];//方式二 var arr =[1,2,3,4]; 访问 arr[索引l]=值; arr[10] = "hello"; 并且数组长度，类型都可变属性 length设置或返回数组中元素的数量。 forEach()遍历数组中的每个有值的元素，并调用一次传入的函数，只遍历有值的函数 push()将新元素添加到数组的末尾，并返回新的长度 splice()从数组中删除元素。

字符串

JSON

概念:JavaScript Object Notation,JavaScript对象标记法。 JSON是通过」avaScript对象标记法书写的文本。由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

基本语法

键必须要在双引号中

value的数据类型为: 数字(整数或浮点数)字符串(在双引号中)逻辑值(true或false)数组(在方括号中)对象(在花括号中)null

两个重要方法

BOM

概念:Browser Object Model浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装为对象组成: Window:浏览器窗口对象 Navigator:浏览器对象 Screen:屏幕对象 History:历史记录对象 Location:地址栏对象

重点学习Window和Location

Window 介绍:浏览器窗口对象。获取:直接使用window,其中window.可以省略。window.alert("Hello Window"); alert("Hello Window"); 属性 history:对History对象的只读引用。请参阅History对象。 location:用于窗口或框架的 Location 对象。请参阅Location对象。 navigator:对 Navigator 对象的只读引用。请参阅Navigator 对象。方法 alert():显示带有一段消息和一个确认按钮的警告框。 confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。 setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。 setTimeout():在指定的毫秒数后调用函数或计算表达式。

Location 介绍:地址栏对象。获取:使用window.location获取,其中window.可以省略。window.location.属性; location.属性; 属性: href:设置或返回完整的URL。 location.href = "https://www.itcast.cn";

DOM

概念:Document Object Model，文档对象模型。将标记语言的各个组成部分封装为对应的对象: Document:整个文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象

JavaScript通过DOM，就能够对HTML进行操作: 改变 HTML 元素的内容改变 HTML 元素的样式(CSS) 对 HTML DOM事件作出反应添加和删除 HTML 元素

HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。 Document对象中提供了以下获取Element元素对象的函数: 1.根据id属性值获取，返回单个Element对象 var h1 = document.getElementById('h1'); 2.根据标签名称获取，返回Element对象数组 var divs = document.getElementsByTagName('div'); 3.根据name属性值获取，返回Element对象数组 var hobbys = document.getElementsByName('hobby'); 4.根据class属性值获取，返回Element对象数组 var clss = document.getElementsByClassName('cls');

事件

事件监听事件:HTML事件是发生在HTML元素上的"事情"。比如: 按钮被点击鼠标移动到元素上按下键盘按键事件监听:JavaScript可以在事件被侦测到时执行代码。

常见事件 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onkeydown 某个键盘的键被按下 onmouseover 鼠标被移到某元素之上 onmouseout 鼠标从某元素移开

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript