js基础（从零开始）

已于 2024-04-07 08:43:31 修改
阅读量930 收藏 11
点赞数 24
文章标签： javascript 开发语言 ecmascript
于 2024-03-25 08:39:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/singsingqin/article/details/136982955
版权

1.初识js

1.1javaScript的特点：

JavaScript具有简单易用，可以跨平台，支持面向对象的特点·。

JavaScript是弱语言数据类型，只有我们赋值了才知道是什么数据类型。

在网页中，许多常见的交互效果都可以用JavaScript来实现，例如轮播图，选项卡，地图，表单验证等。

  • 轮播图：通过JavaScript实现每隔一段时间自动切换图片的效果。
  • 选项卡：通过JavaScript实现选项卡的切换效果。
  • 地图：通过JavaScript实现地图的放大，缩小，滚动等效果。
  • 表单验证：用户填写表单时，通过JavaScript检查用户填写的格式是否正确，如果格式有误，则提示用户更正。

1.2JavaScript初体验：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    alert('hello, javascript')
  </script>
</body>

</html>

1.3JavaScript书写位置：


1.3.1、内部引入


定义script标签，标签体内容就是js代码

<script>
  //js代码
 
</script>


<script>标签可以写在任意位置，推荐写在<body>的尾部。浏览器在执行时，是从下往下依次执行！  

1.3.2、外部引入

<script src="js/文件名.js"></script>


1、script标签不能自闭合。

2、如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码。

总结（1）：

<body>
  <!-- 行内式-->
  <button onclick="window.alert('开学季')">请点我</button>

  <!-- 嵌入式 -->
  <script>window.alert('内联样式')</script>

  <!-- 外链式 -->
  <script src="./04-引入.js"></script>

  async:异步加载
  defer:延后执行
  添加async或者defer属性后,即使文件下载失败,也不会阻塞后面的JavaScript文件
  
</body>

2.JavaScript基本语法

2.1JS输出数据的三种方式


2.1.1、浏览器弹窗

<script>
    alert('浏览器弹框输出字符');
</script>

2.1.2、输出HTML页面

<script>
    document.write('输出html内容到页面');
</script>

2.1.3、控制台输出

<script>
    console.log('控制台输出')；
</script>
<script>
    //输出语句

    // 用于在浏览器中弹出警告窗
    alert("Hello, world!")

    // 控制台输出语句
    console.log("未满18岁不得进入");

    // 输出语句
    document.write("<h1>Hello, world!</h1>")

    // 弹出输入框，并等待用户输入，用户输入的内容会以字符串的形式返回到输入框中
    prompt("请输入你的名字：", "默认值")


  </script>

2.2js输入语句及确认语句

// 弹出输入框，并等待用户输入，用户输入的内容会以字符串的形式返回到输入框中
    prompt("请输入你的名字：", "默认值")
  confirm("请确认你的数据是否满足条件")
 // 弹出确认框，用户点击确认返回true，点击取消返回false

2.2.2输入输出练习小案例---总结（2）：

 <script>
    // 笔记
    // 【输出语句】
    // alert() 弹出警告框
    // console.log() 控制台输出
    // document.write() 直接将内容写入页面的内容流
    // 【输入语句】 
    // prompt() 弹出输入框，需要用户输入，返回用户输入的值
    // confirm() 弹出确认框，用户点击确认返回true，点击取消返回false


    prompt("请输入你的年龄")
    confirm("你是否满24岁了吗？")
    alert("未满24岁禁止使用本网站")
    document.write("404错误")
    console.log("Not Found")

  </script>

2.3变量的声明与赋值：

 <script>
    // 先声明后赋值

    // 声明变量
    var boy ;
    var girl;
    // 后赋值
    boy=1;
    girl=2;
    console.log(boy);
    console.log(girl);

    // 同时声明且赋值
    var myAge = 18;
    var myName = anger;

  </script>

2.4const let var 区别

(1)初始化要求不同，

    使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。

(2)重复声明不同，

    使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，而使用const声明的变量,在整个运行过程中不能修改初值.

(3)对块级作用域的支持不同。

    (使用一对花括号括起来的代码称为一个代码块所谓块级作用域，

    就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。

    使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。)

