首页 > 编程语言 >JavaScript入门

JavaScript入门

时间：2024-04-06 17:36:28浏览次数：19  
标签：arr 入门 对象 JavaScript alert HTML var

什么是JavaScript？

JavaScript是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

（脚本语言：能直接通过浏览器的解释就可以运行，不用像Java那样需要虚拟机编译运行）

JavaScript和Java时完全不同的语言，不论是概念设计。但是基础语法类似。

JavaScript的引入方式

1.内部脚本：讲JS代码定义在HTML页面中

  • JavaScript代码必须位于<script><script>标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部，可改善显示速度
<script>
	alert("Hello JavaScript");
</script>

2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

  • 外部JS文件中，只包含JS代码，不包含<script>标签
  • <script>标签不能自闭合
<script src="js/demo.js"></script>

JS的书写语法

1.区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

2.每行结尾的分号可有可无，但一般还是建议加上分号

3.注释：

单行注释：//注释内容

多行注释：/*注释内容*/

4.大括号表示代码块

输出语句

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

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

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

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

变量

1.JavaScript中用var关键字（variable的缩写）来声明变量。

2.JavaScript是一门弱类型语言，变量可以存放不同类型的值

3.变量名需要遵循如下规则：

  • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
  • 数字不能开头
  • 建议使用驼峰命名

var的特点

1.作用域比较大，全局变量

2.可以重复定义，例如var x = 1；var x= ‘A’；最后x的值是A

注意事项

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

数据类型

JavaScript中分为：原始类型（相当于Java里的基本数据类型）和引用类型

number：数字（整数、小数、NaN（Not a Number））

string：字符串，单双引皆可

boolean：布尔。true，false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

var a = 20;
alert(typeof a);

typeof null // 返回object对象（早期的一个bug沿用至今）

typeof a // 返回undefine（没有定义a）

运算符

算符运算符：+, -, *, /, %, ++, --

赋值运算符：=, +=, -=, *=, /=, %=

比较运算符：>, <, >=, <=, !=, ==, ===(全等运算符)

逻辑运算符：&&, ||, !

三元运算符：条件表达式 ? true_value : false_value

区别：==会进行类型转换，===不会进行类型转换

var a = 10;
alert(a == "10");//返回true
alert(a === "10");//返回false
alert(a === 10);//返回true

类型转换

1.字符串类型转为数字：将字符串字面值转换为数字。如果字面值不是数字，则转为NaN。

2.其他类型转为boolean：

  • Number：0和NaN为false，其他均转为true。
  • String：空字符串为false，其他均转为true。
  • Null和undefined：均转为false。

流程控制语句

  • if...else if...else...
  • switch
  • for
  • while
  • do...while

函数

1.介绍：函数（方法）是被设计为执行特定任务的代码块。（相当于Java里的方法）

2.定义方式一：JavaScript函数通过function关键字进行定义，语法为：

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

定义方式二：

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

3.注意：

  • 形式参数不需要类型。应为JavaScript是弱类型语言
  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
  • JS中，函数调用可以传递任意个数的参数。

4.调用：函数名称（实际参数列表）

JS对象

Array

1.JavaScript中Array对象用于定义数组。

2.定义：

var arr = new Array(1,2,3,4);//方式一：var 变量名 = new Array(元素列表);
var arr = [1,2,3,4];//方式二：var 变量名 = [元素列表];//方式二

3.访问

arr[10] = "hello";//arr[索引]=值;

4.注意：JavaScript中的数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型的，所以可以存储任意的类型的数据（即长度可变，类型可变）。

5.属性

属性 描述
length 设置或返回数组中元素的数量

6.方法

方法 描述
forEach( ) 遍历数组中的每个有值的元素，并调用一次传入的函数
push( ) 将新元素添加到数组的末尾，并返回新的长度
splice( ) 从数组中删除元素 
var arr = [1, 2, 3, 4];
//for循环
for (let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}
//forEach:遍历数组中有值的元素
arr.forEach(function(e){
	console.log(e);
})
//在ES6中有简化写法  箭头函数：(...) => {...} -- 简化函数定义
arr.forEach((e) => {
    console.log(e);
})
//push：添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);//则数组arr为 1，2，3，4，7，8，9
//splice：删除元素
arr.splice(1,2);//arr.splice(开始的数（索引），要删几个)
console.log(arr);//则数组arr为 1，4

