【JS】Day01

GreatWillSSS

已于 2023-01-12 14:30:28 修改

阅读量362

点赞数

分类专栏：二阶段文章标签： html5

于 2022-10-24 16:52:40 首次发布

本文链接：https://blog.csdn.net/qq_62417130/article/details/127484942

版权

二阶段专栏收录该内容

34 篇文章 0 订阅

订阅专栏

学习内容

JavaScript概述
如何导入js
输出语句
换行
数据类型
命名规则
变量
自增自减
算术运算符
关系运算符
逻辑运算符
赋值运算符
特殊运算符
优先级
强制类型转换

JavaScript概述

javascript是一门 基于对象 和 事件驱动 的 脚本语言。
  
js诞生于 1995年，公司 网景，创始人 布兰登，最初叫做 liveScript。
  
JS的第一套标准: ECMA-262
  
js包含三部分:
  ECMAScript 核心
  BOM: 把整个浏览器窗看做一个对象，通过操作window对象来操作浏览器的行为
  DOM: Document Object Model (文档对象模型)

java和javascript没有任何关系。

js的作用:
  实现页面特效
  实现交互

如何导入js

内联脚本、行内脚本
onclick: 绑定点击事件，当鼠标点击按钮时，触发事件
alert(): 是JS中的一种输出语句，以警告框的方式输出。

内部脚本
这里写JS内容，理论上可以放到页面的任意位置，也可以写无限个这个的标签

外链脚本
<script src=''></script>
注: 外部引用脚本时，script标签中不要写任何内容，写了也不执行

输出语句

只要写在引号中的内容，都是字符串常量
alert('1 + 1');
alert(1 + 1);

alert() //以警告框的方式输出，缺点是会阻止后面语句的执行。
document.write() //在页面中输出，缺点是会影响现有布局。
console.log() //在控制台中输出，会输出对象的详细信息。

换行

在页面中，输出
document.write('<Strong>hello</strong><br><i>world</i>');
在非页面中，也就是脱离页面时，需要换行，不能使用<br>，使用\n换行

alert('hello\nworld');
console.log('hello\nworld');

输出"中国"
"" '': 表示当前内容是字符串
alert("\"中国\"");
alert('"中\t国"');

\t: 横向跳格 (一次八个空格)
\: 转义符,将具有特殊含义的符号转成普通字符

数据类型

基本数据类型:
  Number (数字类型) 3 3.3 -4
  String (字符串) '' ""
  Boolean (布尔) true false
  null (表示空的对象)
  undefined (未定义)

复合数据类型:
  Object (对象)

命名规则

声明了一个变量，在内存中开辟了一个空间，用于存储数据
var: 声明变量的关键字
只是开辟了一块空间，没有规定必须存放什么类型的数据，这时，我们可以存放任何类型的数据，把这称语言称为弱类型语言。

var i; //lint 整数
var f_num; //float 小数
var boo; //boolean 布尔值
var ch; //char 字符
var str; //string 字符串
var o_div; //object 对象
var arr; //array 数组
var fn; //function 函数

变量

声明一个变量
var: 声明变量的关键字
i: 当前变量的名称
=: 赋值号，将右边的值存入左边的变量中
var i = 1;
    i = 2;
    i = 3;
    i = 4;
console.log(i); //4

声明变量，没有赋值的时候，变量中的值默认为undefined,即意味着将来这个变量中要存放基本数据类型的数据。
var j;
console.log(j); //undefined
null: 表示空，这个obj变量中没有任何数据，赋值为null，表示将来要存放对象。
var obj = null;
console.log(obj);

隐式声明变量，没有关键字var
alert(i); //报错
i = 3;
alert(i);

var i = 1,j; //声明了两个变量
在声明变量时，就赋值的变量，称为变量初始化。
在声明变量时，没有给变量赋值，而是在后面使用的时候赋值，这种称为先声明，后赋值。
j = 3;

i = 1,2;
console.log(i); //1
i = (1,2);
console.log(i); //2

自增自减

从左到右，如果遇到 变量 ++ 先取出变量中的值参与其它运算，再自加1。如果遇到 ++ 变量，直接取加1后的值参与运算

