初识js(1)

最新推荐文章于 2024-08-27 15:59:21 发布

Xalbadora

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量75

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Xalbadora/article/details/117672549

版权

js概述

html 骨架
css 美化
js 动效
nodejs（服务器端）
用途：游戏，页面动效，表单验证，服务端，智能检索
js：运行在客户端（浏览器）的解释型脚本语言
高级语言---->二进制语言翻译
翻译：编译型和解释型
解释型：代码从上向下一遍解释一遍运行，javascript。由js引擎来进行的
浏览器内核：渲染引擎，js引擎
编译：一次性编译成可以执行二进制文件统一运行（Java、c语言）

js历史

1995年，网景公司发明了一款navigator0.9版本的浏览，公认成熟，
缺点：不能交互，不能进行表单验证，网景公司找到布兰登艾奇，用了10天发明livescript的语言，
用于表单校验,交互. navigator2.0 版本上运用. 合并后起名javascript
1996, 微软公司发行 exporer3.0 JScript
1997年，网景公司把javascript1.0 版本ECMA（欧洲计算机制造商协会）做标准化起名ECMASscript

js和h5关系

h5
狭义：html的第5个版本
h5：web开发所有技术
html css js nodejs vue react
js
browser ：浏览器客户端
Server: 服务器服务端

js组成

js组成：ECMAScript（语法），DOM，BOM
- DOM：document object model 文档对象模型
- BOM：browser object model 浏览器对象模型
- js本质：可以通过js代码操作文档，浏览器

书写位置以及如何运行

外链式
外链式不要在script、标签中写代码，如果想写，再下面写

<script></script> 
例：<script> src="js/demo.js"</script>

内嵌式
内嵌式写在html结构的底部，为了能够获取页面中的内容才写到最下面的

输入输出语句

console.log（）         控制台输出
alert()                         弹框1
document.write()        页面输出
var a = prompt();
console.log(a)            提示框输出

变量

变量的概念：存储数据的容器
变量的定义：先声明，后赋值

先声明，后赋值

   var x; //声明变量
   x = 10;//赋值
   console.log(x);

声明的同时赋值

  var y = 20;
  console.log(y);
  console.log(z);
  注意：变量一定要先声明后赋值

可以同时声明多个变量，再进行赋值

 var x,y,z; //声明了3个变量
 x = 10;
 y = 20;
 z = 30;
 console.log(x);
 console.log(y);
 console.log(z);
 console.log(x,y,z);

变量的命名规则和规范

变量是由字母，数字，下划线，美元符号, 现在已经支持汉字了，不推荐

 var _abc$ = '张三';
 console.log(_abc$);
 var  班长 = '李张超';
 console.log(班长);

不能以数字开头
不能是关键字和保留字
区分大小写
```
var Var = 10;
console.log(Var);
```

驼峰命名法

如果多个单词组成，第一个单词全部小写，从第二个单词开始，首字母全部大写
```
var anBigApple = 90;
```

数据类型种类（♥）

基本数据类型：字符串(string)，数字(number)，未定义(undefined)，空(null)，布尔(boolean)
复杂数据类型：对象(了解)

例：姓名："赵丽影"  ---》字符串
        年龄：33       --->数字类型
        体重：未知     ----> undefined
        是否结婚: 否   ----> 布尔  true、false
        空：           --->null
        三围：{腰围，臀围，胸围} --->对象

检测数据类型：typeof关键字

字符串(string): 单引号或者双引号引起来

  var str1 =  '找钱';
  var str2 = 'true';
  var str3 = '我是你的"小苹果"'; //外单内双，外双内单
  var str4 = '我是你的"小苹果'; 
  var PI = 3.1415926

数字和字符串是可以进行拼接的

  console.log(str1,str2,str3,str4);
  console.log(typeof str1);
  console.log(typeof(str1));

数值类型：10, 20.1 , -10, 01010101, 0xabef001,054, NaN，整数，小数，二进制（0和），八进制(0-7)，十六进制(0-9 a-f)

  console.log(typeof 10);  
  console.log(typeof 10.1);
  console.log(typeof -10);
  console.log(01010101); //转为10进制
  console.log(0xabef001); //转为10进制
  console.log(054); //转为10进制
  console.log(typeof NaN);
  NaN: number类型，但是不是数字
  NaN的由来：在参与运算的过程中，出现了无法表示的数字的时候

undefined 未定义

  var x ;
  console.log(x); // 只声明，未赋值

boolean 布尔

  console.log(true);// 是 真 对
  console.log(false);// 否 假 错
  console.log(typeof true);//boolean 布尔类型

null 空

  var a = null; // 后期a将重新赋值成对象
  console.log(typeof a); // object
  console.log(typeof 10);// number
  console.log(typeof typeof 10);//string

字符串转为数值类型（♥）

