JS 基础语法

最新推荐文章于 2024-07-26 11:41:15 发布

web扶风仁

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量86

点赞数

分类专栏： HTML 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55345305/article/details/114796484

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML 、CSS、JS 之间的关系

HTML：设计页面的内容（决定页面中有什么）
CSS：设计页面的样式（决定页面长什么样）
JS：设计页面的逻辑（决定页面能干什么）
通过JS可以修改页面中的HTML和CSS；

JS 变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js变量</title>
</head>
<body>
     
</body>
</html>
<!-- 第一种，通过script标签的src属性引入外部js文件 -->
<!-- <script src="./引入一个外部js文件"></script> -->
<!-- 第二种，直接在script标签内部写 -->
<script type="text/javascript">
    // script：脚本
    // 传统的页面脚本中也有用vb写的，此时type值应该为text/vbscript，但现在已经统一使用js写脚本，所以type值应该为text/javascript（默认）。

    // 变量的定义：用来记录或者保存一个数据的值。
    
    // 变量声明的格式：var name; （var是variable的缩写，意思是变量；其中name表示变量名）
    // 每行代码结束后，可以添加一个分号表示结尾（当然也可以不加）。大部分语言：C、C++、C#、OC、Java等语言结束必须加分号（不加会报错）。所以为方便大家以后学习（转型）其他语言养成良好习惯，我们在js语言中一般都加上分号（官方不推荐加分号）。
    var age = 10;

    // 变量名的要求：不能是js的关键字、不能以数字开头、不能包含运算符（+-*/%）、特殊符号（除了下划线_和$符号）
    // 关键字：https://www.runoob.com/js/js-syntax.html

    // 变量名的规范：不要使用一些简单的语义又不明确的变量，比如：aaa、bbbb、fasjkfjkasjfk。一般都是根据这个值所要表达的含义来命名。例如：姓名name、年龄age、性别gender……，如果变量名要多于两个单词，一般我们使用小驼峰：第一个单词的首字母小写，后面每个单词的首字母大写，比如：myFriend、goodsInfo、recordMenu、borderBottomColor……
    var score = 80;

    // 在控制台（console）打印（log）
    console.log(score);

    // 变量之间是可以相互赋值的
    score = age;
    console.log(score);

    // 变量赋值可以是一个表达式
    // 表达式：是由数字、算符、数字分组符号（括号）、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合。
    score = age + 8 + 5;
    console.log(score);

    // 在控制台上打印数据的几种类型：
    console.error("错误日志");
    console.warn("警告日志");
    console.log("普通日志");
    console.info("信息日志");
    console.debug("调试日志");

    // 输出到页面中
    document.write("hello world!");
    // ln自带换行（在页面中变成空格）
    document.writeln("hello world!<br>");
    // 里面的内容可以是标签
    document.writeln("<p>hello world!</p>");
    // 转义字符 
    document.writeln("&lt;p&gt;hello world!&lt;/p&gt;");
    
</script>

JS 基本数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js基本数据类型</title>
</head>
<body>
    