const声明常量，let与var声明变量

<script>
    // let和var声明的变量都可以改变
    // const声明的变量不能改变，即常量
    // const也不能进行先声明再赋值
    // let不允许在一个代码块里有变量和他取一样的名字，但是允许修改一个变量值。
    // 一个花括号{}就是一个代码块


    // 错误写法：
    // const a =6;
    // a = 7;
    // console.log(a)

    // 正确写法：
    const a = 3.14;
    console.log(a);
    // const不能进行反复的声明
    // 我们无法改变3.14这个值


    
    let girlfriend = "张元英"
    girlfriend = "林允儿"
    console.log(girlfriend)
    { let girlfriend = xxx }
    
  </script>

2.5基本数据类型

2.6隐式转换

2.6.1、什么是隐式转换


所谓隐式转换，就是我们在写代码时看不见，但是JavaScript解释器会自动帮我们转换的操作

隐式转换的本质是通过ToPrimitive将值转化为原始值，主要涉及到三种转换：

1.将值转为原始值 ToPrimitive（）

2.将值转为数字 ToNumber（）

3.将值转为字符串 ToString（）

2.6.2、基本类型的隐式转换


1.    +号

①数字+字符串     =>字符串
console.log(1+2+'3'); //'33'
 
//拓展其他数据类型
console.log(true + '6'); //'true6'
console.log(false + '6'); //'false6'
console.log(null + '6'); //'null6'
console.log(undefined + '6'); //'undefind6'

②数字加数字     =>数字
console.log(1+2+3); //6
 
//拓展其他数据类型
console.log(true + 6); //7
console.log(false + 6); //6
console.log(null + 6); //6
console.log(undefined + 6); //NaN

2.     -号

（*、/、<、>）与-号同样方式转化


①数字-字符串     =>数字
console.log(10 - '20');//-10
console.log(10*'20');  //200
console.log('20'/'10');  //2

②数字-非数字字符串     =>NaN
console.log(10 - 'one' );  //NaN
console.log(10 - '100a');  //NaN
console.log('20'/'one'); //NaN

3.    有关==的隐式转换


双等符号的隐式转换很简单，只要记住，不管是什么基本类型的数据，都会转化成数字类型比较，话不多说，看代码

onsole.log('0' == 0);  //true   字符串转数字
console.log(0 == false);  //true   布尔转数字
console.log('0' == false);  //true   两者转数字
 
// undefined和null比较特殊
console.log(undefined == null);  //true

4.   引用类型的隐式转换


引用类型的隐式转换有些复杂，但是大致思路就是先将引用类型转化为基本类型，然后再按照基本类型的方式转化，那么，我们该怎么让引用类型转化为基本类型呢？

其实，在JavaScript中，引用数据类型的隐式转化遵循PreferredType转换策略，分为以下两种情况：

1.如果PreferredType被标记为Number

①如果输入的值已经是一个原始值，则直接返回它

②如果输入的值是一个对象，则调用该对象的valueOf()方法， 如果valueOf()方法的返回值是一个原始值，则返回这个原始值

③调用这个对象的toString()方法，如果toString()方法返回的是一个原始值，则返回这个原始值。

④否则，抛出TypeError异常

2.如果PreferredType被标记为String

①如果输入的值已经是一个原始值，则直接返回它

②如果输入的值是一个对象，则调用该对象的toString()方法， 如果toString()方法的返回值是一个原始值，则返回这个原始值

③调用这个对象的valueOf()方法，如果valueOf()方法返回的是一个原始值，则返回这个原始值。

④否则，抛出TypeError异常

注意：PreferredType的值的设置规则

1、该对象为Date类型，则PreferredType被设置为String

2、否则，PreferredType被设置为Number

来看几个特殊的例子：

// 引用数据类型的隐式转换
console.log([] + []);  结果为 "" + "" = ""
// 1.确定 [] PreferredType 为 number
// 2.确定 [] 不是原始值
// 3.调用 valueOf 方法
console.log([].valueOf(),typeof [].valueOf());
// 4.调用 toString 方法
console.log([].valueOf().toString(),typeof [].valueOf().toString());
// 5.最终 [] 隐式转换 => '' 空的字符串
 
 
 
 
 
