JavaScript基础教程

xiao_ming0425

已于 2023-05-24 18:30:32 修改

阅读量215

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2023-05-24 18:27:03 首次发布

本文链接：https://blog.csdn.net/weixin_47655145/article/details/130852594

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript是什么

javascript是一种运行再客户端(浏览器)中的编程语言。

javascript作用

实现人机交互，如：表单验证（后端验证：数据安全；前端验证：优化用户体验，减轻服务器压力）；实现网页动态效果；和后台进行数据交互；服务端开发。

javascript代码编写的位置

javascript编写位置分为：嵌入式、行内式、外链式

//嵌入式
<script>
//打印输出hello world
console.log("hello world")
</script>

//行内式
<input type="button" value="按钮" onclick="alert(hello world)" />

//外链式
<script src="index.js"></script>

//错误写法
<script src="index.js">
alert('hello world');//这段代码不会执行
                     //引入外部的js文件中,
                     //script段中定义的代码是不会执行的.
</script>

作者：xiao_ming
链接：https://juejin.cn/post/7236640191150243900
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

值得注意的是,无论代码定义在script段内,还是script引入的文件中,代码都是按照从上到下的顺序执行。一个语句用一个分号结尾。在编写引入css文件时，把css定义在网页头部，及时渲染。js脚本定义在网页body底部，防止页面阻塞。也不建议把script定义在body结束标签后,虽然效果一样,从HTML2.0起,body结束标签后插入其他元素是不符合标准的。

注释

注释就是对代码的解释和说明,其目的是让人们能够明白这段代码是什么意思,从而提高代码的可读性。（注释仅仅是给人看的，不会被计算机执行）

注释分为单行注释和多行注释

单行注释 //

//我是单行注释

多行注释 //**

/*我是多行注释*/

JavaScript的组成部分

ECMAScript和Web Apis(DOM和BOM)

DOM-文档对象模型

DOM(Document Object Model)：文档对象模型。

作用：操作页面节点元素。

//点击一个按钮,让文字颜色变粉色,背景变绿色
<head>
  <title>Document</title>
  <style>
  #box {
      width:100px;
      height:100px;
      color:pink;
      background-color:blue;
  }
  </style>
</head>

<body>
    <div id= "box">我是一段文本</div>
    <button id="btn">点击变色</button>
    <script>
        document.getElementById('btn')
        btn.onclick=function(){
          //让id=box元素的文字颜色变红色,背景变绿色
          //拿到box元素
          var box = document.getElementById('box')
          //文字颜色变红色
          box.style.color = 'red'
          //背景变绿色
          box.style.backgroundColor = 'green'
        }
    </script>
</body>

BOM-浏览器对象模型

BOM(Browser Object Model)：浏览器对象模型

作用：操作浏览器相关功能

//点击按钮让浏览器刷新
<head>
  <title>Document</title>
</head>

<body>
    <a href="https://baidu.com">百度</a>
    <a href="./index.html">DOM体验</a>
    <button id="btn">刷新</button>
    <button id="btn2">跳转</button>
    <script>
        //找到id=btn按钮
        var btn =document.getElementById('btn')
        //找到id=btn2按钮
        var btn2 = document.getElementById('btn2')
        
        //给元素绑定单击事件
        btn.onclick = function() {
        //刷新页面
            location.reload()
        }
        
        btn2.onclick = function () {
            //location.href = '新地址'
            location.href = 'https://baidu.com'
        }
    </script>
</body>

JavaScript变量

程序中的变量(variable):本质就是在内存中开辟了一个内存空间

作用：存储变化的数据

硬盘和内存的区别：

硬盘：持久性存储数据。
内存：临时性存储数据。

定义变量

定义变量：1.先声明、2后赋值

//使用var关键字声明一个变量,名字叫age
var age;
//把值13赋值给age
age = 13;
//打印变量age
console.log(age);

同时声明多个变量,变量名中间用逗号隔开

var age,name;
age = 10;
name = '小帅';

同时声明多个变量并赋值

var name = '小帅', age = 13;

变量的命名规范

变量名由字母、数字、下划线、$符号组成，且不能以数字开头。若不满足程序会报错。

不能是JS关键字或保留字，例如：var、if、for、while。因为这些关键字在js中是有特殊含义的。

//常见的关键字：
break、else、new、var、case、finally、return、void、catch、
for、switch、while、continue、function、this、with、default、
if、throw、delete、in、try、do、instranceof、type等。

变量名严格区分大小写。age和AGE是两个完全不同的变量。

变量名必须有意义，看见名字就知道代表存储什么数据。

命名方法：

小驼峰法。第一个单词首字母小写，后边单词的首字母需要大写。例如：userInfo...

下划线法。单词由下划线进行连接。例如：user_name...

数值类型

number数值类型

数值的范围

最小值：Number.MIN_VALUE,这个值为:5e-324
最大值: Number.MAX_VALUE，这个值为:1.7976931348623157e+308

由于内存的限制,JS并不能保存世界上所有的数值,若计算到数值超出JS可以表示的范围,那么会自动转为Infinity(无穷大),不可再进一步计算

