前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 基础

JavaScript 基础

作者头像
Nian糕
修改2024-03-19 15:18:28
1.2K0
修改2024-03-19 15:18:28
Unsplash
Unsplash

JavaScript 是一种轻量级,解释型的,有着函数优先 (First-class Function) 的编程语言,虽然它是作为开发 WEB 页面的脚本语言而出名的,但是在很多非浏览器环境中也使用 JavaScript,例如 node.js 和 Apache CouchDB,JS 是一种基于原型、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如:函数式编程)编程风格

HTML CSS JavaScript
HTML CSS JavaScript

JavaScript 介绍

HTML 是一种标记语言,用来结构化我们的网页内容和赋予内容含义,例如定义段落、标题,或是在页面中嵌入图片和视频

CSS 是一种样式规则语言,我们将样式应用于我们的 HTML 内容, 例如设置背景颜色和字体,对页面的内容进行布局

JavaScript 是一种编程语言,允许你创建动态更新的内容,控制多媒体,图像动画等等

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:① 核心(ECMAScript) ECMAScript是一个标准;② 文档对象模型 DOM Document Object Model , 描述了处理网页内容的方法和接口;③ 浏览器对象模型 BOM Browser Object Model ,描述了与浏览器进行交互的方法和接口

JavaScript 特点:① 解释性执行的脚本语言;② 基于对象;③ 简单弱类型;④ 相对安全(不会操控文件);⑤ 事件驱动;⑥ 跨平台性;

JavaScript 引入方式

内部写入 在 HTML 文件中直接进行代码的书写,把全部 JavaScript 引用放在 <body> 中,放在页面的内容后面

代码语言:javascript
复制
<body>
  <!-- 内容在这 -->
  <script type="text/javascript" src="js/index.js"></script>
</body>

因为浏览器执行 HTML 文件,是从上而下执行的,若是把 JavaScript 放在内容的前面,页面还未加载完成,JS 代码却已经执行完毕了,可能导致有些 JS 事件无法触发,在这里可以通过 UI 事件来解决,UI 事件指的是那些不一定与用户操作有关的事件

代码语言:javascript
复制
windows.onload = function () {
    //加载完毕之后执行
}

load 事件会在一个资源及其依赖资源已完成加载后立即发生,目的: 保证在执行 JS 代码之前, 页面已经完全加载完毕,一般用于 head 中的 script 代码段

外部写入 所有的 <script> 标签都放在页面的 <head> 标签中

代码语言:javascript
复制
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="js/index.js"></script>
</head>

JavaScript 使用 C 语言风格的注释,包括单行注释和块级注释

代码语言:javascript
复制
var num = 13;//单行注释

/*
  var num = 13;
  var arr = [];
  块级(多行)注释
*/

JavaScript 输出

JavaScript的输出方式一共有三种,分别是:alert 警告窗、弹出框;console.log 控制台打印;document.write 文档输出

alert
alert
console.log
console.log
document.write
document.write

确认信息框,点击确认,返回 True;点击取消,返回 False

confirm_1
confirm_1
confirm_2
confirm_2

信息提示框,将填写的信息返回控制台

prompt_1
prompt_1
prompt_2
prompt_2

注释:JavaScript 代码可以直接在 Console 控制台执行,在 Chrome 浏览器开发者工具中,快捷键 F12

JavaScript 声明及命名规则

直接量(literal),程序中直接使用的数据值

变量(variable),变量是使用 var 关键字定义的一个存储空间,将直接量储存起来,方便调用

JavaScript 的变量是松散类型(弱类型),可以用来保存任何类型的数据,在 C 语言当中,我们定义整型变量会使用到 int,定义字符型变量会使用 char,定义浮点型变量会使用 float,而在 JavaScript 当中,不过什么类型的数据,统一通过关键字 var 进行声明

命名规则,变量名、属性名、函数名、方法名 的命名规则:

a. 由数字,字母,下划线 _,美元符 $ 构成,第一个字符不能为数字;

b. 区分大小写;

c. 驼峰命名法 (helloWorld);

d. 中间不能出现空格;

e. 不能使用系统关键字、保留字;

关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等,按照规则,关键字是语言保留的,不能用作标识符

代码语言:javascript
复制
break case  catch  continue  default  delete  do  else finally for function if in
instanceof new return switch this throw try typeof var void while with

保留字在某种意思上是为将来的关键字而保留的单词,因此保留字不能被用作变量名或函数名