String

1.String字符串对象创建方式有两种：

var str = new String("Hello String");//方式一：var 变量名 = new String("...");
var str = "Hello String";//方式二：var 变量名 = "...";
var str = 'Hello String';

属性：

属性 描述
length 字符串的长度

方法：

方法 描述
charAt() 返回在指定位置的字符
indexOf() 检索字符串
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引号之间的字符

实例：

//创建字符串对象
//var str = new String("Hello String");
var str = "Hello String";
console.log(str);
//length
console.log(str.length);
//charAt
console.log(str.charAt(4));
//indexOf
console.log(str.indexOf("lo"));
//trim
var s = str.trim();
console.log(s);
//substring(start,end) --- 开始索引，结束索引（含头不含尾，左闭右开）
console.log(s.substring(0,5));

JavaScript自定义对象

1.定义格式：

var 对象名 = {
    属性名1：属性值1，
    属性名1：属性值1，
    属性名1：属性值1，
    函数名称：function（形参列表）{}
}

var user = {
    name:"Tom",
    age:20,
    gender:"male",
    //eat: function(){
    //    alert("用膳~");
    //}
    eat(){
        alert("用膳~");
    }
};

2.调用格式：

console.log(user.name);//对象名.属性名;
user.eat();//对象名.函数名();

JSON

1.概念：JavaScript Object Notation，JavaScript对象标记法。

2.JSON是通过JavaScript对象标记法书写的文本。

3.由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

4.定义：var 变量名 = '{"key1" : value1, "key2" : value2}';

示例：var userStr = '{"name" : "Jerry", "age" : 18, "addr" : ["北京", "上海", "西安"]}';

value的数据类型为：

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true或false）
  • 数组（在方括号中）
  • 对象（在花括号中）
  • null

5.JSON字符串转换为JS对象

var jsObject = JSON.parse(userStr);

6.JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

实例：

//定义json
var jsonstr = '{"name" : "Jerry", "age" : 18, "addr" : ["北京", "上海", "西安"]}';
//json字符串->js对象
var obj = JSON.parse(jsonstr);
alert(obj.name);
//js对象->json字符串
alert(JSON.stringify(obj));

BOM

1.概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

2.组成：

​ Window：浏览器窗口对象

​ Navigator：浏览器对象

​ Screen：屏幕对象

​ History：历史记录对象

​ Location：地址栏对象

Window

1.介绍：浏览器窗口对象。

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

3.属性：

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

4.方法：

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

实例：

//获取
window.alert("Hello BOM");
alert("Hello BOM Window");
//方法
//confirm - 对话框 -- 确认：true，取消：false
var flag = confirm("您确认删除该记录嘛？");
alert(flag);
//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
    i++;
    console.log("定时器执行了"+i+"次");
},2000);
//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){
    alert("JS");
},3000);
Location

1.介绍：地址栏对象

2.获取：使用window.location获取，其中window.可以省略。

3.属性：

  • href：设置或返回完整 的URL。
location.href = "https://www.bilibili.com";

DOM

1.概念：Document Object Model，文档类对象模型。

2.将标记语言的各个组成部分封装为对应的对象：

  • Document：整个 文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

3.JavaScript通过DOM，就能够对HTML进行操作：

  • 改变HTML元素的内容
  • 改变HTML元素的样式（CSS）
  • 对HTML DOM事件作出反应
  • 添加和删除HTML元素

DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1.Core DOM - 所有文档类型的标准模型

  • Document：整个 文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

2.XML DOM -XML 文档的标准模型

3.HTML DOM - HTML文档的标准模型

  • Image：<img>
  • Button：<input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

Document对象中提供了以下获取Element元素对象的函数：

//根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
//根据标签名称来获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
//根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
//根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');

事件监听

事件绑定

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

<input type = "button" onclick = "on()" value = "按钮1">
<script>
    function on(){
    	alert('我被点击了！');
}
</script>

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