正无穷大:Infinity
负无穷大:-Infinity


//如果分子是非0值,分母有符号0,或无符号0,则会返回Infinity或-Infinity
console.log(5/0);  //Infinity
console.log(5/-0);  //-Infinity

NaN

在JS中有一个特殊的值叫NaN(Not a Number),意思是不是一个数值,用于表示本来要返回一个数值,但操作失败了,就会返回NaN

console.log(0/0);    //NaN
console.log(-0/+0) //NaN

console.log('hello'*5)    //NaN

//NaN不等于包括NaN在内的任何值
console.log(NaN == NaN);  //false  es5弊端
console.log(object.is(NaN,NaN));   //true两个值都是NaN,es6已经修复了这个弊端

如何判断一个数值是否是NaN呢?

JS中提供了isNaN() 函数,可以判断任何数据类型是否 "不是数值"

console.log(isNaN(NaN));  //true
console.log(isNaN(10));  //false  10是数值
console.log(isNaN("10"));  //false  可以转成数值10
console.log(isNaN("blue"));  //true  纯字符串不可以转成数值

boolean布尔类型

var isBool = true;  //代表真
var isComplete = false;  //代表假
console.log(typeof isBool);  //  "Boolean"

计算机内部储存: true为1,false为0

console.log(true +1);  //2
console.log(false +1);  //1

注意区分大小写,true和TRUE不一样

string字符串类型

用单引号或双引号括起来的部分我们称之为字符串

var str1 = 'abc';
var str2 = "abc";
console.log(typeof str1);  "string"

在JS中单引号和双引号是没有区别的

转义符

所谓的转义字符就是可以实现特殊功能的字符

常见转义字符:

//  '    表示单引号'
//  ''    表示双引号''
//  \n    表示换行
//  \t    表示制表符(tab)
//  \    表示\

注意:

1.单引号里面可以嵌套双引号

2.双引号里面可以嵌套单引号

3.不能在单引里面嵌套单引,双引里面也不能嵌套双引,除非要用转义符转义才行

获取字符串长度

length属性用来获取字符串的长度

var str = '你好世界 Hello World';
console.log(str.length);  //16

字符串的拼接

字符串拼接使用加号+连接,技巧:挖坑法

var age = 29;
var username = '张三';
var info = '名字:'+username +',今年'+age +'岁';
var info2 = "名字:" + username +',年龄:' +age;
console.log(info2)

undefined未定义类型

undefined类型只有一个值,就是特殊值undefined

当使用var声明一个变量但没有初始化值时,其默认值就是undefined

//声明变量但没有初始化时,默认会赋予 undefined

注意:一般来说,永远不用显式地给某个变量设置undefined值,此字面值主要用于比较

//声明变量,显式地赋予 undefined,这种方式没有必要
var message = undefined;
console.log(message == undefined);   //true

返回undefined类型的两种情况

变量仅声明不赋值则值默认是undefined,此变量类型就是undefined类型
对一个未声明的变量进行typeof也会返回undefined

var message;  //仅声明不赋值,则值默认是undefined
console.log(message == undefined);  //true
//获取类型,typeof返回的数据类型是字符串形式
console.log(typeof message)  // 'undefined'
console.log(typeof message === 'undefined' )  //undefined

null类型

null类型同样只有一个值,即特殊值null

严格上讲null值表示一个空对象指针(引用),所以用typeof判断一个null时会返回"object"
引用(指针):指向对象所在内存空间中的某个地址

什么情况会用到null呢?
作为对象占位符;给对象赋予初始值var obj = null,明确此变量obj将来就是要保存一个对象的引用,更加具有语义化(有意义,有含义)

解除引用;便于释放内存。在JS中，如果一个对象没有引用，js会在合适的时候自动的去回收此对象所占用的内存空间，便于节省内存空间。

//作为对象占位符.明确此变量stu将来是要保存一个对象的引用,更加有语义化(有意义,有含义)
var stu = null;
stu = {name:'张三',age:18}
console.log(typeof stu);  'object'
stu = null  //解除引用,便于释放内存

为什么typeof null结果object？

console。log（typeof null）  // 'object'(因为历史遗留原因)

后续版本包括es6也没有修复这个bug,其实es6有提案被拒了;因为遗留代码太多了,改了容易得罪人,所以bug就成了feature(特征)了

小知识:
不同数据类型控制台打印的颜色是不一样的,
字符串的颜色是黑色的,数值类型是蓝色的,
布尔类型也是蓝色的,undefined和null是灰色的

数据类型转换

类型转换可以分为两种:隐式类型转换和显式类型转换

显式类型强制转换: 是指当开发人员通过编写适当的代码用于在类型之间进行转换,比如:Number(value)

隐式转换(自动转换): 当运算符在运算时,如果两边数据类型不统一,CPU就无法计算,JS引擎会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算,这种无需程序员手动转换,而由JS引擎自动转换的方式就称为隐式转换

在JS中只有3种类型的转换