Number()
结论一：Number()可以将纯数字的字符串转为数值
结论一：Number()可以将非纯数字的字符串转为NaN，也是数值类型

 var str = '100';//字符串
 console.log(typeof str);//  检测str的类型为string
 console.log(typeof Number(str));//通过Number()将str转换为数字，再   进行检测
 var str1 =  '张三';
 console.log(typeof str1);//string
 console.log(typeof Number(str1));// number
 console.log(Number(str1));//NaN

 var str2 = '100px';
 console.log(typeof str2); //string
 console.log(Number(str2));//NaN 
 console.log(typeof Number(str2));//number

parseInt()
结论一： parseInt()可以将纯数字的字符串转为数值
结论二： parseInt()可以将数字开头的字符串转为数字
结论三： parseInt()可以将非数字开头的字符串转为NaN，也是属于number类型
// var str = ‘200.1’;
// console.log(typeof str); //string
// console.log(parseInt(str));//将字符串转为数值100
// console.log(typeof parseInt(str));//number
```
 // var str1 = '100px';
 // console.log(typeof str1); //string 
 // console.log(parseInt(str1)); //100 将数字开头的字符串转为数字
 // console.log(typeof parseInt(str1)); //number

 // var str2 = 'zhangsan';
 // console.log(typeof str2);//string
 // console.log(parseInt(str2));//NaN
 结论四： parseInt()保留整数
```
parseFloat()
结论一： parseFloat()保留小数点后面的数字
结论二： parseFloat()数字开头的字符串转为数字
```
 var x = '10.1px';
 console.log(typeof x);
 console.log(parseInt(x));//10
 console.log(parseFloat(x));//10.1
```
隐式转换 - * / %

结论：
1. Number()和parseInt()的不同点：
parseInt()可以将数字开头的字符串转为数字，Number()只能将纯数字转为数字类型
2. parseInt()和parseFloat()的不同点：
parseInt()将字符串转为整数
parseFloat()将字符串转为小数

数字转为字符串（♥）

num.toString()

String(num)

var num = 123;
console.log(typeof num);
console.log(typeof num.toString());
console.log(typeof String(num));

转为boolean类型（♥）

Boolean()
!!

var x = ‘’;
var y;// undefined
var z = null;
var a = 0;
var b = ‘zs’

    console.log(Boolean(x));
    console.log(Boolean(y));
    console.log(Boolean(z));
    console.log(Boolean(a));
    console.log(Boolean(b));


    console.log(!!x);
    console.log(!!y);
    console.log(!!z);
    console.log(!!a);
    console.log(!!b);

算术运算符：+ - * / %（♥）

+: 拼接 （字符串和字符串，字符串和数字相加）
+: 求和
var x = 2;
var y = 21;
var z = x % y;
console.log(z);//20

赋值运算符（♥）

    var a = 10; //将10赋值给10
    // a  = 20; //将a重新赋值为20
    // a += 20;  //等价于 a = a+20  将左边a和右边20求和，再重新赋值给a
    // a -= 10; // a = a-10
    // a *= 10; // a = a*10=100

    a+=3;  //a = a+3=13
    a-=5;  // a = a-5=8
    a*=20; // a = 160

关系运算符: > < >= <= == != === !==（♥）

关系运算符比较出的结果是布尔类型值

  console.log(3>4); //false
  console.log(3<4); //true

  console.log(10=='10'); //只比较值，不比较类型
  console.log(10==='10');//既比较值，也比较类型

  console.log(3!=4);

逻辑运算符: && || !（♥）

&&: 与

  console.log(3>5&&5>4); // 一假即假  false
  console.log(8>5&&5>4); // 一假即假   true
  console.log(9==5&&5>4); // 一假即假   false
  console.log(9==5&&5==4); // 一假即假   false

||: 或一真即真(整个表达式有一个真，结果就是真)

  console.log(4>2||3>6); //true
  console.log(5==3||false||false); //false

! : 非取反

  console.log('----------');
  console.log(!true); //false
  console.log(!false); //true

自减自增运算符（♥）

a++；在a的基础上加1
++a: 在a的基础上加1
区别：单独使用时，都是自身加1
在参与输出，赋值，等操作时，a++和++a是有区别的

a++ 先输出a，再自身加1

++a 先加1，再输出

 var a = 10;
 ++a;单独使用
 console.log(++a); // 11 
 console.log(a); // 11

 var a  = 10;
 var b = ++a;
 var b = a++;
 console.log(b);

 var x = 10;
 var b = x++;//b = 10
 console.log(b++);//10
 console.log(x);//11

 var x = 10;
 var y = x++ + ++x;
 y = 10 + 12
 console.log(y);//22

 var x = 10;
 var y = ++x;
 var c = ++y;
 console.log(c);//12

Xalbadora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识js(1)

js概述html 骨架css 美化js 动效nodejs（服务器端）用途：游戏，页面动效，表单验证，服务端，智能检索js：运行在客户端（浏览器）的解释型脚本语言高级语言---->二进制语言翻译翻译：编译型和解释型解释型：代码从上向下一遍解释一遍运行，javascript。由js引擎来进行的浏览器内核：渲染引擎，js引擎编译：一次性编译成可以执行二进制文件统一运行（Java、c语言）js历史1995年，网景公司发明了一款navigator0.9版本的浏览，公
复制链接

扫一扫