JavaScript入门

原创已于 2024-10-11 19:02:40 修改 · 872 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习

于 2024-10-09 22:33:43 首次发布

JavaScript入门

引入方式

内部脚本：将js代码定义在HTML页面中
- Javascript 代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示的速度
外部脚本：将js代码定义在外部js文件中，然后引入到HTML页面中
- 外部js文件中，只包含js代码，不包含<script>标签
- <script> 标签不能自闭合

书写语法

区分大小写：与Java一样，变量名，函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无

输出语句

window.alert()写入警告框

document.write()写入HTML输出

console.log()写入浏览器控制台

变量

JavaScript中使用var关键字（variable的缩写）来声名变量。
ES6新增let关键字来定义变量，只在let关键字所在的代码块内有效，且不允许重复声名。
ES6新增const关键字，一旦声名，值不可以改变。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线、美元符号

数字不能开头

建议使用驼峰命名

数据类型

JavaScript中分为：原始类型和引用类型

原始类型

number：数字
string：字符串
boolean：布尔
null：对象为空
undefined：当前声名的变量未初始化，默认值为undefined

typeof可获得数据类型

运算符

“===”全等运算符，只有值和类型相同时才为true，其他同Java相同。

类型转换

字符串类型转为数字：

将字符串字面值转为数字。如果字面值不是数字，则转为NaN(not a number)

其他类型转为Boolean：

Number：0和NaN为false，其他均转为true。

String：空字符串为false，其他均转为true。

Null和undefined：均转为false。

流程控制语句

基本和Java相同

函数

介绍 : 函数(方法)是被设计为执行特定任务的代码块。

定义:JavaScript 函数通过 function 关键字进行定义，语法为:

function functionName(参数1,参数2..){//要执行的代码}

注意：

形式参数不需要类型。因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

可以同时传多个值，但是只接受同数量的值

调用: 函数名称(实际参数列表)or a=function( ){//执行的代码}

箭头函数：（）=>{ }

数组

定义JavaScript中Array对象用于定义数组

定义

var 变量名 = new Array（元素列表）；

var 变量名=[ 元素列表]；

访问

arr[索引]=值；

属性：length数组长度

方法：forEach(函数) 便利数组中每一个有值的元素

push()添加到数组末尾，并返回新的长度

splice() 从数组中删除元素

String

方法：

charAt() 返回指定位置的字符

indexof() 检索字符串

trim() 去除字符串两边的空格

substring() 提取字符串中两个指定的索引号之间的字符

JSON

var 对象名 = {

“属性名1” ：属性值，

”属性名2“：属性值2，

“属性名3”；属性值3，

函数名称：function(形参列表){}//function可以省略

}；

调用格式：

对象名.函数名()

对象名.属性名()

JSON字符串转为JS对象

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

BOM

window

获取：直接使用window，其中window可以省略。

属性：

history:对History对象的只读引用
location：用于窗口或框架的location对象。
navigator：对Navigator对象的只读引用。

方法：

alert（）：显示带有一段消息和一个确认按钮的警告框。
confirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框。
setinterval（）：按照指定的周期（一毫米计）来调用函数或计算表达式。
setTimeout():在指定的毫秒数后调用函数或计算表达式。

location

获取:使用window.location获取，

属性： href：设置或返回完整的URL

DOM

事件监听

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

方式二：通过DOM元素属性绑定

<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了！')；
    }
</script>