JavaScript 初探 - 1

最新推荐文章于 2024-11-13 15:29:17 发布

chihiro1122

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量188

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/chihiro1122/article/details/129293668

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-cale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <tital>Javascript</tital>
       
    </head>
    <body>
        <script>
            alert('来输入弹窗中输入 “你好” ');
            alert('来输入弹窗中输入 “你好” ');
        </script>
    </body>
</html>

浏览器本身是不会执行js代码的，而是通过内置JavaScript引擎（解释器）来执行js代码的，js引擎执行代码是逐行进行解释的，每一句源代码（转换为二进制的机器语言），然后有计算机取执行，所以JavaScript属于脚本语言。

如上述例子中的两行 alert 代码，都是注逐一执行的。

JS 的组成

JavaScript语法（ECMAscript）

页面文档对象模型（DOM）

浏览器对象模型（BOM）

单行注释：ctrl + /

多行注释： shift + alt + a

JS的书写位置

JS有3种书写位置，分别是：行内，内嵌和外部。

行内式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-cale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <tital>Javascript</tital>
       
    </head>
    <body>
        <!-- 1. 行内式的JS 直接学到元素的内部 -->
        <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
    </body>
</html>

如上述例子中的input 的直接写到元素内部的Js。

行内式主要应用于少量JS在HTML标签的事件属性中，需要注意的是在Js中推荐使用单引号。

但是这种写法不方便阅读，检查。

内嵌式

在我们的css中，我们是在style中来写的，而在js中，我们在head中的script中写的JS就叫做内嵌式的Js。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-cale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <tital>Javascript</tital>
        <script>
            alert('周杰伦');
        </script>
       
    </head>
    <body>
    </body>
</html>

在script中写的Js 就叫做内嵌式的Js。

外部的Js

我们在文件中创建一个js的文件，在这个文件中写的Js，在关联到我们的html中，这个就是外部写的Js。

关联js文件：

在script内部引入js文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-cale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <tital>Javascript</tital>
        <script src="myjs.js">

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



// myjs.js 文件
alert('周杰伦')

需要注意的是，当我们在script中引入了Js文件之后，在script中是不能写代码的。

输入输出语句

alert(msg）	浏览器弹出警示框
cousole.log(msg)	浏览器控制台打印输出信息
prompt(info)	浏览器弹出输入框，用户可以再次输入

prompt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-cale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <tital>Javascript</tital>
        <script >
            // 输入框
            prompt('请输入你的年龄');
             // 警示框 展示给用户
            alert('计算的结果是');
        </script>
    </head>
    <body>
    </body>
</html>

console是给程序员看的，我们在浏览器中按下 F12 就可以看见如下图所示的 console，在其中就可以看到代码中console中写的内容。

变量的使用

JavaScript是一个编程语言，所以我们可以使用变量来实现一些操作。

申明变量

var 变量名;

var是varirble的缩写，在JS中申明一个变量就是用var前缀加上变量名就可以了。

        <script >
            // 申明一个age变量
            var age;
            // 赋值
            age = 10;
            // 输出结果
            console.log(age);
        </script>

例：

弹出一个输入框，让用户输入姓名，再弹出一个对话框，输出刚刚用户输入的名字。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-cale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <tital>Javascript</tital>
        <script >
            var name;
            name = prompt('请输入你的名字');
            alert('你的名字是' + name);
        </script>
    </head>
    <body>
    </body>
</html>

JavaScript是一种弱类型的，动态语言，所以在申明变量的时候，变量的数据类型是通过等号右边的值来确定的，不需要如 int age；这种形式来申明变量。而且JavaScript中变量的的数据类型是可变的。

var str = 10 ;       // 数字形
str = 'javascript';  // 字符串形

JS中数据类型的分类

简单数据类型	说明	默认值
Number	数字形，包含整形值和浮点形值	0
Boolean	布尔类型，true , false 等价于 1 和 0	false
string	字符串类型，如‘张三’
Undefined	在声明变量的时候没有进行赋值，那么这个变量的值就是Undefined	Undefined
Null	var a = null; 赋值为空	null

不同进制的表示

十进制：
取值数字 0-9；不用前缀。
二进制：
取值数字 0 和 1 ；前缀 0b 或 0B。
十六进制：
取值数字 0-9 和 a-f ；前缀 0x 或 0X。
八进制：
取值数字 0-7 ；前缀 0o 或 0O 或 0 。

数字型的范围

 <script >
            // 求最大/最小值
        alert(Number.MAX_VALUE);  // 1.797631348623157e + 308
        alert(Number.MIN_VALUE);  // 5e - 324
 </script>

数字型的三种特殊值

Infinity，代表无穷大，大于任何数值。

-Infinity，代表无穷小，小于任何数值。

NaN，Not a number ，代表一个非数值。

 <script >
            // 求最大/最小值
        alert(Number.MAX_VALUE * 2);  // Infinity
        alert(-Number.MAX_VALUE * 2);  // -Infinity
        alert('张三' - 100);  // NaN
</script>

isNaN方法

<script >
            // 判断非数字，返回一个值，是数字返回 fasle 不是数字返回true
        alert(isNaN(12));  // fasle
        alert(isNaN('张三')); //true
</script>

字符串类型

凡是用‘’ 或者是 “” 引起来的都是字符串。

字符串中想使用引号采用外单内双或者是外双内单的方式来使用。

在字符串中同样可以使用 “ \ " 来实现一些操作：

转义字符	说明
\n	换行符
\ \	斜杠\
\'	' 单引号
\"	" 双引号
\t	tab 缩进
\b	空格

字符串长度

<script >
            // 检测获取字符串的长度 length
            var str = "hello world";
            alert(str.length); //10
        </script>

JS里的字符串是可以进行拼接的，数值相加，字符相连。

<script >

            var name = '张三';
            var age = 18;
            alert('哈哈' + '呵呵');//哈哈呵呵
            alert('我是' + name);//我是张三
            alert("张三" + true);//张三true
            alert(12 + 12);//24
            alert('12' + 12);//1212    
            alert('我今年' + age + '岁');        
        </script>