声明一个变量i
  var i = 3;
//3  4
  i ++;
  console.log(i); //4

  var j = 3;
//   4
  ++ j;
  console.log(j); //4


声明一个变量i
  var i = 3;
//            3  4
  console.log(i ++); //3
  console.log(i); //4
  var j = 3;
//               4
  console.log(++ j); //4

i: 针对自己来说，无论是i ++ 还是 ++i 遇到 一次 加一次1。
  var i = 3;
//           4   4  3   3  4
  var j = ++ i + i -- + i ++;
//           4 + 4    + 3
  console.log(i,j); //4 11


  var i = 3;
//           2   2  1      2   2   3
  var j = -- i + i -- - ++ i + i ++;
//           2 + 2    -    2 + 2
  console.log(i,j); //j = 4,i = 3

//           4   4  3   4  5   3  4
  var k = ++ i + j -- + i ++ + j ++;
//           4 + 4    + 4    + 3 
  console.log(i,j,k); //i = 5,k = 15,j = 4

算术运算符

//当乘以字符串时，将字符串自动转为数字，如果是纯数字字符串，则转为数字，正常相乘。
console.log(3 * '3'); //3 * 3 = 9
//第一个字符串'3'，转为数字 3
//第二个字符串'3a'，转为非数字 NaN (Not a Number)
console.log('3' * '3a'); //3 * NaN = NaN

//如果有布尔值时，true自动转为1，false自动转为0，参与运算
console.log(3 * true); //3 * 1 = 3
console.log(3 * false); //3 * 0 = 0
//null 会自动转为0
console.log(3 * null); //3 * 0 = 0
//undefined 转为NaN
console.log(3 * undefined); //3 * NaN = NaN

//当除以字符串时，将字符串自动转为数字，如果是纯数字字符串，则转为数字，正常相除。
console.log(3 / '3'); //3 / 3 = 1
//第一个字符串'3'，转为数字 3
//第二个字符串'3a'，转为非数字 NaN (Not a Number)
console.log('3' / '3a'); //3 / NaN = NaN

//如果有布尔值时，true自动转为1，false自动转为0，参与运算
console.log(3 / true); //3 / 1 = 3

//null 会自动转为0
console.log(null / 3); //0 / 3 = 0
//undefined 转为NaN
console.log(3 * undefined); //3 / NaN = NaN

//特殊
console.log(0 / 0); //NaN
console.log(3 / false); //3 / 0 = Infinity 无穷

//余数
console.log(8 % 2); //0
console.log(8 % 3); //2
console.log(0 % 2); //0
console.log(2 % 5); //2
console.log(3 % 5); //3
console.log(4 % 0); //NaN

console.log(1 + 1); //2
//如果+两边有字符串，则起连接作用，将+两边的内容连接成一个新的字符串
console.log(1 + '1'); //'11'
console.log(1 + true); //2
console.log(1 + false); //1
console.log(1 + null); //1
console.log(1 + undefined); //NaN
console.log(1 + 1 + '' + 1); //1 + 1 = 2,2 + '' = '2','2' + 1 = '21'

关系运算符

console.log(3 > 2); //true
console.log(3 >= 3); //true
console.log(10 > '2'); //true
//两边都是字符串，从左到右依次比较，比出大小停止，没出大小接着比
console.log('10' > '2'); //false
console.log('20' > '2'); //true
console.log(1 >= true); //true
console.log(1 >= false); //true
console.log(1 >= null); //true
console.log(1 >= undefined); //false

//== 等于 != 不等于 === 全等 !== 不全等
console.log(1 == '1'); //true
console.log(1 === '1'); //false
console.log(1 === 1); //true

//切记!!!
//null 为空，表示什么都没有，也占用空间
//0 false '' 表示常量，占用空间
console.log(null == O); //false
console.log(null == false); //false
console.log(null == ''); //false
//null 和 undefined 都表示空，但是类型不同
console.log(null == undefined); //true
console.log(null === undefined); //false
console.log(NaN == NaN); //false

逻辑运算符