</body>
</html>
<script>
    // JavaScript 数据类型
    // 值类型(基本类型)：字符串（String）、数字(Number) 、布尔(Boolean) 、对空（Null）、未定义（Undefined）、Symbol。
    // 引用数据类型：对象(Object) 、数组(Array) 、函数(Function) 。

    // 数字(Number)：数字类型的数据可以进行五则运算（+、-、*、/、%），可以表示正数、负数、整数、小数；
    var num1 = 5;
    var num2 = -5;
    var num3 = 3.141526;
    console.log(num3);
    // 0x开头的数字表示16进制的数字
    var num4 = 0xef5;
    // e*16^2 + f*16^1 + 5*16^0 = 3584 + 240 + 5 = 3829
    console.log(num4);
    // 0b开头的数字表示2进制的数字
    var num5 = 0b100110;
    // 1*2^5 + 0*2^4 + 0*2^3 + 1*2^2 + 1*2^1 + 0*2^0
    // 1*2^5 + 1*2^2 + 1*2^1  = 32 + 4 + 2 = 38
    console.log(num5);
    // 十进制想转其他进制：一直除以对应的进制数，余数倒着写即可。

    // 字符串（String）：用于记录一段文本内容，比如：人的姓名、家庭地址、备注信息等。
    // 定义字符串时，值需要用双引号或者单引号包裹起来。
    var address = "大健康产业园";
    var info = '晋味轩北侧丰巢';
    console.log(info);
    // 字符串中的内容还可以是数字（但是它仍然是字符串类型）
    var str = "123";
    console.log(str);
    // 字符串中的内容还可以什么都不写（空字符串）
    var emp = "";
    console.log(emp);
    /*
    // 拓展：
    // 在js中==表示判断，只判断值（内容）是否相等；
    console.log(emp == null);
    // " "：字符串空格，表示你在A4纸上，写了一个空格。
    // ""：空字符串，你只有一张A4纸（上面什么也没写）
    // null：表示空，你连A4纸都没有。
    // 在js中===表示判断，不仅判断值（内容）是否相等并且数据类型也得一样；
    console.log(null == undefined);// true
    console.log(null === undefined);// false
    */
   
    // 布尔(Boolean)：表示两种情况，一般有两个取值真(true)和假(false);
    // 表示灯的开关
    var isClose = true; // 关着
    isClose = false; // 开着
    // 表示是否售罄
    var isSellout = true;
    isSellout = false;
    
</script>

JS运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js运算符</title>
</head>
<body>
    
