JavaScript是什么？

是一门脚本语言（不需要编译,直接执行）

是一门解释性语言

是一门动态类型的语言

是一门基于对象的语言

JavaScript分为三个部分

1.ECMAScript  标准----js的基本语法

2.DOM---Document Object Model 文档对象模型（一套操作页面元素的API）

DOM可以把HTML看作是文档树，通过DOM提供的API对树上的节点进行操作

3.BOM---Browser  Object  Model   浏览器对象模型（一套操作浏览器功能的API）

通过BOM操作浏览器窗口，比如（弹出框，控制浏览器跳转，获取分辨率等）

JavaScript和HTML、CSS的区别

1、HTML：提供网页的结构，提供网页中的内容

2、CSS：用来美化网页

3、JavaScript：可以用来控制网页内容，给网页增加动态的效果

JavaScript的书写位置

1.写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

2.写在script标签中

<head>

  <script>

    alert('Hello World!');

  </script>

</head>

3.写在外部js文件中，在页面引入

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

js代码需要注意的问题

在一对javascript标签的代码中有错误的代码时，那么在错误代码后的js代码都不会执行

如果第一对Script中有错误的代码，不会影响后面的Script标签中的js代码执行

script的标签中可以写什么内容 type="text/javascript"是标准写法或者写language="JavaScript"都可以但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准
 
如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码
 
变量
什么是变量？
变量是计算机内存中存储数据的标识符，根据变量名称可以获取内存中存储的数据
为什么使用变量？
使用变量可以方便的获取或者修改内存中的数据
js中存储数据使用变量的方式（名字，值---数据）
js中声明变量都用var---存储数据，数据应该有对应的数据类型
js中的字符串类型的值都用双引号或者单引号
 
变量---作用，存储数据或者操作数据
变量声明（有var，有变量名字，没有值）
var age;
变量初始化（有var ，有变量名字，有值）
var age;

age = 18;

同时声明多个变量

var age, name, sex;

age = 10;

name = 'zs';

同时声明多个变量并且赋值

var age = 10, name = 'zs';

变量的命名规则和规范

规则--必须遵守的，不遵守会出现报错

由字母、数字、下划线、$符号组成，不能以数字开头

不能用关键字和保留字，例如for、while。

区分大小写

规范--建议遵守，不遵守不会报错

变量名必须有意义

遵守驼峰命名法，首字母小写，后面单词的首字母大写

数据类型

  • 字面量

在源代码中一个固定值的表示法

数值的字面量：8，9，0

字符串字面量：“前端”，“小田”

布尔字面量：true，false

  •  js中简单数据类型
Number:  数值字面量，数值的固定值的表示法，数字类型（整数和小数）
数值判断：
NaN: not a number
NaN与和任何值都不相等，包括它本身
is NaN: is not a number
 
注意：
不要用小数验证小数
不要使用NaN判断是不是NaN,应该使用is NaN
var num;

   console.log(num+10==NaN);//---false
   num+10不是一个数字  NaN  俩个不是数字的值无法判断相等

如何验证这个结果是不是NaN，应该使用isNaN()//
使用isNaN()验证是一个数字时，结果为false
使用isNaN()验证不是一个数字时，结果为true
需要表示十进制：正常数字
需要表示八进制：以0开头
需要表示十六进制：0x开头
String： 字符串类型（值一般都是单引号或者双引号括起来的）
转义符：

字符串的长度：使用length属性可以获取字符串的长度

字符串的拼接：使用+连接
俩边只要有一个是字符串，那么+就是字符串拼接功能

俩边如果都是数据，那么就是算数功能

Boolean： 布尔类型（值只有俩个，true（真1），false（假0））
Undefined： 未定义，值只有一个：undefined
什么情况下结果为undefined？
变量声明了，没有赋值
函数没有明确返回值，如果接受了，结果是undefined
如果一个变量的结果是undefined和一个数字进行计算，结果:NaN,不是一个数字，也没有意义
Null： 空类型，值只有一个：null，一个对象指向为空，此时可以赋值为null（变量的值如果想为null，必须手动设置）
  • 复杂数据类型
Object: 对象
 
如何获取变量的数据类型？
typeof  变量名
typeof(变量名)
var age = 18;

console.log(typeof age);  // 'number'
console.log(typeof(age));

数据类型转化

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

  • 其他类型转字符串类型

.toString();

var num = 5;

console.log(num.toString());

String();

如果变量是有意义--调用.toString()使用转换

如果变量没有意义--使用String()转化

   var num2;//值为undefined，无意义

   console.log(num2.toString());

   var num3=null;

   console.log(num3.toString());//以上会报错

    这个可以

   var num2;

   console.log(String(num2));

   var num3=null;

   console.log(String(num3));
  • 其他类型转数值类型

Number();转数字

Number()可以把任何值转化成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

parseInt();转整数

var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束

var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

parse Float();转小数

parseFloat()把字符串转换成浮点数
parseFloat()和parseInt非常相似，不同之处在与
parseFloat会解析第一个. 遇到第二个.或者非数字结束
如果解析的内容里只有整数，解析成整数

+，-0等运算

var str = '500';
console.log(+str); // 取正
console.log(-str); // 取负
console.log(str - 0);

  • 其他类型转化为布尔类型

Boolean()

0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true

操作符

一些符号---用来计算

算数运算符：+ - * / %