console.log([] + {});   结果为 "" + "[object Object]" = "[object Object]"
// 1.确定 {} PreferredType 为 number
// 2.确定 {} 不是原始值
// 3.调用 valueOf 方法
console.log({}.valueOf(),typeof {}.valueOf());
// 4.调用 toString 方法
console.log({}.valueOf().toString(),typeof {}.valueOf().toString());
// 5.最终 {} 隐式转换 => "[object Object]"
 
 
 
 
 
 
{} + [] 隐式转换结果为0
// {} + []  => {}; +[]
// js会将{};看成代码块略过，所以就只剩  +[]
// +[]  =>  +""  => +false  => +0  => 0
 
// 但是{} + []在终端的打印结果是[object Object] 是string类型
// 在浏览器控制台又输出 0 
console.log({} + [],typeof ({} + []));
 
 
 
 
 
// {} + {} 隐式转换结果为"[object Object][object Object]"
console.log({} + {});

总结：我本人认为JavaScript的基本类型的隐式转换在日常实际练习或者项目开发中比较有用，而引用类型的隐式转换在日常的代码中几乎不会遇见，除非一些特殊的项目开发过程中会使用到，所以，我建议大家在学习JavaScript隐式转换的时候，将重点放在基本类型上，引用类型的隐式转换只需记忆PreferredType转换策略和几个特殊案例即可
 

2.7强制类型转换

强制类型转换
强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean。

2.7.1、转换为String类型
将其它数值转换为字符串有三种方式：toString()、String()、 拼串。

方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);


方式二：调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

var b = undefined;
b = String(b);
console.log(b);
console.log(typeof b);

var c = null;
c = String(c);
console.log(c);
console.log(typeof c);


方式三：为任意的数据类型 +""

var a = 123;
a = a + "";
console.log(a);
console.log(typeof a);


2.4.2、转换为Number类型
有三个函数可以把非数值转换为数值：Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。

方式一：使用Number()函数

字符串 --> 数字
如果是纯数字的字符串，则直接将其转换为数字
如果字符串中有非数字的内容，则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
布尔 --> 数字
true 转成 1
false 转成 0
null --> 数字
null 转成 0
undefined --> 数字
undefined 转成 NaN
方式二：这种方式专门用来对付字符串，parseInt() 把一个字符串转换为一个整数

var a = "123";
a = parseInt(a);
console.log(a);
console.log(typeof a);


方式三：这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数

var a = "123.456";
a = parseFloat(a);
console.log(a);
console.log(typeof a);var a = "123.456";
a = parseFloat(a);
console.log(a);
console.log(typeof a);


注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作

2.4.3、转换为Boolean类型
将其它的数据类型转换为Boolean，只能使用Boolean()函数。

使用Boolean()函数
数字 —> 布尔
除了0和NaN，其余的都是true
字符串 —> 布尔
除了空串，其余的都是true
null和undefined都会转换为false
对象也会转换为true
2.5、运算符
运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果。

比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回（number string boolean undefined object）
 

2.8流程控制语句

if  else语句

 <script>
    let grades =prompt("请输入你的成绩")
    if(grades>=100){
      alert("拿奖学金")
    }else if(grades>=80 && grades<=90){
      alert("成绩优秀")
    }else if(grades>=60 && grades<80){
      alert("成绩合格")
    }else if(grades>=40 && grades<60){
      alert("有补考机会")
    }else if(grades>=20 && grades<40){
      alert("挂科")
    }else{
      alert("没别的了")
    }
  </script>

