JavaScript

最新推荐文章于 2021-12-23 23:58:02 发布
最新推荐文章于 2021-12-23 23:58:02 发布
阅读量177 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55509293/article/details/114239050
版权
这篇博客主要介绍了JavaScript的学习，从ECMAScript的基本语法结构到BOM和DOM的概念，接着详细讲解了JavaScript的基本数据类型，包括number、string、Boolean、undefined和null，并提到了NaN。此外，还讨论了变量命名规范、typeof关键字的用法以及各种运算符。最后，文章触及了条件语句如if...else和switch...case的使用。
摘要由CSDN通过智能技术生成

JS的从头学习

## 假期篇



### 三大核心：

​ ECMAScript：执行标准化javascript的基本语法结构
​ BOM
​ DOW

### JS的书写方式

​ 行内式：a标签 ，非a标签

<a href="javascript:alert('hello  javascript!!!')">奥利给</a>

​ 外链式

<script src="./js/hsow.js"></script>

​ 嵌入式：

<script>
    //javascript  语句;
</script>

### JS的输出语法

​ alert（） 弹出信息
​ console.log() 输出普通信息 在控制台输出
​ document.white()用于在页面中显示输出的内容

### js的注释

​ 单行注释

//这是单行注释
console.log("单行注释")



	多行注释



