（2020-10-23）初探javascript

最新推荐文章于 2022-10-23 08:54:24 发布

�橙黄橘绿时。

最新推荐文章于 2022-10-23 08:54:24 发布

阅读量206

点赞数

分类专栏：基础

本文链接：https://blog.csdn.net/Missjuzi/article/details/109249040

版权

基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

知识梳理：

Web网站: 三大技术

(1)HTML(骨骼): 设计网站基本结构; 超文本标记语言
(2)CSS(肉体): 对于结构一种美化/装饰; 层叠样式表
(3)JavaScript(JS)(灵魂): 提供了用户和界面之间的一种交互行为; 行为。

JavaScript介绍:

JS是运行在客户端(浏览器)的脚本语言,是基于事件驱动的弱类型的脚本语言;
浏览器的内核: 渲染引擎和JS引擎。

脚本语言: 是一种解释型的语言	解释性语言是指它常用的执行机制是使用一个“解释器”来执行，解释器对于程序是一句一句“翻译”成机器语言来一句一句执行，例如shell脚本语言。 (将代码翻译一句, 就会执行一句)
编译型的语言:	编译型语言是指它常用的执行机制是使用一个“编译器”来编译成机器语言，然后你就可以直接运行（执行）这个编译成的“可执行文件”。例如C语言你也可以为解释性语言（如shell脚本语言)写个编译器来编译，这样它就成了“编译语言” (将代码编译完成之后统一的来执行)

弱类型语言和强类型语言的区别：

弱类型	是指根据变量的值来确定变量的数据类型，主要是通过 var 定义变量: var a=10
强类型	强类型的变量类型是不能改变的，例如Java, C# , php , python......等

JavaScript基本的构成:

(1)ECMAScript(5.0) ==>ES5: JS基础语法
变量,数据类型,运算符和表达式, 流程控制, 函数, 数组, 对象....

(2)BOM操作(浏览器对象模型): 操作浏览器的一些行为;

(3)DOM操作(重点)(文档对象模型): 操作HTML文档;

JavaScript引入页面的三种方式

(1)行间嵌入;
(2)内嵌嵌入;
(3)外部引入;

这三种方式与css引入方式非常相似。

JavaScript的变量:

变量: 就是指在一段程序中不断变化的量;
变量: 是指内存中存储数据的一种方式;
(1)定义变量: 使用var 关键字定义变量
var 变量名称;
(2)变量的初始化: 相当于给变量赋值
var 变量名称=值;
(3)变量值的访问/获取: 是通过变量名称访问的
var 变量名称=值;
alert(变量名称);

JavaScript变量的名称规范:

(1)变量推荐使用驼峰命名语法: getElementById getName userName;
(2)变量必须是以 $, _ , 字母开头, 变量中可以包含数字,但是不能以数字开头;
(3)可以使用中文, 但是很low, 可读性差;
(4)不能使用JS的关键字和保留字;
(5)变量名称推荐: 要有意义
(6)区分大小写: userName和 username 表示不同的变量

JavaScript变量的数据类型:

基本的数据类型	number(数字),string(字符串),boolean(布尔类型),undefined(未定义类型),null(空类型)
复杂的数据类型	object(对象类型): Array(数组),Date(日期),Math(数学).... function类型函数类型

实例：

(1)number数字类型
    var num_01=10;   num_01  是   number
    var num_02=10.23 num_02  是   number
    (2)string 字符串类型
    var str_01='abc123'   str_01 是 字符串类型 string
    var str_02='123'      str_02 是  字符串类型  string
    (3)boolean 布尔类型  值 true/false
    var bool=true       是  boolean
    var bool_02=false   是  boolean

    (4)undefined 未定义的类型
    var unde;  是  undefined 类型

数据转换方法：

首先我们要知道，数据转换无非三种转换形式：

一、转字符串：

.toString()方法：注意，不可以转null和underfined


var a=true;
console.log(a.toString());

String()方法：都能转

console.log(String(null));

隐式转换：num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串。

var a=true;
var str= a+"";
console.log('str');

二、转为数值类型

Number()：Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN。

console.log(Number(true));

parseInt():将字符串转换成整数，遇到非数字就将其舍弃。

var a="12.3px";
console.log(parseInt(a));

parseFloat(): parseFloat()把字符串转换成浮点数

三、转换为Boolean()：0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true

三种方式调试代码:

(1)alert(); 消息框输出
(2)console.log(); 控制台
(3)document.write(); 写在页面中

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一种内嵌的写法  写在head中 -->
    <!-- <script>
        alert('内嵌JS代码,在运行当前文档的时候就会执行JS代码');
    </script> -->

    <!-- 外部JS引入的第一种方式 -->
    <!-- <script src="js/index.js"></script> -->
</head>
<body>
    <!-- JS嵌入页面的第一种方式:  行间JS -->
    <!-- <input type="button" value="点击" onclick="alert('Hello JavaScript')"> -->
    <input type="button" value="点击" onclick="alert('行间点击事件触发 从而执行JS代码')">


    <!-- 第二种 内嵌写法: 写在body的最下面  推荐 -->
    <!-- <script>
        alert('内嵌JS代码,在运行当前文档的时候就会执行JS代码');
    </script> -->

    <!-- 第二种 外部JS引入的方式 -->
    <script src="js/index.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // (1)基本数据类型
        // 第一: 数字类型  number
        var num_01=1000;
        console.log(num_01); // 1000
        // typeof 可以用来 输出 变量的数据类型
        console.log(typeof num_01);  // number

        var num_02=10.23;
        console.log(num_02);
        console.log(typeof(num_02)); // number

        // 第二: 字符串类型  string
        var str_01='abc';
        // length 获取字符串的长度
        console.log(str_01.length);
        console.log(typeof str_01);

        // 第三: boolean类型
        var bool=true;
        console.log(bool);
        console.log(typeof bool);

        // 第四: undefined 未定义类型
        var undefined_01;
        console.log(undefined_01);
        console.log(typeof undefined_01);

        // 第五:  null 空类型
        // null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
        var null_01=null;
        console.log(null_01); // null

        // (2)符合的数据类型  object
        // var obj=new Object();
        // var num=new Number()
        // console.log(typeof num);  //  object

        var dateDay=new Date();
        console.log(dateDay);
        console.log(typeof dateDay);  // object
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 赋值运算符  +=   

        var a=2; var b=3;
        // console.log(a+=b);  // a=a+b===>5

        // console.log(a-=b); // 2


        // console.log(b+=a); // 5

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

        // console.log((a>b)&& (b<a)); // false

        console.log((a>b) || (b>a));  // true

        console.log(!(a<b)); // false


        



    </script>
</body>
</html>