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. MySQL ERROR 1040: Too many connections

    如题,本章主要讲下当服务器出现 ERROR 1040: Too many connections错误时的一些处理心得. max_connections查看 ## 查看最大连接数 SHOW VARIAB ...

  2. PyQt（Python+Qt）学习随笔：QMainWindow的setDockNestingEnabled作用案例图解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 QMainWindow的setDockNestingEnabled的作 ...

  3. js原生方法reduce实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. bootstrap table 嵌入百分比进度条

  5. LibreOj #539. 「LibreOJ NOIP Round #1」旅游路线

    题目链接 做完这道题,我深知当一个问题复杂度过高的时候,把一些可以分离的操作都分散开,可以大幅度降低复杂度..... 发现无论有多少钱,每到一个点后扩展到的距离被限制在 \(min(C, c[i])\ ...

  6. 自定义radio、checkbox的样式

    input标签中的radio和checkbox是很表单中常用的类型,大多时候,默认样式并不能满足我们的需求,所以有了此篇. 自定义样式,由此开启: html: <div class=" ...

  7. 职场中究竟什么是ownership，你是一个有ownership的人吗？

    在互联网行业,我们经常用一个标准去评价一个人,这个标准就是ownership.一个有ownership的员工往往会被认为是出色的,被委以重任,从此升职加薪.而一个被打上了没有ownership的人,往 ...

  8. vue-router 路由传参的几种方式，刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

  9. Git 工作原理以及常用命令操作

    GIT工作原理 要了解GIT工作原理,先了解GIT的这几块区域: 工作区域划分 工作区:指的是本地工作空间,如果刚拉取下来的代码,没有修改的内容,这块区域是空白的 (modified-已修改状态) 暂 ...

  10. oranges 笔记第六章

    OS 第六次实验随笔 第六章6.1-6.3相关的问题 进程状态保存与恢复 哪些状态 何时保存 保存在哪 如何恢复 特权级变换 用户进程到内核 内核回到用户进程 再次理解TSS .堆栈 从外环进入内环( ...