您的位置：首页 > Web前端 > JavaScript

Web前端05：JavaScript入门基础、类型、变量

2020-07-28 17:23 267 查看

JavaScript

完整的Javascript语言由三部分组成：

  • 核心（ECMAScript）
  • 文档对象模型（DOM,Document Object Model）
  • 浏览器对象模型（BOM,Browser Object Model）

为什么学习Javascript

  • 所有主流浏览器都支持Javascript
  • 目前，全世界大部分网页都是用Javascript
  • 它可以让网页呈现各种动态效果
  • 作为Web开发工程师，如果你想提供漂亮的网页，另用户满意的上网体验，Javascript是必不可少的工具

浏览器内核

浏览器内核负责页面内容的渲染，主要由两部分组成：

  • 内容排版引擎——解析HTML/CSS
  • 脚本解释引擎——解析Javascript

第一个JavaScript程序

<!DOCTYPE html>
<html>
<head>
<title>我的第一个js程序<title>
<meta charset="utf-8">
</head>
<body>
<script>
alert("欢迎来到JavaScript的世界！");
</script>
</body>
</html>

如何插入Javascript

  • 网页中直接插入脚本块

    使用

JS在页面中的位置

  • 我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
    放在部分
    最常用的方式是在页面中head部分放置

JS的代码错误

  • 解释性语言，若某行代码错误，则解释器终止此次执行；
  • 但不影响后续块的执行，以及后续HTML元素的解析
<script>
document.write("a");  //正常执行
document.writ("b");  //方法名错误
document.write("c");  //语法正确，但未能正确执行
</script>
<script>
document.write("d");  //正常执行
</script>

编写JS代码

  • 语句——会被Javascript引擎解释执行的代码

    由表达式，关键字，运算符组成；

  • 大小写敏感

  • 使用分号或换行结束；

  • 注释——不会被Javascript引擎解释执行的代码

      单行注释 ：//

    • 多行注释： /* */

    大小写敏感

    • 在Javascript程序中大小写是敏感的

      userName ,UserName是不同的

    • getCity(), GetCity是不同

    换行与空格

    • 换行，分号

    • 空格, TAB

    变量

    什么是变量

    1. 变量是存储信息的容器

    2. 在代数中，使用字母（比如：x）来保存值（比如：2）

      x=2; y=3; sum=x+y; 通过三个语句，就能计算出sum的值为5

    3. Javascript中，这些字母就被称为变量

    变量的声明

    • 使用关键字var声明变量，如: var username;

      虽然声明变量时可以省略var关键字，推荐不要省略

    • 使用“=”为变量赋值 var num = 100;

    • 没有初始化的变量自动取值为undefined

      var a;

      alert(a);

    • 一条语句中可以声明多个变量，变量名使用“,”分割

      var name1,name2,name3;

      var num1,num2=20;

    变量的命名要求符合语法

    • 不允许使用语言关键字和保留字作为变量名

    • 预保留的关键字

      class, int ,float等

    命名规范

    • 可以包含字母，数字，下划线，美元符号（$）

    • 不能以数字开头

    • 常用表示函数，变量等的名称

    • 名称最好有明确的含义

    • 可以采用“小驼峰命名法”，“大驼峰命名法”，“下划线命名法”等，在开发团队内进行协调统一

    未经初始化的变量

    • 变量定义之后，在使用前从未赋过值，值为undefined
    var num;	//定义变量，但未赋值

alert(num);	//直接使用未被赋值的变量
    • 变量未被定义过，而直接使用，属于语法错误
    alert(num);	//直接使用从未定义的变量

    初始化变量

    在变量声明时初始化

    可以在定义变量时立即进行初始化

    var age=10;

var gender=“男”；

var email=“wangming@163.com”;

    第一次使用前初始化

    变量也可以先声明，再赋值

    var name;
