js基础

js引入方式

1. 行内：几乎不用

// JS引入的方式与css一模一样：标签不同
div class="box" onclick="alert('hello world')"></div>

2. 内联：次之

<script>
        alert('俺又来了');
</script>

3. 外联:首选

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

js注释

    <!-- JS注释的快捷方式
        1. ctrl + /  行注释（单行）
        2. ctrl + shift + /  块注释（多行）
    -->

js常用的几句话

1. alert() 弹出框（流氓框）：不点击看不到任何别的效果
   alert('hello world');
2. console.log('要输出的内容')，在控制台输出（使用特别多）
   console.log('hello world');
3. prompt('提示信息')：给用户弹出一个输入框，可以用来获取用户的数据
   prompt('请输入你的名字');
4. document.write('要输出的内容')：将内容写入到body（用户可见）
   document.write('被子');

变量

// 变量：可以改变的量，js中一种特有的语法，
// 用来保存数据的（保存数据的目的：为了可以随时使用）

变量语法

  let        名字      =      值;    // 定义变量
意思：建立一个符号 叫做名字  在内存中存在，值为保存的值
  let        name     =       '张三';
建立一个  name 符号，代表的数据是  '张三'

在后面：可以随时随地通过  name 这个符号  找到  '张三'

js数据类型

数据类型：data type，人为的将数据划分成不同的类型
划分的目的是为了分类管理：效率高

// JS数据分类两大类

//基础数据类型（简单数据类型）：数据简单
//  5种：3种常用，2种不用（少）
  number：数字类型，整数、小数  正数、负数
  string：字符类型，有引号就是字符串
  boolean：布尔类型，两个值：true和false

  undefined：未赋值（空值）
  null：空（特殊对象）

// typeof可以获取数据的类型：typeof 数据 或者 代表数据的变量

   console.log(typeof 1);      // number
   console.log(typeof 'a');    // string
   console.log(typeof true);   // boolean

js运算符-算术运算符

   // 算术运算：+ 、 - 、 * 、 /  、 %
   //  +：左边数据 + 右边数据  求和
   //  -：左边数据 - 右边数据  求差
   //  *：左边数据 * 右边数据  求积
   //  /：左边数据 ÷ 右边数据  求商
   //  %：左边数据 % 右边数据  求余
   

js运算符-字符串拼接符

// 在JS中 +不一定代表算术加法，有可能是字符串的连接符（拼接符）
let a = 1;
let b = 2;

console.log(a + b);     // 1 + 2 = 3

// 如果+两边只要出现有一个字符串（带引号的家伙），就不会进行算术预算，转成字符串拼接
let c = '1';
console.log(a + c);     // 1 + '1' = '11'

document.write(a + '+' + c + '=' + a + c);

js运算符-特殊情况

// 除法运算和模运算：除数是不能为0的
1 / 0;        // 可以除：无穷大

// JS中允许除数为0：得到的结果是无穷：
// 正无穷：Infinity  ∞
// 负无穷：-Infinity -∞
console.log(1 / 0, -1 / 0);

js运算符-复合运算符

// 便捷运算：如果一个变量已经存在，需要修改这个变量（改变大小），可以采用复合算术运算符
/*
    +=：a += 1   ===== a = a + 1
    -=：a -= 1   ===== a = a - 1
    *=: a *= 1   ===== a = a * 1
    /=：a /= 1   ===== a = a / 1
    %=：不会这么用
*/
let age = 1;
    age += 1;       // age = age + 1;

js内置对象

Math：数学，系统提供的一个内置对象（语言的设计者已经提供好的）：开发人员只要用即可

// 输入Math后，再输入一个.
console.log(Math.ceil(0.4));        // 1
console.log(Math.floor(0.4));       // 0
console.log(Math.round(0.4));       // 0
console.log(Math.round(0.5));       // 1

// 随机数
console.log(Math.random());

ES6语法扩展-const常量

// 变量：存储的数据可以随时被改变
let name = '张三';
name = '李四';
console.log(name);

// 如果数据不希望改变：从服务器拿到的数据
// 常量：可以解决
/*
    定义常量：常量不可声明
    const 常量名 = 值;      // 这辈子都是固定
    使用：常量名
*/
const age = 18;
console.log(age);

// 1. 常量不能声明：因为不能被赋值
const dog;    //错误

ES6语法扩展-const常量

模板字符串：反引号字符串就是模板字符串
模板字符串就是普通字符串
特性：

1. 模板字符串的特性：就是可以换行

//（单双引号都不可以）
   let str2 = '

         ';     

// 方便写标签
let str3 = `
    <ul>
        <li>隔壁老李1</li>
        <li>隔壁老李2</li>
        <li>隔壁老李3</li>
        <li>隔壁老李4</li>
        <li>隔壁老李5</li>
    </ul>
`;

2. 模板字符串中间可以解析变量

let name = '张三';
let age = 18;
// 模板字符串解析：字符串里面使用 ${ 变量或者其他数据}
// 输出字符串：我叫  张三  我的年龄是 18
document.write(`我叫  ${name}  我的年龄是 ${age}`);