前端基础-JavaScript入门

第2章 入门

2.1 如何写一段JS代码并运行

  • 写在行内
01.html: 
<input type="button" value="按钮" onclick="alert('Hello World')" />
  • 写在script标签中 *
02.html:
<head>
  <script>
    alert('Hello World!');
  </script>
</head>
  • 写在外部js文件中,在页面引入
03.html:
<script src="main.js"></script>
main.js:

alert('Hello World!');

注意点: 引用外部js文件的 script 标签中不可以再写JavaScript代码,即使写了也不会执行,没有作用

温馨提示:

下面开始进入 JS 基础语法的学习,非常枯燥,别睡着……

音乐很优美很动听,但学五线谱真的是乏味无聊痛苦不堪;

2.3 变量

2.3.1 什么是变量

  • 什么是变量

    变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据

  • 为什么要使用变量

    使用变量可以方便的获取或者修改内存中的数据

变量就是存储数据的容器;

2.3.2 如何使用变量

  • var声明变量
var age;
  • 变量的赋值
var age;
age = 18;
  • 同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
  • 同时声明多个变量并赋值
var age = 10, name = 'zs';

2.3.3 变量的命名规则和规范

  • 规则 - 必须遵守的,不遵守会报错

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

    • 区分大小写

    • 不能是关键字和保留字,例如:for、while。

在这里插入图片描述

  • 规范 - 建议遵守的,不遵守不会报错

    • 变量名必须有意义
    • 遵守驼峰命名法。(首字母小写,后面单词的首字母需要大写。例如:userName、userPassword)
  • 下面哪些变量名不合法

    a	    
    1
    age18
    18age
    name
    $
    $name
    _sex
    &sex
    theworld  
    theWorld
    

name变量名,本身不是保留字/关键字, 建议少用。 name在有的浏览器中,是自动声明过的。

2.3.4 案例

  1. 交换两个变量的值
var a = '1';
var b = '2';
//  借助第三个变量
var c = a;
a=b;
b=c;
console.log(a,b);
  1. 不使用临时变量,交换两个数值变量的值
//第二种方式
var num1 = 10;
var num2 = 20;
//计算的方式:累加,然后相减
num1 = num1 + num2;//num1的结果是30
num2 = num1 - num2;//num2的结果是10
num1 = num1 - num2;//num1的结果是20
console.log(num1);
console.log(num2);

2.3.5 代码调试(输出变量)

  1. alert 弹框 :浏览器页面弹框
var num1 = 10;
alert(num1);
  1. console.log() 浏览器console控制台
var num1 = 10;
var num2 = 20;
console.log(num1);
console.log(num1, num2);
  1. document.write() 浏览器页面中
var num1 = 10;
document.write(num1);

2.4 数据类型

2.4.1 简单数据类型

Number、String、Boolean、Undefined、Null

获取变量的类型

typeof

var age = 18;
console.log(typeof age);  // 'number'
Number类型
  • 数值字面量:数值的固定值的表示法(数值直接量)

    110 1024 60.5

  • 浮点数(小数)

  • 浮点数的精度问题

浮点数
	var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数
   var result = 0.1 + 0.2;    // 结果不是 0.3,而是:0.30000000000000004
   console.log(0.07 * 100);
   不要判断两个浮点数是否相等
  • 数值范围

    最小值:Number.MIN_VALUE// 这个值为: 5e-324  5乘以10的-324次方
    最大值:Number.MAX_VALUE// 这个值为: 1.7976931348623157e+308
    无穷大:Infinity
    无穷小:-Infinity
    
String类型

‘abc’ “abc” 单双引号引起来的一连串字符

  • 字符串字面量(直接量)

    ‘程序猿’,‘程序媛’, “黑马程序猿”

    思考:如何打印以下字符串。
    我是一个 “正直” 的人
    我很喜欢 "黑马 ‘程序猿’ "

    注: 转义后单双引号 只能 就近和转义后的单双引号进行配对

  • 转义符

在这里插入图片描述

注: \b 退格符 \f又叫走纸或进纸或 换页符

var s = '我很喜欢   \"黑马  \'程序猿\'  \"';
console.log(s);
  • 字符串长度

length属性用来获取字符串的长度

var str = '黑马程序猿 Hello World';
console.log(str.length);
  • 字符串拼接

字符串拼接使用 + 连接

console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
  1. 两边只要有一个是字符串,那么+就是字符串拼接功能
  2. 两边如果都是数字,那么就是算术功能。
Boolean类型
  • Boolean字面量: true和false,区分大小写
  • 计算机内部存储:true为1,false为0
Undefined和Null
  1. undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined
  2. null表示一个空,变量的值如果想为null,必须手动设置

注: 关于undefined和null是一个面试中很容易被问到的问题

2.4.2 复杂数据类型

​ Object 对象:保存很多数据的一种数据类型

后面详解;

题外话

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

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

console.log('ss',2,null,undefined,true);

2.5 注释

被注释的内容是不执行的,不管什么内容都不会运行;

单行注释

用来描述下面一个或多行代码的作用

// 这是一个变量
var name = 'hm';

多行注释

用来注释多条代码

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

总结:

JS代码的书写,变量的声明方式,数据类型,注释;

发布了2088 篇原创文章 · 获赞 2305 · 访问量 22万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览