显式转化为number类型:number()/parseFloat()/parseInt()
显式转化为String类型:String()/toString()
显式转化为Boolean类型:Boolean()

显式转换成数值类型

Number(变量)函数实现

特点:若转换的值包含非数字则直接得到一个NaN。

true会转换为数字1
false会转换为数字0

parseInt（变量名）：提取变量前面的整数，如果遇到非数字，则停止向后提取。

parseFloat（变量名）：提取变量前面的小数（浮点数），如果遇到非数字，则停止向后提取。

注意：parseInt和parseFloat，如果是对于非数字开头的，则得到NaN。

var num1 = '13.1c4'
// Number()特点:只要含有非数字,一律得到NaN(Not a Number)
// num1 = Number(num1)

//parseFloat():提取变量前面的小数(浮点数),如果遇到非数字,则停止向后提取
// num1 = parseFloat(num1)

//parseInt():提取变量前面的整数,如果遇到非数字,则停止向后提取
num1 = parseInt(num1)
console.log(num1)

+,-等运算的技巧

var x = '500';  //数值字符串
console.log(+x)  // 500    等价于Number(x),也可以写成x-0
console.log(x-0);  //500
console.log(-x);  //-500

//价格案例
var price1 = '199.89￥'
var price2 ='200￥'
var totalPrice = parseFloat(price1) + 
parseFloat(price2)
totalPrice = totalPrice + '￥'
console.log('总价:',totalPrice)

显式转换成布尔类型

先认识下真值和假值:

假值(falsy):JS中假值有6个。false、undefined、null、0、NaN、

''(空字符)。假值转换成布尔类型都是false

真值（truthy）：除了以上6个假值，其他任意数据都是真值。真值转换成布尔类型都是true

方式1：Boolean（变量） ：此函数可以实现将其它的类型转换为布尔类型

var v1 = 1；  //true 
var v1 = 0;  //false 
var v1 = null;  //false 
var v1 = '';  //false 
var v1 = NaN;  //false 
var v1 = false;  //false 
var v1 = undefined;  //false
console.log(Boolean(v1));

方式2:双感叹号技巧。

！！变量名转化为 boolean类型

一个感叹号！是取反得到布尔类型的值，双！！就是取反两次。

var x = 100；
console。log（!!x）;  //true   等价于boolean(x)

var y = 0;
console.log(!y);  //true
console.log(!!y);  //false

显式转换成字符串类型

 //toString(变量名)函数
var num = 5;
console.log(num.toString());

  //String()函数
String(变量名)

注意:undefined和null是没有toString方法(函数),可以通过String();

小技巧:
可以通过+上一个空字符
var num = 6;
num = num + '';

隐式转换

隐式转换: 当运算符在运算时，如果两边数据类型不统一，CPU就无法计算, JS引擎会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算,这种无需程序员手动转换，而由JS引擎自动转换的方式就称为隐式转换。
隐式转换规则：

+加法操作若有一边是字符串类型，则两边优先转字串类型，就变成了字符串拼接操作

其他乘除减都两边统一转数值类型。

// 加法操作若有一边是字符串类型，则两边优先转字串类型，就变成 了字符串拼接操作
console.log(10+20);     // 30
console.log("10"+20);   // 1020  等价于 "10"+String(20)
console.log("10"+true); // 10true  等价于 "10"+String(true)
console.log("10"+null); // 10null  等价于 "10"+String(null)
console.log(18 + ""); // '18' 等价于 String(18) + ""

// 若是做 减  称 除时， 则都统一两边转成数值类型Number再进行计算
console.log(10 + 20); // 30
console.log(true+20);  // 21  等价于 Number(true)+20 = 1 + 20
console.log(null+20);  // 20  等价于 Number(null)+20 = 0 + 20 
console.log(undefined+20);  // NaN  等价于 Number(undefined)+20 = NaN + 20 = NaN
console.log(null+true);  // 1  等价于 Number(null)+Number(true) = 0 + 1

console.log("10b"*20);   // NaN   Number("10b") * 20 = NaN * 20
console.log("10"-true);  // 9 Number("10") - Number(true) = 10 - 1
console.log("20"/"4");   // 5 Number("20") / Number("4") = 20 / 4


console.log(Number(true)) // 1
console.log(Number(false)) // 0

console.log(Number(undefined)) // NaN
console.log(Number(null)) // 0

console.log(4 + null) // 4
console.log(4 + undefined) // NaN

true或false和数值型进行运算时，会把true转换成1，false转成0

xiao_ming0425

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础教程

当运算符在运算时，如果两边数据类型不统一，CPU就无法计算, JS引擎会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算,这种无需程序员手动转换，而由JS引擎自动转换的方式就称为隐式转换。当运算符在运算时,如果两边数据类型不统一,CPU就无法计算,JS引擎会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算,这种无需程序员手动转换,而由JS引擎自动转换的方式就称为隐式转换。注释就是对代码的解释和说明,其目的是让人们能够明白这段代码是什么意思,从而提高代码的可读性。
复制链接

扫一扫