学习总结一、javascript基础

JavaScript入门

1、JavaScript介绍

JavaScript (简称 JS ) 是一种具有函数优先的轻量级、解释型的编程语言。它作为开发Web 页面的脚本语言而出名的，简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言（但是它也被用到了很多非浏览器环境之中，比如Node.js，用于服务端）。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。

2、JavaScript发展

JavaScript历史

在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。

为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

ECMAScript

因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。

所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。

那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。

JavaScript版本

JavaScript语言是在10天时间内设计出来的，虽然语言的设计者水平非常NB，但谁也架不住“时间紧，任务重”，所以，JavaScript其实有很多设计缺陷。

此外，由于JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。自此，ECMAScript 每年发布一次新标准。本文档目前覆盖了最新 ECMAScript 的草案，也就是 ECMAScript2020。

由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这就导致你在写JavaScript的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。

不过，JavaScript的核心语法并没有多大变化。我们的教程会先学习JavaScript最核心的用法，然后，后面课程会有针对ES6讲解新增特性。整个 JavaScript 的学习，主要为三部分:

  • ECMAScript 语言核心

  • BOM 操作

  • DOM 操作

3、第一个示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>js hello world</title>
        <!--头部嵌入js代码-->
        <script type="text/javascript">
            document.write("hello js -- head");
        </script>
    </head>
    <body>
        
        <script type="text/javascript">
            // 输出内容
            document.write("hello js1");
        </script>   
        
        <h1>first web....</h1>
        <h1>first web!</h1>
        
        <script type="text/javascript">
            /* 输出内容并换行(配合pre才有换行效果，一般加br实现换行) */
            document.writeln("hello js2 <br>");
            document.writeln("hello js3");
            /* 以日志形式输出内容!*/
            console.log("OK!");
        </script>   
    </body>
</html>
​

JavaScript代码可以直接嵌在网页的任何地方，需要通过<script>包含起来。另外:

  • 如果 script 标签不闭合，会导致页面渲染出问题

  • 浏览器渲染 html 是从上到下的，所以，前面的 script 会比后面的先执行

  • 一个页面中可以有多个 script 块

  • 一般来说，会将 script 放到 head 中，但是为了渲染速度，很多时候，会放到 body 的最后

  • js注释一般有单行注释//和多行注释/**/。

JavaScript代码还可以放在外部独立的js文件中。

hello.js:

document.write("hello world!");

test.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>引入外部的 JS</title>
    <script src="hello.js"></script>
  </head>
  <body>
​
  </body>
</html>

web页面需要通过script标签引入外部js文件。

4、变量

变量的定义:

  • 使用关键词 var (variable)

  • 在 ES6 中，建议使用 let/const 定义变量和常量

  • 变量实质上就是数据地址的一个别名；另一种说法，变量是数据的一个容器

  • 让反复使用同一个数据，成为了可能

另外:

  • 声明变量千万不要丢掉 var/let/const！不写修饰将被认为是全局变量。

  • 变量的名字，一定要取得有意义。

<script>
        // 局部变量， 不写var，就是全局变量
        var name="jack";
        var age=10;
        //var name="jack",age=10; // 一行定义多个变量
        document.write("姓名：" + name + "<br>");
        document.write("年龄：" + age + "<br>");
            
        // let定义变量
        let myName="tom",myAge=20;
        document.write("姓名：" + myName + "<br>");
        document.write("年龄：" + myAge + "<br>");
            
        // const定义常量,不能重新赋值
        const pi=3.14;
        document.write("π:" + pi);  
</script>

var与let定义变量的区别：

<script type="text/javascript">
        var i = 1;
        if (true) {
            // var 声明变量，可能会类型提升
            var i = 2; // 这里的i和外面的i实际上是同一个变量
            document.write("i1:" + i + "<br>");//2
        }
        document.write("i2:" + i + "<br>"); //2
</script>
        
<script type="text/javascript">
    let j = 1;
    if (true) {
        // let 声明变量，不会类型提升
        let j = 2; 
        document.write("j1:" + j + "<br>");//2
    }
    document.write("j2:" + j + "<br>"); //1
</script>

可以看出，let更接近于Java中变量的规则，更符合我们的常识。

5、数据类型

在JavaScript中定义了以下几种数据类型：

5.1 Number型：

JavaScript不区分整数和浮点数（全都是 64 位），统一用Number表示，以下都是合法的Number类型：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示，比如-1的开方
Infinity; // 表示无限大，当数值超过了js的Number所能表示的最大值时，就表示为Infinity，比如5除以0

Number可以直接做四则运算，规则和数学一致。注意：

  • 浮点数计算偏差，典型的 (1\3)

  • 如果存在过大的数，是不能使用 Number 来表示的；使用内置的对象 BigInt 可以解决之

5.2 String型：

字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。

5.3 Boolean型：

布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：

true; // 这是一个true值
false; // 这是一个false值
2 > 1; // 这是一个true值
2 >= 3; // 这是一个false值
5.4 Undefined型：

如果一个变量没有赋值，那么它的类型就为Undefined。比如：

let a;
let b;
5.5 Null型：

表示空值，对象不存在。事实上，区分Undefined和Null的意义不大。大多数情况下，我们都应该用null，undefined仅仅在判断函数参数是否传递的情况下有用。

5.6 Function型：

把函数赋值给变量存储。

// 1, 传统方式定义函数
function aaa (a, b) {
    console.log(this);       // this: 谁调用的我
    console.log(arguments);  // arguments: 所有入参构成的数组
    return a + b;
}
aaa(); // 函数调用(或window.aaa()）;
​
// 2, 变量方式
let aaa = function (a, b) {
    return a + b;
};
​
// 3, 面向对象
let aaa = new Function("a", "b", "a + b");
​
// 4, 箭头函数 (简洁+this)
let aaa = (a, b) => {
  return a + b;
};
let aaa = (a, b) => a + b;
​
// 调用
aaa(2, 3);  

最后，通过运算符typeof可以知道一个变量具体是何种类型。

let name="tom";
document.write(typeof name); //String

6、JavaScript可以做什么

JavaScript 能够改变 HTML 内容、改变HTML属性值、改变样式（CSS）、表单验证等等。

posted @ 2022-03-03 23:07  凡若沉曦＇  阅读(195)  评论(0)    收藏  举报
js脚本