var age;
name=“wangming”;
age=“30”;
alert(name);

    对变量的值进行存取操作

    • 获取变量的值——get操作

      var name=“zhangsan”;

      var name2 = name;

    • 重新设置变量的值——set操作

      var password= “123”;

      password=456”;

      newPassword=password;

    数据类型

    • 能够表示并操作的值的类型称作数据类型（type）

    • Javascript数据类型分为两类：原始类型和引用类型（对象类型），原始类型包括特殊类型

    String类型

    • 表示一系列的文 本字符数据，如性别，姓名，住址等

    • 由Unicode字符，数字，标点符号组成的序列

    • Javascript不像Java语言那样严格区分字符和字符串类型

    • 首尾由一对单引号或者双引号括起来

    • 特殊字符需要转移符

    Number类型

    • 数字类型，既可表示32位整数，也可表示64位的浮点数

    • 整数

      十进制， 逢十进一的整数，如：13242

    • 十六进制： 逢十六进一的整数：如：0x123

  • 浮点数

      使用小数点近路数据：如：93.2 ，3.1415

    • 使用指数记录数据：如：4.3e23, 4.3E-23

    boolean类型

    • 布尔类型

      有两个值，true和false

      也代表 1和0

    • 实际运算中true = 1, false = 0

  • 多用于控制结构语句

    • 隐式转换

    • Javascript属于松散类型的程序语言

      变量类型在声明时不需要指定数据类型

    • 变量由赋值操作确定数据类型

  • 不同类型数据在计算过程中会自动进行转换

    数字+字符串：数字转换为字符串

    数字+布尔值：true转换为1，false转换为0

    字符串+布尔值：布尔值转换为字符串true或false

    布尔值+布尔值：布尔值转换为数值1或0

    typeof()函数可用于检测 当前数据的类型

    • // 隐式转换
// 数据与字符串
var a=2,b="xyz"
var c=a+b;
console.log(c+"---"+typeof(c));

// 数据和布尔类型
var a=2;
var b=a+true
console.log(b+"---"+typeof(b));

// 字符串和布尔类型
var a="xyz";
var b=a+true
console.log(b+"---"+typeof(b));

// 布尔类型和布尔类型
var a=true+false
console.log(a+"---"+typeof(a));

    数据类型转换函数

    使用数据类型转换函数进行显式类型转换

    toString()

    转换成字符串，所有数据类型均可转换为string类型
    // 显式转换
// 转换为字符串类型
var a=123;
var str=a.toString();
console.log(str+"----"+typeof(str));

    parseInt()

    解析出一个string或number的整数部分

如果没有可转换的部分，则返回NaN（Not a Number）
    // 显式转换

// 转换为Int类型
var a=123.456,c="123xyz789.456";
var b=parseInt(a);
var d=parseInt(c);
console.log(b+"---"+typeof(b));
console.log(d+"---"+typeof(d));

    parseFloat()

    解析出一个string的浮点数部分

如果没有可以转换的部分，则返回NaN
    // 显式转换

// 转换为Float类型
var a=123.456;c="1234xyz.9";
var b=parseFloat(a);
var e=parseFloat(c);
console.log(b+"---"+typeof(b));
console.log(e+"---"+typeof(e));

    Number()

    把一个string解析为number

如果包含非法字符，则返回NaN
    // 显式转换

// 转换为number类型
var a="123.4a";
var b=Number(a);
console.log(b+"---"+typeof(b));

    isNaN函数

    isNaN()

    • 用于判断其参数是否为一个“非数字（NaN）”值

    • 如果把NaN与任何值（包括其自身）相比得到的结果均是false,所以要判断某个值是否是NaN

    • 通常用于检测类型转换函数的运算结果，以判断它们表示的 是否是合法的数字。

      alert(isNaN("123.4a")); 结果为true

alert(isNaN(parseInt("123.4a")));结果为false

alert(isNaN(parseFloat("123.4a")));结果为false

alert(isNaN(Number("123.4a")));结果为true

    null

    • 存在该数据，但当前还不存在确定的值

    • Null在程序中代表“无值”或者“无对象”

    • 可以通过给一个对象赋值null来清除变量的内容

    undefined

    • 不存在该数据

    • 声明了变量但从未赋值或者对象属性不存在

    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航