JavaScript 基础

Unsplash

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

HTML CSS JavaScript

1. JavaScript 介绍

HTML 是一种标记语言,用来结构化我们的网页内容和赋予内容含义,例如定义段落、标题,或是在页面中嵌入图片和视频 CSS 是一种样式规则语言,我们将样式应用于我们的 HTML 内容, 例如设置背景颜色和字体,对页面的内容进行布局 JavaScript 是一种编程语言,允许你创建动态更新的内容,控制多媒体,图像动画等等

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

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

2. JavaScript 引入方式

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

<body>
  <!-- 内容在这 -->
  <script type="text/javascript" src="js/index.js"></script>
</body>

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

windows.onload = function () {
    //加载完毕之后执行
}

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

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="js/index.js"></script>
</head>

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

var num = 13;//单行注释

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

3. JavaScript 输出

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

alert

console.log

document.write

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

confirm_1

confirm_2

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

prompt_1

prompt_2

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

4. JavaScript 声明及命名规则

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

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

命名规则,[变量名、属性名、函数名、方法名] 的命名规则: a. 由数字,字母,下划线 _,美元符 $ 构成,第一个字符不能为数字; b. 区分大小写; c. 驼峰命名法 (helloWorld); d. 中间不能出现空格; e. 不能使用系统关键字、保留字;

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

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

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

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

5. JavaScript 基本数据类型

数字类型 Number

var num = 10;

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

var str = "10";

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

var bol_1 = true,bol_2 = false; 

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

var a; 

空类型 Null

var b = null;

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

数据类型

var myName = "Nian糕"; //不要使用name作为变量名
var age = 22;
var ifSingle = true;

alert(myName,age,ifSingle); 
console.log(myName,age,ifSingle); 

运行结果 1

运行结果 2

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

6. JavaScript 复合数据类型

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

运行结果

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

var o = {};
var btnList = document.getElementsByTagName("button");
var btnList = document["getElementsByTagName"]("button");
//对象的声明赋值
var person = {
    name: "Nian糕",
    age: 22,
    city:"广州"
};
console.log(person.city)
console.log(person["age"])

运行结果

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);

运行结果

打印所有人的分数

for (var i = 0; i < classOne.length; i++) {
  console.log(classOne[i].name + "的分数为" + classOne[i].score);
};

运行结果

使用 for 循环求班级平均分

var totalScore = 0;
for (var i = 0; i < classOne.length; i++) {
  totalScore = totalScore + classOne[i].score;
};
var avgScore = totalScore / classOne.length;
console.log("本班级的平均分是:" + avgScore);

运行结果

查找班级里的男同学个数

var count = 0;
for (var j = 0; j < classOne.length; j++) {
  if (classOne[j].gender === "male") {
    count++;
  }
}
console.log("班级的男同学个数为" + count);

运行结果

查找班级分数最高的同学

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);

7. JavaScript 算术运算符

r = a + b; 
r = a - b;
r = a * b;
r = a / b;
r = a % b; //求模,取余
r = 'a' + 'b'; //字符串拼接

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

运行结果 1

运行结果 2

运行结果 3

运行结果 4

复合运算符

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

8. 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

(a>b)?(c=4):(c=3)
假设 a = 5, b = 3
5 > 3为真, 则执行c = 4

9. 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 当中,小括号 () 的作用是提升优先级;中括号 [] 指的是数组;大括号 {} 指的是对象

10. NaN

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

NaN

11. 获取元素

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

document.getElementById('div1');    //获取 id 为div1 的元素

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

document.getElementsByTagName('li'); //获取所有 li 元素,返回数组

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

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

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

document.querySelector('#div1');    //获取 id 为 div1 的元素
document.querySelector('.div1');     //获取 class 为 div1 的第一个元素

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

document.querySelectorAll('li');      //获取所有 li 元素,返回数组
document.querySelectorAll('.list');  //获取所有 class 为 list 的元素,返回数组

12. JavaScript 事件

onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseup 某个鼠标按键被松开 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫实战

Python数据类型之字符串

字符串就是一系列的字符。Python中,用配对的引号括起来的都是字符串,其中引号可以是单引号也可以是双引号:

9120
来自专栏禹都一只猫博客

GO 语言简介 — 语法

下面的文章主要是以代码和注释为主。只需要你对C语言,Unix,Python有一点基础,我相信你会在30分钟左右读完并对Go语言有一些初步了解的。

10610
来自专栏landv

Golang 新手可能会踩的 50 个坑【转】

译文:https://github.com/wuYin/blog/blob/master/50-shades-of-golang-traps-gotchas-m...

39020
来自专栏偏前端工程师的驿站

JS魔法堂:那些困扰你的DOM集合类型

一、前言                                     大家先看看下面的js,猜猜结果会怎样吧!   可选答案:   ①. 获取id属...

24690
来自专栏我的小碗汤

go语言正则表达式

我们前两节课爬取珍爱网的时候,用到了很多正则表达式去匹配城市列表、城市、用户信息,其实除了正则表达式去匹配,还可以利用goquery和xpath第三方库匹配有用...

13940
来自专栏大前端_Web

SASS相关

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

19910
来自专栏IMWeb前端团队

20个例子入门Q.js

本文希望通过20个简单的例子让没用过Q.js的同学快速掌握其基本用法 1. 新建实例 html代码: <div id="demo" q-text="msg"><...

32170
来自专栏LEo的网络日志

go语言接口学习

37350
来自专栏峰会SaaS大佬云集

C#学习---基础入门(四)C#中的字符与字符串

字符 char(单个字符) 用单引号 ,例如char a=‘a’;可以通过调用char类下的方法进行一些操作,具体通过help查看其相关方法

12940
来自专栏Golang语言社区

Golang语言--一些基础用法

range类似迭代器操作,返回 (索引, 值) 或 (键, 值)。其可以使用的对象包括string,array/slice,map,channel。其中stri...

34970

扫码关注云+社区

领取腾讯云代金券