算数运算符表达式：由算数运算符连接起来的表达式

  • 一元运算符 ++ --

只有一个操作数的运算符 ++ --

++ 自身加一

-- 自身减一

总结 前置++：先加1，后参与运算

后置++：先参与运算，后加1

上面两个理解后，下面两个自通

前置-- ：先减1，后参与运算

后置-- ：先参与运算，后减1

说明：var  num=1; ++num之后num的值为2，++num的值2

         num++之后的num值为2，num++的值为1

  • 二元运算符:
这个操作符需要两个操作数就可以运算
  • 三元运算符:

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

  • 复合运算符: +=  -=  *= /= %=

复合运算表达式：由复合运算符连接起来的表达式

关系运算符：>  <  >=  <= ==不严格的 ===严格  ！=不严格的不等，！==严格的不等

关系运算表达式：由关系运算符连接起来的表达式

关系运算表达式的结果是布尔类型

逻辑运算符：

&&：与  俩个操作数同时为true，结果为true，否则都是false

||  : 或  俩个操作数有一个为true，结果为true，否则为false

！:  非  取反

赋值运算符

=  +=  -=  *=  /+  %=

例如：

var num = 0;

num += 5;    //相当于  num = num + 5;
运算符的优先级

优先级从高到底
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符

JavaScript--总结一（变量+数据类型+运算符）的更多相关文章

  1. JAVA 变量 数据类型 运算符 知识小结

    ---------------------------------------------------> JAVA 变量 数据类型 运算符 知识小结 <------------------ ...

  2. 使用 JavaScript 中的变量、数据类型和运算符，计算出两个 number 类型的变量与一个 string 类型的变量的和，根据 string 类型处于运算符的不同位置得到不同的结果

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的变量.数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算 ...

  3. Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)

    一.Js简介和入门 继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button onclick="javas ...

  4. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  5. JavaScript基础知识：数据类型，运算符，流程控制，语法，函数。

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  6. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  7. 变量和数据类型&运算符

    变量和数据类型&运算符 变量 变量的作用:用来存储数据 变量命名的规范:字(字符串)下(_下划线)美($)人(￥) 数 (可以包括数字)骆驼 有意义(可以以字母,下划线,美元符号,人民币符号开 ...

  8. C语言---程序的一般形式、数据类型、常量变量、运算符、表达式、格式化输入输出

    1. 程序的一般形式 (1)注释 ① 分类:单行注释( // ): 注释一行.多行注释( /**/ ): 在这个区间内,都属于多行注释,可以换行. ② 作用:提示代码的作用,提示思路   不写注释的后 ...

  9. 1、C#基础：变量、运算符、分支、循环、枚举、数组、方法 <转>

    转自:海盗船长 链接:http://www.cnblogs.com/baidawei/p/4701504.html#3241882 C#..Net以及IDE简介 一.什么是.Net? .Net指 .N ...

随机推荐

  1. JVM(五)-垃圾收集器入门

    概述: 大家都知道java相较于c.c++而言最大的优点就是JVM会帮助程序员去回收垃圾,实现对内存的自动化管理.那为什么程序员还需要去了解垃圾回收和内存分配?答案很简单,当需要排查各种内存溢内存泄漏 ...

  2. Fiddler 4的安装

    1.双击FiddlerSetup_2.0.20194.413.exe安装包 2点击同意 3.傻瓜式安装即可 4.安装完就是这个样子 5.然后点这个 然后不管出现什么都点yes(或者是),最后点击ok ...

  3. Django+Nginx+uWSGI生产环境部署

    生产环境中的数据流 参考文档: wsgi详解:https://blog.csdn.net/li_101357/article/details/52748323 wsgi协议介绍(萌新版):https: ...

  4. 第8.26节 重写Python类中的__getattribute__方法实现实例属性访问捕获

    一. 引言 在<第7.23节 Python使用property函数定义属性简化属性访问的代码实现>和<第7.26节 Python中的@property装饰器定义属性访问方法gette ...

  5. Android的intent

    title: Android基础01 date: 2020-02-15 17:17:04 tags: 1.Intent Intent可以让活动进行跳转.使用方式有两种,一种是显式,另一种是隐式. 1. ...

  6. Hbase的基本原理(与HIVE的区别、数据结构模型、拓扑结构、水平分区原理、场景)

    重点:HBase的基本数据模型.拓扑结构.部署配置方法,并介绍通过命令行和编程方式使用HBase的基本方法. HBase:一种列存储模式与键值对相结合的NoSQL软件,但更多的是使用列存储模式,底层的 ...

  7. 一台电脑上同时安装python2和python3

    被python2的编码问题整的快晕了,python3对编码问题解决的不错 所以想安装下python3,但由于目前企业大多还是用python2,所以不想卸载2,让python2和python3共存. 本 ...

  8. 团队项目6——Alpha阶段项目复审

    复审团队 广东靓仔六强选手 复审员 钟俊豪(3118005122) 复审内容 小组名称和链接 优点 缺点&Bug报告 最终排名 代码敲不队https://www.cnblogs.com/pip ...

  9. bootstrap table处理后台返回的数据

  10. VMware虚拟机下Centos8 设置静态IP地址

    缘起 我们在平时学习Redis.Nginx等分布式微服务的组件的时候,无法避免的需要用到Linux操作系统,而Linux操作系统的主机来源差不多就三种情况: 真实物理机 阿里云等云服务器 利用虚拟机 ...