```javascript
/*  这是多行注释
* 可以有很多行
*
*
/
console.log("多行注释")

### JS的变量

​ 一个名字来代表一个值
​ 在运算的过程中，用来保存一个中间变量
​ 语法：var变量名=值

<script>
    var  my_name;
	var pages,list_number,$num_2028
    var my_name="河南"
    </script>

### JS的数据类型
基本数据类型

​ number数值

<script>
  // 整数
  var u_age = 18;
  // 浮点数
  var u_height = 1.75;
  // 浮点数（双精准）
  var u_eyes = 0.12345678;
  // 正数
  var p_number = +1;
  // 负数
  var n_number = -1;
  // 支持科学计数法格式
  var f_number = 3.14E6; // 3.14*10^6
  var f_number2 = 3.14E-6; // 3.14*10^-6

  // NaN
  var box = 0/0;
  var box2 = 12/0 * 0;
  console.log(box,box2);
  // 也可以通过 isNaN() 函数来判断是否是一个数字Number
  // ECMAScript提供isNaN()函数，用来判断这个是不是NaN。
  // isNaN()函数在接收到一个值后，会尝试将这个值转换成数值。
  // isNaN的值是true 表示这不是一个数字，false表示是一个数字
  console.log(isNaN(1)); // false 
  console.log(isNaN("123")); // false
  console.log(isNaN("hello world")); // true

 
</script>

​ string字符串

// 1. 定义了一个名字 t_name 被 var 修饰，这是一个变量 此时默认是undefined，特殊数据类型
  var t_name;
  // 2. 赋值 JavaScript是根据 等号 = 右边的值进行数据类型的判定
  t_name = "Tony"; // 此时 t_name 才是 String 字符类型  双引号
  // 3. 验证 t_name 的类型
  console.log(t_name); // 打印 t_name
  console.log(typeof(t_name)); // 使用typeof 进行类型判断

  // 4. 定义了一个名字为user_id 被var 修饰，根据等号 右边的值，user_id 被判定为字符类型
  var user_id = '111111111111111111'; // 单引号
  console.log(user_id);
  console.log(typeof(user_id));

  // 5. 双引号 和 单引号 建议使用 外双内单的方式。
  var a_word = "' just do it ' no zuo no die why you try,you try you die don't ask why";
  var b_word = '" let it go " no zuo no die why you try,no try no high give me five';
  console.log(a_word, b_word);

  // 6 转义
  var who_am_i = "I\'m a good man.";
  var day_1111 = "双\"11.11\"购物狂欢！！！";
  var table_header = "\t第一列\t第二列\t第三列\t第四列";
  var table_body1 = "\t星期一\t西红柿\t土 豆\t番茄";
  var table_body2 = "\t星期二\t茄 子\t黄 瓜\t扁豆";
  console.log(table_header);
  console.log(table_body1);
  console.log(table_body2);
</script>

​ Boolean 布尔

<script>
  var yes_val = true;
  var no_val = false;
</script>

​ undefined 空
​ null 空

​ NaN=Not a number

	#### 复杂数据类型

​ 未完待续

### 变量命名规则和命名规范

	#### 规则

​ 只能有字母 数字 下划线 美元符 组成
​ 不能有数字开头
​ 严格区分大小写
​ 不能使用关键字和保留字

	#### 规范

​ 不能使用中文
​ 变量语义化
​ 驼峰命名法

### 数据类型的检测

​ typeof 关键字
​ typeof 变量
​ typeof（变量）

### 数据类型转换

	#### 转数值

​ Number（）
​ parseInt（）
​ parseFalse（）
​ 去正负值
​ 非加法的数学运算

	#### 转字符

​ String（）
​ toString（）
​ 加号进行字符串拼接

	#### 转布尔

​ Boolean（）

### 运算符

	#### 数学运算符

​ %
​ +
​ -
​ *
​ /

<script>
    alert(1+1);
alert(2*3);
alert(2-1);
alert(5/1);
</script>



	#### 赋值运算符

​ =
​ +=
​ -=
​ /=
​ %=

</body>
<script>
  // 1. = 号赋值符
  var y = 10;
  var x = y ;
  console.log(x,y);
  // 2  +=
  x += y;
  console.log(x,y);
  // 3. -=
  x -= y;
  console.log(x,y);
  // 4. *= 
  x *= y;
  console.log(x,y);
  // 5. /=
  x /= y;
  console.log(x,y);
  // 6. %=
  x %= y;
  console.log(x,y);
</script>

	#### 比较运算符

​ >
​ <
​ >=
​ <=
​ ==
​ !=
​ !==

<script>
  // 1. ==
  console.log(1 == 1);
  console.log(1 == 2);
  console.log(1 == "1");
  // 2. ===
  console.log(1 === "1");
  console.log("1" === "1");
  // 3. !=
  console.log(1 != 1);
  console.log(1 != 2);
  console.log(1 != "1");
  // 4. !== 
  console.log(1 !== 1);
  console.log(1 !== "1");
  console.log("1" !== "1");
  // 5. >
  console.log(1 > 1);
  console.log(2 > 1);
  // 6. <
  console.log(1 < 1);
  console.log(2 < 1);
  // 7. >=
  console.log(1 >= 1);
  console.log(2 >= 1);
  // 8. <=
  console.log(1 <= 1);
  console.log(2 <= 1);
  // 9. 经典面试题 
  // 0.1 + 0.2  与  0.3 比较的结果
  console.log(0.1 + 0.2);
  // 将0.1转换成二进制
  console.log(0.1.toString(2)); // 0.0001100110011001100110011001100110011001100110011001101
  // 将0.2转换成二进制
  console.log(0.2.toString(2));  // 0.001100110011001100110011001100110011001100110011001101
  
</script>

	#### 逻辑运算符

​ &&
​ ||
​ ！

script>
  // 1. && 逻辑与
  console.log(true && true);
  console.log(false && false);
  console.log(true && false);
  console.log(5 && 4);//当结果为真时，返回第二个为真的值4 
  console.log(0 && 4);//当结果为假时，返回第一个为假的值0 
  console.log((1 > 2) && (2 > 3));
  console.log((1 < 2) && (2 < 3));
  // 小结：
  /*
    && 逻辑与 (充分必要)
    1.1 两边条件都为true时，结果才为true；
    1.2 如果有一个为false，结果就为false；
    1.3 当第一个条件为false时，就不再判断后面的条件
    1.4 数字对比，非0即为真
  */

  // 2. || 逻辑或
  console.log(true || true);
  console.log(false || false);
  console.log(true || false);
  console.log(5 || 4);//当结果为真时，返回第二个为真的值4 
  console.log(0 || 4);//当结果为假时，返回第一个为假的值0 
  console.log((1 > 2) || (2 > 3));
  console.log((1 < 2) || (2 < 3));
  // 小结：
  /*
    || 逻辑与 (既不充分又不必要)（或者）
    2.1只要有一个条件为true时，结果就为true；
    2.2当两个条件都为false时，结果才为false；
    2.3当一个条件为true时，后面的条件不再判断
  */
  // 3. ! 取相反
  console.log(!true);
  console.log(!false);
  console.log(!0);
  console.log(!10);
  // 小结：
  /*
    ! 取反
    3.1 当条件为false时，结果为true；反之亦然。
  */
</script>

	#### 自增自检运算符

​ ++
​ –

### 分支语句

	####  if语句

​ if（）{}
​ if（）{}else{}
​ if（）{} else () {}
​ if() {} else if () {} else {}

<script>
  // 1. 声明函数
  function checkUserAge() {
    // 2. 获取 id 为 user_age 的input
    var get_el_input = document.getElementById("user_age");
    // 3. 取得 input 对应的value, 并通过parseInt()将字符串转换成整数
    var get_el_value = parseInt(get_el_input.value);
    console.log(get_el_value);
    // 4. 判断年龄
    console.log("开始");
    if ( get_el_value < 18) {
      console.log("还小，未成年!!");
    }

    if ( get_el_value > 6 && get_el_value < 18) {
      console.log("我还是曾经的那个少年!!!😎");
    }

    if ( get_el_value > 255 || get_el_value < 0 ) {
      console.log("未成人或不可能!!!!");
    }

    if ( get_el_value == 18 || get_el_value > 18 && get_el_value <= 30) {
       console.log("成人了，可以成家立业了！！！");
    }
    
    console.log("结束");
  }
</script>

	#### switch语句

​ switch (变量{

​ case 情况1 ： 情况1满足的代码

break

case 情况2 ： 情况2满足的代码 break

default 所有情况都不满足的时候执行的代码

<script>
  // 1. 声明函数
  function checkScore() {
    // 2. 获取 id 为 user_age 的input
    var get_el_input = document.getElementById("user_score");
    // 3. 取得 input 对应的value, 并通过parseInt()将字符串转换成整数
    var get_el_value = parseInt(get_el_input.value);
    console.log(get_el_value);
    // 4. 判断成绩段位
    var score_level = parseInt(get_el_value / 10); // 100分制
    switch (score_level) {
      case 10:
      case 9:
        console.log("优秀!!!");
        break;
      case 8:
        console.log("良好，需要继续加油!!!");
        break;
      case 7:
        console.log("中等!!!");
        break;
      case 6:
        console.log("及格!!!");
        break;
      default:
        console.log("不及格，重修！！！");
        break;
    }
  }
</script>

		#### 注意

​ 注意1、case和变量只能是===的关系才能满足
​ 注意2.只能判断1个准确值 不能判断范围
​ 3。break可以不写 不写会向下穿透
​ 4。break穿透从第一个满足条件的case开始穿透
​ 5。default 可以不写 不写就是所有条件都不满足的时候 没有代码执行

代码小鲜肉
关注
JS for循环 if判断、white循环。小练习
weixin_30814329的博客
08-18 1149
1----输入正整数n，求1-n的和。 var n=prompt("请输入一个正整数"); var sum=0; for (var i=1;i<=n;i++) { sum=sum+i } alert(sum) 2----篮球弹起的高度100米 第几次高度小于1米，每次弹起是上一次的0...
javascript
02-12
Javascript源码Javascript源码 Javascript源码 Javascript源码 Javascript源码 Javascript源码 Javascript源码
js
whitegiveking的博客
04-11 155
apply和call方法的用法： apply方法： 函数名.apply(对象，[参数1，参数2...]); 方法名字.apply(对象,[参数1，参数2...]); call方法： 函数名.call(对象，参数1，参数2...); 方法名字.call(对象，参数1，参数2...); ...
JS for循环 if判断、white循环。小练习二
weixin_30897233的博客
08-20 546
假设一个简单的ATM机的取款过程是这样的：首先提示用户输入密码（password），最多只能输入三次，超过3次则提示用户“密码错误，请取卡”结束交易。如果用户密码正确，再提示用户输入取款金额（amount），ATM机只能输出100元的纸币，一次取钱数要求最低100元，最高1000元。若用户输入的金额符合上述要求，则打印输出用户取得钱数，最后提示用户“交易完成，请取卡”，否则提示用户重新输入金额...
原生js开灯关灯特效
ping
04-08 827
今天练习js写的开关灯特效 老开心了 老有成就感了 嘻嘻嘻~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
【知识体系】JavaScript基础（2）——DOM
aaaaapipi的博客
08-01 172
js分三个部分： ECMAScript标准：Js的基本的语法 DOM：Document Object Model——文档对象模型——操作页面元素 BOM:Browser Object Model——刘览器对象模型——操作的是浏览器 概念 文档：一个页面就是一个文档，文档中有根元素——html——根元素 元素（element）：页面中所有的标签都是元素，元素可以看成是对象。标签可以嵌套，标签中有标签，元素中有元素 节点（node）：页面中所有的内容都是节点，标签 属性 文本 root:根 由文档及文档
JavaScript循环、JS HTML DOM、JS Window
qq_36067033的博客
07-13 496
今天继续学习JavaScript，该笔记主要记录JavaScript的循环、JS HTML DOM、JS Window。 JavaScript的for循环与white循环： 循环可以将代码块执行指定的次数。 JavaScript 支持不同类型的循环： for - 循环代码块一定的次数for/in - 循环遍历对象的属性while - 当指定的条件为 true 时循环指定的代码块do
二阶段14天
cai769371711的博客
12-23 363
单人
JS使用方式及基本语法总结
little_____white的博客
07-08 295
1.js的使用方式 *行内：比如直接在页面节点添加onclick="alert(123)" *嵌入式（内部式）在页面节点添加onclick=function f1(){ } *外部式（文件调用式） 页面节点添加onClick="f1()"，使用script标签，引入js文件，在js文件中定义f1函数 2.基本语法 *由uniCode字符集进行编码 *注释//单行 /* */多行 语句...
JavaScript数组方法大全
white_with_black的博客
11-22 183
push(): 向数组末尾添加一个或多个元素 unshift(): 向数组的开头添加一个或多个元素 pop(): 删除数组最后一个元素 shift(): 删除数组第一个元素 sort(): 给数组排序 reverse(): 颠倒数组项在数组中的位置 concat(): 合并数组 slice(): 指定的位置开始删除指定的数组项，并且将删除的数组项构建成一个新数组 splice():
JS基础简单指引
whitegiveBoy的博客
05-12 426
针对IT修真院JS任务1的简要总结 本文章内容从各位师兄日报搬运总结而来，针对刚入门js任务的学员能有效指引学习方向（个人为例 ）。 1，JS是如何工作的？ 事件 JS是以事件驱动为核心的一门语言。 事件的三要素 事件源、事件、事件驱动程序。 比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。 再比如，网页上弹出一个广告，我点击右上角的X，广告就关...
javaScript
weixin_45768979的博客
12-18 205
javascript JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。 **作用:**验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。 javascript的组成: ECMAScript javascript的核心语法 BOM 浏览器对象模型 DOM 文档对象模型 使用方式: JS需要...
使用JavaScript的手机JavaScript编辑器-JavaScript开发
05-26
myConsole一个JavaScript手机编辑器。 它的实时版本在这里托管。 如果需要，您可以将其作为应用程序添加到手机中。 只需单击菜单/添加到您的主屏幕即可。 您在手机的myConsole A JavaScript编辑器中看到的代码。 它...
js while 延迟
c1052981766的专栏
08-29 3439
1.setTimeout，不能实现延迟处理 如果这样写： var count = 10; var domElem=a(10); while(!domElem){ console.log(count); setTimeout(function(){ a(10+count); },5000); count--; if(count == 0){ break; } } 则
学习笔记—document write( )语法、功能、以及需要注意的‘坑’
热门推荐
公众号：前端蛋卷
04-21 3万+
语法：document.write(exp1,exp2,exp3,....)参数解析：（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。(如果写入多个参数的话，这些参数会自动换行显示)  (2)这里的参数可以是变量，也可以是函数体、函数自执行体，数字等等，也可以进行一些简单的运算  (3)参数支持标签属性，写入的时候会按照html进行解析，但是需要用字符串的形式(常用...
js中document.write的那点事
weixin_34247155的博客
08-16 963
document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。　　记住，在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值