//! 非
console.log(!0); //true
console.log(!false); //true
console.log(!''); //true
console.log(!undefined); //true
console.log(!null); //true
console.log(!NaN); //true
console.log(!8); //false
console.log(!-1); //false
console.log(!'人'); //false
console.log(!' '); //false

//&& 与
var i = 3;
//左为false，返回左的值
var j = i + '' - 3 && (i = 4);
console.log(i,j); //3 0

var k = 3;
//左为true，返回右的值
var h = ++ k >= 4 && (k = 5);
console.log(k,h); //5 5

//|| 或
var u = 3;
//左为true，返回左的值
var y = 2 % u || (u = 4);
console.log(u,y); //3 2

var x = 3;
//左为false，返回右的值
var z = 3 % 3 || (x = 5);
console.log(x,z); //5 5

//number 等于或大于 90，但小于 100
number >= 90 && number < 100

//ch 不是字符 q 也不是字符 k
ch != 'q' && ch != 'k'

//number 介于 1 到 9 之间 (包括 1 不包括 9)，但是不等于 5
number >= 1 && number < 9 && number != 5

//number 不在 1 到 9 之间
number < 1 || number > 9

//判断这个字符是空格，是数字，是字母
ch == ' ' || ch >= '0' && ch <= '9' || ch >= 'a' && ch <= 'z' || ch >= 'A' && ch <= 'Z'

//有3个整数a,b,c，判断谁最大，列出所有可能
a > b && a > c
b > a && b > c
c > a && c > b

//判断year表示的某一年是否为闰年，用逻辑表达式表示。
//闰年的条件是符合下面二者之一:
//(1)能被4整除但不能被100整除
//(2)能被400整除
year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
!(year % 4) && year % 100 || !(year % 400)

赋值运算符

//声明一个变量
var i = 3;
var j = i;
var k = i + j;

//先取运算符左边变量中的值与右边表达式的值进行相应的算术运算，最后将运算的结果再赋值给左边的变量。

var i = 3;
i* = 9 + i; //i = 3 * (9 + 3)
console.log(i); //36

//从1累加到5 1 + 2 + 3 + 4 + 5
var i = 1;
i += 2; //i = i + 2  3
i += 3; //i = i + 3  6
i += 4; //i = i + 4  10
i += 5; //i = i + 5  15
alert(i);

  var i = 5;
  var a = 3;
//3       6      7   7  8   8  9
  a += ++ i + ++ i - i ++ + i ++;
// a = 3 + 6 + 7 - 7 + 8 = 17  
// i = 9

//        17 18  9  10     19  19 20
  var b = a ++ + i ++ + ++ a + a ++ + "a++";
//    b = 17 + 9 + 19 + 19 + 'a++'
  console.log(i,a,b); //10 20 '64a++'

特殊运算符

语法: new 类名()
//Number
var o_num = new Number(3);
//String
var o_str = new String();
//Boolean
var o_bool = new Boolean();
//Object
var obj = new Object();
console.log(obj);
var i = 3;
console.log(typeof o_num,typeof i);

console.log(typeof -3); //'number'
console.log(typeof '3'); //'string'
console.log(typeof true); //'boolean'
console.log(typeof null); //'object' null 不是对象的对象
console.log(typeof undefined); //'undefined'
console.log(typeof NaN); //'number' NaN 不是数字的数字
console.log(typeof new Number()); //'object'
console.log(typeof typeof false); //typeof false 'boolean' typeof 'boolean' 'string'

优先级

!  ++  --  +(正)  -(负)  new  typeof
*  /  %
+(加)  -(减)
>  <  >=  <=
==  !=  ===  !==
&&
||
?  :
=  *=  /=  %=  +=  -=

强制类型转换

console.log(parseInt('2.3')); //2
console.log(parseInt('2 34')); //2
console.log(parseInt('   3')); //3
console.log(parseInt('a2345')); //NaN

//9 + 1  10 十进制
//7 + 1  10 八进制
//1 + 1  10 二进制
//f + 1  10 十六进制

//十六进制: 0-9 a b c d e f
console.log(parseInt('g',16)); //NaN