JavaScript基础

前言

pink老师的JavaScript基础教程

初识javascript

JavaScript 组成:

ECMAScript、DOM、BOM
ECMAScript 是由CMA国际进行标准化的一门编程语言,这种语言在万维网上应用广泛。

DOM----文档对象模型
是W3C组织推荐的处理可扩展标记语言格标准汇编语言。
通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色)。

BOM----浏览器对象模型
BOM是指浏览器对象模型,它提供了独立于内容的,可以于浏览器进行交互的对象结构,通过BO可以操作浏览器窗口,比如弹窗、控制浏览器跳转,获取分辨率。

JS引入方法

  1. 行内式 JS <br .>
  2. 内嵌式
<script>
    alert'Holle Word!')
</script>
  1. 外部式
<script src="mt.js"> </script>

JS 注释

单行注释: ctrl + /

//单行注释

多行注释: shift + alt + a

/* 多行注释
多行注释 */

JS 输入输出语句

输入语句:

<script> 
    prompt('请输入:')
</script>

弹出警示框:输出展示给用户

<script>
    alert('这是一个提示!')
</script>

控制台输出:程序员测试

<script>
    console.log('程序员可以看到')
</script>

变量

变啦的概述

白话:变量就是一个装东西的盒子。
通俗:变量用于存储数据的容器,我们通过变量名获取数据,甚至数据可以修改。

  1. 变量在内存中的存储
    本质、变量是程序在内存中申请的一块用来存放数据的空间。

变量的使用

变量在使用时分为两步: 1.声明变量 2.赋值

  1. 声明变量
// 声明一个名称为age的变量
var: age; 

2.赋值

// 给age赋值为 10
age = 10;
  1. 变量的初始化
    声明一个变量并赋值,我们称之为变量的初始化。
// 声明变量同时赋值为10
var age = 10 

变量的语法扩展

1.更新变量
一个变量被重新赋值后,它原始的值就会被覆盖,变量值将以最后一次附的值为准。

var myname = '卡卡西';
var myname = '鸣人';
console.log(myname);
  1. 声明多个变量
var age = 18,
    address = '地址',
    gz = 2000;
  1. 声明变量的特殊情况
    (1) 只声明不赋值
var age;
console.log(age); //undefined
// 系统也不知道输出的是什么,所示显示undefined 未定义的意思。

(2) 不声明变量不赋值 然后输出 ,会报错
(3) 不声明直接赋值使用

qq = 110;
console.log(qq);  //输出结果:110

变量命名规范

数据类型

数据类型简介

不同数据占用的存储空间不同,把数据分成不同类型。

简单的数据类型

1. 变量的数据类型
javascript 是一种弱类型或者说是动态语言,这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动的确定,变量的数据类型是可以变化的。

var num = 10; //num属于数字类型

2. 数据类型的分类
js 把数据类型分为两类: (Number,String,Boolean,Undefined,Null)
简单数据类列,复杂数据类型:(object)

3. 简单的数据类型
(1) 数字型 Number

var age = 21; // 整数
var age = 21.333; // 小数(浮点数)

数字型 进制转换

// 八进制 0 ~ 7 我们程序里面数字前面加 0 表示八进制
var num = 101;
console.log(num); // 010 八进制 转换为 10进制为 8
// 十六进制 0 ~ 9 a ~ f  如果数字的前面加 0x 那么表示十六进制
var num1 = 0x9
console.log(num1); //0x9 十六进制 转换为 十进制为 9

数字型的最大值和最小值

// 数字型的最大值
console.log(Number.MAX_VALUE); 
// 数字型的最小值
console.log(Number.MIN_VALUE)

数字型三个特殊值

无穷大:

console.log(Number.MAX_VALUE * 2) ;// 输出Infinity 无穷大
console.log(-Number.MAX_VALUE * 2); // 输出-Infinity 无穷小

非数字:

console.log('字符' - 10); // 输出 NaN 不是一个数字

isNaN()
这方法用来判断是不是非数字,并且返回一个值,如果是数字返回false,如果不是数字返回true。

console.log(isNaN(12)); //false
console.log(isNaN('字符'))  //true

(2)字符串型 String
字符串型 可以是引号中的任何文本,其语法为双引号和单引号。
因为HTML里面用双引号,javascript里推荐使用单引号。

字符串引号嵌套
js可以用单引号嵌套双引号,或者床引号嵌套单引号(外双内丹,外单内双)

var SteNsg = '你好“中国”哦'; //外双内单
var SteNsg = "你好'中国'哦"; //外单内双

字符串转义符
字符串转义符 都是用 \ 开头,但是转义符要写在单引号或者双引号里面。

console.log('你好\n世界');
\n  换行符 
\\  斜杠\
\'  ' 单引号
\"  " 双引号
\t  tab 缩进
\b   空格

字符串长度
字符车是由若干字符组成的,这些字符的数量就是字符串的长度,通过字符串的 length 属性可以获取整个字符串的长度。

var str = 'my name is andy';
console.log(str.length); // 15