代码语言:javascript
复制
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 volatile

JavaScript 基本数据类型

数字类型 Number

代码语言:javascript
复制
var num = 10;

字符串类型 String,字符串必须使用引号,单引号或者双引号都可以,这两者没有区别

代码语言:javascript
复制
var str = "10";

布尔类型 Boolean 布尔值只有 True 和 False

代码语言:javascript
复制
var bol_1 = true,bol_2 = false; 

未定义类型 Undefined,无初始值即为未定义类型

代码语言:javascript
复制
var a; 

空类型 Null

代码语言:javascript
复制
var b = null;

我们一般使用 typeof 操作符来返回数据类型

数据类型
数据类型
代码语言:javascript
复制
var myName = "Nian糕"; //不要使用name作为变量名
var age = 22;
var ifSingle = true;

alert(myName,age,ifSingle); 
console.log(myName,age,ifSingle); 
运行结果 1
运行结果 1
运行结果 2
运行结果 2

由上面的运行结果可以看到,警告窗只输出了一个参数,而控制台却把所有的参数都打印了出来,这是因为 alert 函数一般用于输出字符串类的提示或警告信息,不过它的参数只有 1 个,多余的会被丢弃

JavaScript 复合数据类型

数组 Array,一组值的有序集合,使用下标体现有序,数组的下标从零开始,通过下标访问某个数组元素

运行结果
运行结果

对象 Object,一组键值对的集合,键值对以 : 相隔,属性间用逗号分隔,最后一个属性的逗号可省略,对象属性的访问方式有两种:① 点访问法;② 中括号访问法

代码语言:javascript
复制
var o = {};
var btnList = document.getElementsByTagName("button");
var btnList = document["getElementsByTagName"]("button");
代码语言:javascript
复制
//对象的声明赋值
var person = {
    name: "Nian糕",
    age: 22,
    city:"广州"
};
console.log(person.city)
console.log(person["age"])
运行结果
运行结果
代码语言:javascript
复制
var classOne = [{
  name: "Nian糕",
  gender: "male",
  number: 13,
  age: 22,
  score: 95
},{
  name: "抹茶松糕",
  gender: "male",
  number: 13,
  age: 24,
  score: 86
},{
  name: "枸杞红豆糕",
  gender: "female",
  number: 13,
  age: 22,
  score: 90
}]

// 第一位同学的分数:classOne[0].score
// 第二位同学的分数:classOne[1].score
// 第三位同学的分数:classOne[2].score

var avgScore = (classOne[0].score + classOne[1].score + classOne[2].score)/3;
console.log("本班级的平均分是" + avgScore);
运行结果
运行结果

打印所有人的分数

代码语言:javascript
复制
for (var i = 0; i < classOne.length; i++) {
  console.log(classOne[i].name + "的分数为" + classOne[i].score);
};
运行结果
运行结果

使用 for 循环求班级平均分

代码语言:javascript
复制
var totalScore = 0;
for (var i = 0; i < classOne.length; i++) {
  totalScore = totalScore + classOne[i].score;
};
var avgScore = totalScore / classOne.length;
console.log("本班级的平均分是:" + avgScore);
运行结果
运行结果

查找班级里的男同学个数

代码语言:javascript
复制
var count = 0;
for (var j = 0; j < classOne.length; j++) {
  if (classOne[j].gender === "male") {
    count++;
  }
}
console.log("班级的男同学个数为" + count);
运行结果
运行结果

查找班级分数最高的同学

代码语言:javascript
复制
var maxScore = 0;
var studentIndex = 0;
for(var k = 0; k < classOne.length; k++) {
  if(maxScore < classOne[k].score) {
    maxScore = classOne[k].score;
    studentIndex = k;
  }
}
console.log("班级分数最高分为:" + maxScore);
console.log("班级分数最高分同学为:" + classOne[studentIndex].name);

JavaScript 算术运算符

代码语言:javascript
复制
r = a + b; 
r = a - b;
r = a * b;
r = a / b;
r = a % b; //求模,取余
r = 'a' + 'b'; //字符串拼接

自增自减 ++ --,运算符在前,先赋值,再运算;运算符在后,先运算,再赋值

运行结果 1
运行结果 1
运行结果 2
运行结果 2
运行结果 3
运行结果 3
运行结果 4
运行结果 4

复合运算符

代码语言:javascript
复制
a += b; //a = a + b
a -= b; //a = a - b
a *= b; //a = a * b
a /= b; //a = a / b
a %= b; //a = a % b

