2021-10-15

最新推荐文章于 2022-10-02 16:00:00 发布

心怡的文静

最新推荐文章于 2022-10-02 16:00:00 发布

阅读量176

点赞数

分类专栏： JavaScript 文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_46459597/article/details/120789134

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS的三种书写方式:行内内嵌和外部


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式js -->
    <script>
        // alert('沙漠骆驼')
    </script>
    <!-- 外部JS写法 -->
    <script src="my.js"></script>
</head>
<body>
    <!-- 行内式js 直接写到元素内部 -->
    <!-- <input type="button" value="唐伯虎" onclick="alert('秋想借')"> -->
</body>
</html>

行内：

<input type="button" value="唐伯虎" οnclick="alert('秋想借')">

内嵌：

<script>

// alert('沙漠骆驼')

</script>

外部：(外部文件)

<script src="my.js">这里不能写代码切记</script>

单行注释：

//1.单行注释

多行注释：

/* 多行注释 */ 默认快捷键shift+alt+a

JavaScript输入输出语句

// 这是一个输入框数据送给后台

prompt('请输入您的年龄');

// alert 输出的弹出警示框展示给用户

alert('计算的结果是');

//console 控制台输出给程序员测试用的

console.log('我是程序员能看到的');

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1声明一个age变量
        var age;    
        // 2赋值
        age = 18;
        //3输出结果
        console.log(age);
        //4变量的初始化
        var myname = '林文静'
        console.log(myname);
    </script>
</head>
<body>
    
</body>
</html>

变量的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //用户输入姓名  存储在myname变量里
        var myname = prompt('请输入您的名字');
        //输出这个用户名
        alert('欢迎'+myname);
    </script>
</head>
<body>
    
</body>
</html>

声明多个变量

        var age = 18;
        var address = '火星车';
        var gz = 2000; 
         等于
        var age = 18;
            addredd = '火影村';
            gz = 2000;

声明的变量的特殊情况

1 ，声明但不赋值结果为undefined

var sex;
console.log(sex);

2，不声明不赋值直接使用某个变量会报错

console.log(tel);

3，不声明直接赋值可以运行单不推荐

qq = 100;
console.log(qq);

变量的命名规范：

1，区分大小写

        var app = 10;
        var App = 100;
        console.log(app);
        console.log(App);

2，不能以数字开头

var 18age = 10;

3，var有特殊意义不能作为变量名

        var var = 10;

4尽量不用name作为变量名

，

交换两个变量值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js是编程语言有很强的逻辑性在里边 先怎么办在怎么办
        //1 我们需要一个临时变量
        //2 把apple1 给临时变量
        //3 把apple2给apple1
        //4 把临时变量给apple2
        var temp;//临时变量为空  
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1); 
        console.log(apple2); 
    </script>
</head>
<body>
    
</body>
</html>

数据类型（简单数据类型，复杂数据类型）

isNaN:判断非数字并且返回一个值

    <script>
        //isNaN()这个方法判断非数字 并且返回一个值 如果数字返回的是false 是数字返回true
        console.log(isNaN(12));      //false
        console.log(isNaN('林文静')); //true
    </script>

String字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 'pink'  '12'  'true'哪怕是数字 只要带引号都是字符串类型 
        // var str = '我是一个高富帅的程序员';
        var str = "我是一个'高富帅'的程序员";/* 外双内单   外单内双都可以 */
        console.log(str);
        //字符串转义字符 都是以\开头 要写到引号里
        var str1 = '我是一个"高富帅\n"的程序员';
        console.log(str1);
    </script>
</head>
<body>
    
</body>
</html>

\n换行

字符串的拼接

1.检测获取字符串的长度

var str = 'my name is body';

console.log(str.length);//15个

2.字符串的拼接 +

console.log('沙漠'+'骆驼');  //沙漠骆驼
console.log('pink老师'+18);  //pink老师18
console.log('pink'+true);   //pinktrue
console.log(12+12);         //24
console.log('12'+12);       //1212
console.log('12+12');       //12+12

显示年龄案例

    <script>
        //1 弹出输入框(prompt) 让用户输入年龄
        var age = prompt('请输入您的年龄');
        //2 把输入的值保存起来 与字符串拼接
        var str = '您今年已经'+age+'岁了'
        //3 alert 弹出结果
        alert(str);
    </script>

布尔型Boolean

    <script>
        var flag = true;
        var flag1 = false;
        console.log(flag+1);  //2        true为1 false为0
        console.log(flag1+1); //1
    </script>

undefined未定义数据类型

 <script>
        //如果一个变量声明未赋值就是undefined
        var str;
        console.log(str); //undefined
        var varible = undefined;//未定义值
        console.log(varible+'pink');//undefinedpink
        console.log(varible+1);  //NaN     undefined和数字相加结果是NaN
        //null  空的
        var space = null;
        console.log(space+'pink');//nullpink
        console.log(space+1);//1   
    </script>

typeof检测数据类型

        var num = 10;
        console.log(typeof num);//number
        var str = 'pink';
        console.log(typeof str);//string
        var flag = true;
        console.log(typeof flag);//boolean
        var var1;
        console.log(typeof var1);//undefined
        var timer = null;
        console.log(typeof timer);//object

        //prompt 取过来的值是字符型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);//string类型的

*****prompt 取过来的值是字符型的

        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);//string类型的

字面量：

字面量就是在源代码中一个固定值的表示方法，通俗来说，就是字面量表示如何表示这个值。

数字字面量：8，9，10

字符串字面量：'黑马程序员'，'大前端'

布尔字面量：true，false

数据类型的转换：

数字型转换为字符串型：

1. 变量.toString();

var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);//字符串String

2 利用String()；

console.log(String(num));
console.log(typeof String(num));

3 **利用+拼接字符串的方法实现转换效果 (隐式转换)

数字加上字符串结果是字符串
var num = 10;
console.log(num+'');

转换为数字类型：

1 . parseInt(变量) 把字符型转化为数字型得到的为整数取整无小数部分

var age = prompt('输入您的年龄');
console.log(parseInt(age));//变为数字型了
console.log(parseInt('3.14'));//3
console.log(parseInt('3.99'));//3
console.log(parseInt('140px'));//140  会去掉单位
console.log(parseInt('rem120px'));//NaN  第一个就是字母识别不了

2 . parseFLoat(变量) 字符转数字型得到的带小数

console.log(parseFloat('3.14'));
console.log(parseFloat('140px'));//140  会去掉单位
console.log(parseFloat('rem120px'));//NaN  第一个就是字母识别不了

3. 利用Number(变量)

var str = '123';
console.log(Number(str));
console.log(Number('12'));

4. 利用算数运算符 * - / 隐式转换
console.log('12'-0);//12
console.log('123'-120);//3
console.log('123'+'120');//123120
console.log('123'*1);//123
- * / 运算时自动把字符串类型转换为数字类型进行运算，加号不能进行转换

计算年龄案例：

    <script>
        var year =prompt('请输入您的出生年');
        var age = 2021-year;//year为字符串类型  用减法 隐形转换 
        alert('您的年龄是'+age+'岁');
    </script>

简单加法计算器的案例：

prompt 输出的为字符串类型需要转换成数字类型

    <script>
        var num1 = prompt('请输入第一个数字');
        var num2 = prompt('请输入第二个数字');
        var sum = parseFloat(num1) + parseFloat(num2);
        alert('总和为' + sum);
    </script>

转换为布尔类型：

代表空否定的值被转换为flase 如:'' 0 NaN null undefined

心怡的文静

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021-10-15

JS的三种书写方式:行内内嵌和外部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