singsingqin
关注
  • 24
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
从零开始的JS之旅（二）
qq_42308626的博客
10-19 360
文章目录前言一、数据类型1.1 为什么需要数据类型1.2 变量的数据类型1.3 数据类型分类1.3.1 数字型的三个特殊值1.3.2 字符串型1.3.3 布尔型1.3.4Undefined和Null1.4 获取变量数据类型1.4.1 获取检测变量的数据类型1.5 数据类型转换1.5.1 什么是数据类型转换1.5.2 转换为字符串1.5.3 转换为数字型（重点）1.5.4 做两个小例子二、使用步骤1.引入库2.读入数据总结 前言 今天来写一下关于数据类型的一些知识 一、数据类型 1.1 为什么需要数据类
从零开始学JavaScript——基础篇
绝圣弃智-零的博客
12-12 1144
整理自菜鸟教程   JavaScript 简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面...
js基础
weixin_30929195的博客
07-24 95
--引入 JS特点 　　轻量级脚本语言 　　区分大小写 　　语句使用分号';'分隔,但使用分号并不是必须的，也可以不用。 　　数字，字符串类似于Python，布尔值为true、false，数组==Python中的list 　　===为绝对相等，即类型、数值相等。而==则表示数值相等。‘3’==3 是对的 　　使用函数，以花括号{}分隔，函数可以有多个参数，可以有返回值 　　变量可以...
Js 基础
单飞吧的博客
09-07 316
Js的全局作用域就是window Function 内存中保存一段代码的函数 代码重用 调用函数 函数名(实参值) 第一种 以声明的方式创建函数 function 函数名(形参列表){ 函数体 return 返回值 } 有一个问题：会被声明提前 第二种 以赋值的方式创建函数  var arr= function (形参列表){ 函数体 return 返回值 } 第三种 用new创建函数 几乎不用 var fun=new Function函
Js基础
Whystarta_z的博客
11-05 314
JS基础 注释与语句 1、注释 • 单行注释：// • 多行注释：/**/ 2、 语句 一段脚本就是一系列计算机能够一步一步执行的指令。每一条单独的指令或步骤就被称为一条语句。语句以分号（;）结尾，多个语句可以写在一行内。 var a = 10; // 这是一条赋值语句 var b = 10; var c = a + b; // 多条语句可以写在一行内； 提示：分号在...
从零开始学JavaScript
05-30
1. JavaScript基础语法：包括变量声明、数据类型、运算符、控制结构（if...else语句，switch语句，循环语句等）、函数的定义与使用等。 2. DOM操作：文档对象模型（Document Object Model）是JavaScript操作网页...
Learnin_-Basic_-of_Node.js:从零开始的 Node.js 基础
06-19
本教程将引导你从零开始学习 Node.js 的基础知识。 一、安装 Node.js 在开始学习之前，你需要在你的计算机上安装 Node.js。访问官网 nodejs.org，根据你的操作系统下载相应的安装包，并按照指示进行安装。安装完成...
javascript从零开始学
03-27
标题“javascript从零开始学”和描述“javaScript在网站的网页制作中依然扮演着不可替代的作用”表明本文将从基础的角度，介绍JavaScript这门编程语言，并强调它在网页开发中的重要地位。JavaScript是一种解释型的...
Javascript_101:如何从零开始学习JS
04-08
本教程“Javascript_101”旨在帮助初学者从零开始掌握JavaScript的基础知识。 一、基础概念 1. 变量：在JavaScript中，变量用于存储数据，通过`var`, `let` 或 `const` 关键字声明。例如：`let age = 25;` 2. 数据...
javaScript从零开始学源代码
03-27
从零开始学习JavaScript源代码，意味着我们将深入理解其语法、结构和核心概念，这对于任何想要在Web开发领域有所建树的人来说都是至关重要的。下面，我们就来详细探讨JavaScript的基础知识和重要特性。 1. **基础...
向一个数组中插入元素
weixin_33713707的博客
03-15 304
向一个数组中插入元素 向一个数组中插入元素是平时很常见的一件事情。你可以使用push在数组尾部插入元素,可以用unshift在数组头部插入元素,也可以用splice在数组中间插入元素。 但是这些已知的方法，并不意味着没有更加高效的方法。让我们接着往下看…… 向数组结尾添加元素 向数组结尾添加元素用push()很简单，但下面有一个更高效的方法 var arr = [1,2,3,4,5]...
python12 中，No module named‘distutils‘错误
最新发布
qq_43557600的博客
08-27 1104
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
入门PHP：从零开始的PHP基础教程
"这篇教程是针对零基础学习者设计的PHP入门教程，旨在帮助初学者从零开始掌握PHP基础知识。教程介绍了PHP作为一种服务器端、嵌入HTML的脚本语言，其语法与C语言类似，特别适合创建动态网页。文中通过一个简单的PHP...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值