JavaScript 关系操作符

代码语言:javascript
复制
a > b;
a < b;
a == b; //等于
a === a; //全等,即完全相等
a <= b;
a >= b;
a != b;

等于 == 的情况下,只要值相同就返回 True

全等 === 的时候,需要值和类型都要匹配才能返回 True

赋值运算符 = 并不是等于,如果我想把 5 这个值赋值给变量 a,那么写法应该是:a=5;

注释:关系操作符返回的是布尔值 True / False,控制字符的比较,比较的是相对应的 ASCII 码

运行结果
运行结果

条件运算符

表达式 1?表达式 2:表达式 3,若表达式 1 为真,则返回表达式 2,否则返回表达式 2

代码语言:javascript
复制
(a>b)?(c=4):(c=3)
假设 a = 5, b = 3
5 > 3为真, 则执行c = 4

JavaScript 逻辑运算符

&& 逻辑与,前后两个条件均为真才会执行

| | 逻辑或,前后两个条件有一个为真就可以

! 非,求当前的值的非

短路现象,由逻辑与和逻辑或的特性造成的特殊现象

短路与:当条件 1 为假时,条件 2 执行与否不影响总结果,形成短路,称为一假即假

短路或:当条件 1 为真时,条件 2 执行与否不影响总结果,形成短路,称为一真即真

在数学中,我们这样书写一个式子:y=(x+2)*{[(4-x)*3-8]/4+3}

而在 JavaScript 中,我们这样书写:y=(x+2)*(((4-x)*3-8)/4+3),因为,在 JavaScript 当中,小括号 () 的作用是提升优先级;中括号 [] 指的是数组;大括号 {} 指的是对象

NaN

NaN = not a number

一般在数学表达式计算失败的情况下返回,等号运算符 ===== 不能被用来判断一个值是否是 NaN,必须使用 Number.isNaN()isNaN() 函数,在执行自比较之中:NaN,也只有NaN,比较之中不等于它自己

NaN
NaN

获取元素

getElementById() 方法,接受一个参数:获取元素的 ID,如果找到相应的元素则返回该元素的 HTMLDivElement 对象,如果不存在,则返回 NULL

代码语言:javascript
复制
document.getElementById('div1');    //获取 id 为div1 的元素

getElementsByTagName()方法,将返回一个对象数组这个数组保存着所有相同元素名的节点列表

代码语言:javascript
复制
document.getElementsByTagName('li'); //获取所有 li 元素,返回数组

document.getElementsByName() 方法,通过标签的名字来获取标签 (返回的是一个数组,将所用相同标签名的标签返回)

document.getElementsByClassName() 方法 (IE 不兼容)通过标签的 class 值来获取标签 (返回的是一个数组,将所有相同 class 名的标签返回)

querySelector() 方法,接受一个参数:通过元素的 css 选择器查找元素,只筛选单个,如果找到相应的元素则返回该元素的 HTMLDivElement 对象,如果不存在,则返回 NULL

代码语言:javascript
复制
document.querySelector('#div1');    //获取 id 为 div1 的元素
document.querySelector('.div1');     //获取 class 为 div1 的第一个元素

querySelectorAll() 方法,通过元素的 css 选择器查找元素,筛选全部,将返回一个对象数组这个数组保存着所有符合选择器的节点列表,

代码语言:javascript
复制
document.querySelectorAll('li');      //获取所有 li 元素,返回数组
document.querySelectorAll('.list');  //获取所有 class 为 list 的元素,返回数组

JavaScript 事件

onblur 元素失去焦点

onchange 用户改变域的内容

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onerror 当加载文档或图像时发生某个错误

onfocus 元素获得焦点

onkeydown 某个键盘的键被按下

onkeypress 某个键盘的键被按下或按住

onkeyup 某个键盘的键被松开

onload 某个页面或图像被完成加载

onmousedown 某个鼠标按键被按下

onmousemove 鼠标被移动

onmouseup 某个鼠标按键被松开

onmouseout 鼠标从某元素移开

onmouseover 鼠标被移到某元素之上

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.03.08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript 介绍
  • JavaScript 引入方式
  • JavaScript 输出
  • JavaScript 声明及命名规则
  • JavaScript 基本数据类型
  • JavaScript 复合数据类型
  • JavaScript 算术运算符
  • JavaScript 关系操作符
  • JavaScript 逻辑运算符
  • NaN
  • 获取元素
  • JavaScript 事件
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档