<input type = "button" id = "btn" value = "按钮2">
<script>
    document.getElementById('btn').onlick = function(){
        alert('我被点击了！');
    }
</script>

常见事件

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

标签：arr,入门,对象,JavaScript,alert,HTML,var
From： https://www.cnblogs.com/JenckMin/p/18117642

相关文章

  • axios快速入门
    一、环境配置1.1概述上古浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也......
  • C++从入门到精通——类和对象(上篇)
    1.面向过程和面向对象初步认识C语言是面向过程的，关注的是过程，分析出求解问题的步骤，通过函数调用逐步解决问题。C++是基于面向对象的，关注的是对象，将一件事情拆分成不同的对象，靠对象之间的交互完成。2.类的引入C语言中，结构体中只能定义变量，在C++中，结构体内不仅可以定义变量......
  • lambda演算入门 （软件工程与计算 理论部分2）20240406
    此文章来源于网络，是学习lambda演算过程的总结与复习，着重于探讨“为什么(Why)”与“怎么做(How)”，也希望能对看到它的人学习了解这个形式系统有些微帮助。由于之前看了不少wiki、tutorial、introduction之流，绝大多数读过之后仅知其然而不知其所以然，我不知道为什么它们都不解释为什......
  • Java登陆第三十九天——Router路由入门
    什么是路由？ 类似于Servlet的映射路径。 路由可以让，不同的URL展示不同的页面。RouterRouter是Vue衍生的生态系统之一，所以需要单独安装。路由案例需求1安装依赖还记得npm安装依赖指令吗？看这。npmivue-route1-1编写组件略2编写路由配置类似于Servlet的映射路径，需......
  • FPGA入门笔记011_A——嵌入式块RAM的使用
    1、Cyclone-II系列FPGA内部结构图1——Altera公司Cyclone-II系列FPGA内部结构​ 如上图所示是Altera公司Cyclone-II系列FPGA内部结构，个模块作用如下：​ PLL锁相环—对时钟进行管理。​ IOEs—管脚单元，配置管脚，设置输入输出。​ 逻辑阵列—实现组合、时序逻辑。​ 块RAM......
  • 入门级Python编程题（6）
    题目描述现在有 �t 毫升肥宅快乐水，要均分给 �n 名同学。每名同学需要 22 个杯子。现在想知道每名同学可以获得多少毫升饮料（严格精确到小数点后 33 位），以及一共需要多少个杯子。输入格式输入一个实数 �t 和一个正整数 �n，使用空格隔开。输出格式输出两行。第一行输出......
  • 蓝旭工作室第三周预习：JS入门
    一、JavaScript概述    JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言。    解释型：运行之前不需要编译；运行之前不会检查错误，直到碰到错误为止。    编译型：对源码进行编译，还能检查语法错误。如C、C++。运行环境    1、......
  • Redis从入门到精通(七)Redis实战(四)库存超卖、一人一单与Redis分布式锁
    ↑↑↑请在文章开头处下载测试项目源代码↑↑↑文章目录前言4.3优惠券秒杀4.3.4库存超卖问题及其解决4.3.4.1问题分析4.3.4.2问题解决4.3.5一人一单需求4.3.5.1需求分析4.3.5.2代码实现4.3.5.3并发问题4.3.5.4悲观锁解决并发问题4.3.5.5集群环境下的并发问题......
  • UML 架构图入门介绍 starUML
    拓展阅读常见免费开源绘图工具OmniGraffle创建精确、美观图形的工具UML-架构图入门介绍starUMLUML绘制工具starUML入门介绍PlantUML是绘制uml的一个开源项目UML等常见图绘制工具绘图工具draw.io/diagrams.net免费在线图表编辑器绘图工具excalidraw介绍绘......
  • 在 JavaScript 中，exec() 和 match() 区别
    在JavaScript中，exec() 和 match() 都是与正则表达式相关的常用方法，但它们的使用方式和返回的结果有所不同。exec() 方法exec() 是 RegExp 对象的一个方法，用于在字符串中执行一次正则表达式匹配。它的语法是：regexp.exec(string)其中 regexp 是一个正则表达式对象，s......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99