</body>
</html>
<script>
    /****************************************************************/
    // =：赋值运算符：把等号后面的值或表达式赋给等号前面的变量。
    var a = 10;
    a = 1 + 2 + 3;
    console.log(a);

    // 算数运算符：+、-、*、/、%
    // +：可以用于计算两个数字的和（也可以用于字符串拼接）
    // 加法：
    var num1 = 5;
    var num2 = 8;
    var num3 = num1 + num2;
    console.log(num3);
    // 拼接：
    var str1 = "he";
    var str2 = "llo";
    // var str3 = str1 + str2; // hello
    // var str3 = str1 + num2; // he8
    // var str3 = 1 + "2"; // 12
    // var str3 = "1" + 2; // 12
    // console.log(str3);
    // 当 + 两侧只要有字符串时，会先将数字强转为字符串，然后进行字符串拼接。

    // -：可以用于计算两个数字的差
    var num4 = num2 - num1;
    console.log(num4);
    var num4 = "10" - 6; // 4
    console.log(num4);
    var num4 = 10 - "6"; // 4
    console.log(num4);
    var num4 = "10" - "6"; // 4
    console.log(num4);
    var num4 = "10 - 6"; // 10 - 6
    console.log(num4);
    // 当 - 两侧有字符串时，都会将这个字符串强转为数字（纯数字字符串能成功转为数字，非纯数字字符串将转化为NaN：Not a Number，NaN参与一切运算都还是NaN），然后进行减法运算。
    var num4 = "10" - "0a10"; 
    console.log(num4);
    // PS：这里的非纯数字字符串需要排除掉16进制"0x"和二进制"0b"，这个能成功转化；
    // console.log(NaN != NaN); // true
    console.log(NaN < NaN);
    // PS：NaN参与一切运算都还是NaN，但是在判断时NaN != NaN是真的，其他都是假的

    // *和/的结论和-是一样的。

    // %：表示取余数（的结论和-是一样的）
    console.log(num2 % num1);
    console.log(102101 % 2);
    console.log(10 % "3a");

    // 测试：
    var res = 10 + "10" / 2 + "10" - 10 / "2" + "100"
    console.log(res); // 1505100
    

    /****************************************************************/
    // 自增、自减：++、--
    // ++/--在前表示先自增/自减，再取值；++/--在后，表示先取值，再自增/自减
    var num5 = 5;
    num5++;
    console.log(num5); // 6
    /*
    var a = num5++;
    console.log(a); // 6
    console.log(num5); // 7
    */
    /*
    var a = ++num5;
    console.log(a); // 7
    console.log(num5); // 7
    */
    /*
    //  = 6(num5=7) + 8(num5=8) + 8%3(num5=9)*9
    var res = num5++ + ++num5 + num5++%3*num5;
    console.log(num5); // 9
    console.log(res); // 32
    */
    /*
    // = 5(num5=5) + 5(num5=4) + 5(num5=5) - 5(num5=4)%4 + 4(num5=5)* 4(num5=4)
    var res = --num5 + num5-- + ++num5 - num5--%4 + num5++*--num5;
    console.log(num5); // 4
    console.log(res); // 30 
    */

    // 测试：求a和c的值
    // var a = 3; var c = a++ + ++a + a-- + --a; 
    // console.log(a); // 3
    // console.log(c); // 16


    /****************************************************************/
    // +=、-=、*=、/=、%=
    var a = 3;
    a += 10; // ==> a = a + 10;
    a -= 10; // ==> a = a - 10;
    a *= 4; // ==> a = a * 4;
    a %= 7; // ==> a = a % 7;
    console.log(a);


    /****************************************************************/
    // 比较运算符：>、>=、<、<=、==、===、!=
    // 比较的结果是一个boolean类型的值
    var flag = num1 > num2;
    console.log(flag);
    var flag = num1 != num2;
    console.log(flag);
    // ==：比较值一样
    console.log(5=="5");
    // ===：比较值一样并且类型也一样
    console.log(5 === "5");


    /****************************************************************/
    // 逻辑运算符：&&、||、!
    // &&：表示并且(只有两边都为true整体才是true)
    // 特点：true&&true=true; true&&false=false; false&&true=false; false&&false=false;
    // ||：表示或者(两边只要有一个true整体就是true)
    // 特点：true||true=true; true||false=true; false||true=true; false||false=false;
    // !：取反（非）
    // 特点：!true=false; !false=true;
    var x = 12; var y = 14;
    // console.log(x > 13 || y <= 14); // true
    // console.log(x-- < 12 && ++y > 14); // false
    // var res = ++y > 14 && (true || !(y-- > 12)) && !false;
    // console.log(res);

    // 关于&&和||短路问题（智能判断）
    // &&：如果前面是false，整体的结果已明确就是false，后面执行不执行对整个结果不影响，那么后面干脆就不执行了。
    // console.log(x-- < 12 && ++y > 14); // false
    // console.log(x,y); // 11 14
    // ||：如果前面是true，整体的结果已明确就是true，后面执行不执行对整个结果不影响，那么后面干脆就不执行了。
    // console.log(--x < 12 || y++ > 14); // true
    // console.log(x,y);
    // 注意：这里并不是先算&&（也就是说并不先算y++），因为前面--x < 12已经是true，整体也就确定了，后面不再执行了
    // console.log(--x < 12 || y++ > 14 && x > 15);
    // console.log(x,y);

    /*
    javaScript中运算符的优先级
    . [] ()                 字段访问、数组下标、函数调用以及表达式分组
    ++ -- - ~ !             一元运算符
    * / %                   乘法、除法、取模
    + - +                   加法、减法、字符串连接
    << >>                   移位
    < <= > >=               小于、小于等于、大于、大于等于
    == != === !==           等于、不等于、严格相等、非严格相等
    &                       按位与
    ^                       按位异或
    |                       按位或
    &&                      逻辑与
    ||                      逻辑或
    ?:                      条件
    = += -= *= /= %=        赋值运算
    */

    // (补充：&和|)：不会短路（并且得到的结果是值类型）
    // console.log(12&10);

</script>

web扶风仁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 基础语法

HTML 、CSS、JS 之间的关系HTML：设计页面的内容（决定页面中有什么）CSS：设计页面的样式（决定页面长什么样）JS：设计页面的逻辑（决定页面能干什么）通过JS可以修改页面中的HTML和CSS；JS 变量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
复制链接

扫一扫