字符串的拼接
多个字符串之间可以使用 + 进行拼接,可以生成新的字符串

 console.log('你好'+ ',' + '世界' +'!');//你好,世界!
 console.log('你好'+ ',' + '世界' +'!' + 18); //你好,世界!18
 console.log('你好'+ ',' + '世界' +'!' + true); //你好,世界!true
 console.log(12 + 12) // 24
 console.log('12' + 12) //1212
 // 只要由字符串和其他类型的拼接,最后得到的都是字符串类型。

字符串拼接加强

var age = 18;
console.log('我今年'+ age + '岁'); // 我今年18岁
// 变量和字符串相连的口诀:  引引加加
console.log('我今年'+age+'岁'); 

案例:

var age = prompt('请输入你的年龄:');
alert('你的年龄是:' + age + '岁')
console.log('你的年龄是:' + age + '岁')

(3) 布尔型 Boolean
布尔型有两个值:true 和 false

var flag = true; 
var flag1 = false;
console.log(flag + 1); //true 参与加法运算当1来看 2
console.log(flag1 + 1); //true 参与加法运算当1来看 1

(4) Underfined 和Null
一个声明后没有被赋值,会有一个默认值 undefined

var str;
console.log(str); // underfined
var veriable = undefined;
console.log(undefined + '你好'); // undefined你好
console.log(undefined + 1); // NaN endefined 和数字相加结果是 NaN
//null
var space = null;
console.log(space + '你好'); //null你好
console.log(space + 1); // 1

获取变量数据类型

1. tpeof 可以获取检测变量的数据类型

var num = 16;
console.log(typeof num); //number
var str = '你好世界';
console.log(typeof str);  //string
var flag = true;
console.log(typeof flag); //boolean
var vari = undefined;
console.log(typeof vari); //undefined
var timer = null;
console.log(typeof timer); //objact

2. 字面量
字面量是在源代码有一个固定值的表示方法,通俗的说,就是字面量表示如歌表达这个值。
数字字面量: 1 2 3
字符串字面量: '你好世界'
布尔型:true false

数据类型的转换

我们通常会实现的三种方式的转换:
(1)转换为字符串
(2)转换为数字类型
(3)转换为布尔型

1. 转换为字符串

// 把数字型转换为字符串 变量.toString
var num = 10;
var str = num.toString();
//把数字强制转换字符串 String(变量)
var num1 = 10;
var str1 = num.String();
console.log(typeof String(num));
//利用拼接字符串的方法实现转换字符串 隐式转换
var num2 = num + '';
console.log(typeof num2);
po

2. 转换为数字类型

//  parseInt(变量) 可以把字符转换为数字型 但是是整数,不会进位
var age = prompt('请输入你的年龄:');
console.log(typeof parseInt(age));
console.log(parseInt('120px')); // 120 会去掉px这个单位 
// parseFloat  可以把字符转换为数字型 可以得到的是小数(浮点数)
console.log(parseFloat(3.14)); // 3.14
console.log(parseFloat('120px')); // 120 会去掉px这个单位 
// Number(变量) 强制转换为数字型 
var str = '123';
console.log(Number(str)); // 123
// 利用了素数愠色 - * /  隐式转换
console.log('12' - 0); // 12
console.log('123' - 120); // 3
console.log(typeof ('123' - 120));// number

案例:年龄

var age = prompt('请输入出生年份:');
alert('你今年的年龄是:' + (2021 - age) + '岁');

案例: 两个数字相加

var num1 = prompt('输入第一个数字:');
var num2 = prompt('输入第二个数字:');
var num3 = parseFloat(num1) + parseFloat(num2);
alert('最后相加的结果是:'+ num3);

3. 转换为布尔型
代表空、否定的值 会被转换为false,如'',0,NaN,null,UNDERFINED
其余的值都会转换为 true

console.log(Boolean(数值));

解释型语言和编译型语言

计算机不能直接理解任何机器语言以外的语言,所以必须要把程序员所写的程序语言翻译成计算机语言才能执行程序,程序语言翻译成机器语言的工具,被称为翻译器。
翻译器翻译的方式有两种:一个是编译,一个是解释,两种方式之间的区别在于翻译的时间点不同。
编译器是在代码执行之前进行编译,生成中间代码文件。
解释器是在运行时间进行及时解释,并立即执行(当前编译器以解释的方式运行的时候,称为解释器)
1. 执行过程
类似于请客吃饭:
编译语言:首先把所有的菜做好,才能上桌吃饭。
解释语言:比如吃火锅,边吃边涮,同时进行。

标识符、关键字、保留字

标识符

标识(zhi)符,就是指开发人员为变量、属性、函数、参数取得数字。
标识符不能是关键字或者保留字。

关键字

关键字:是指js本身已经使用了的字,不能在用它们当做变量名、方法名。

保留字

保留字:实际上就是预留的“关键字”,意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能视同它们当变量名或者方法名。

案例:输入信息并打印出来

var myname = prompt('输入你的名字:');
var age = prompt('输入你的年龄:');
var xingbie = prompt('输入你的性别:');
alert('你的姓名:' + myname + '\n' + '你的年龄:' + age + '\n' + '你的性别:' + xingbie )

JavaScript 运算符

JavaScript基础
本文作者
阿贤
发布于
April 22. 2021
许可协议
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!
Web代码规范
Comment

评论如无特殊原因均不会被删除,提交前请三思。
你应该懂得如何发表适当的观点,请对自己的言论负责。