JavaScript语法

最新推荐文章于 2023-11-16 21:24:52 发布

HERO-WRH

最新推荐文章于 2023-11-16 21:24:52 发布

阅读量161

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_38216661/article/details/81878587

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript代码书写位置

JS代码可以放在标签中
标签可以放在HTML的head中，也可以放在body中。
我们也可以在外部新建一个以.js结尾的JS文件，将JS代码写在其中，然后在HTML的head中用将JS代码引用进来
注意：js文件中，不用

function hello () {
    alert("Hello JavaScript");
}

HTML文件代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            引入外部JS文件
        -->
        <script src="js/myScript.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1>JS文件是放在外部的</h1>
        <input type="button" value="点我" onclick="hello();"/>
    </body>
</html>

注意：type=”text/javascript” 不是必须的，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

JavaScript语法、语句、注释

JavaScript语法、语句、注释都与Java一样

JavaScript变量声明

JavaScript声明变量是用var 而不是使用数据类型

JavaScript数据类型

数字 Number

var num = 5;
var num2 = 3.14
var num3 = 222e5;
var num4 = 222e-5

数字转换为字符串 toString(radix) 方法, 参数表示转换为什么进制的字符串，无参为10进制，其他参数2 8 16

var num = 15;
var a = num.toString(); // 15
var b = num.toString(2); // 1111
var c = num.toString(8); // 17
var d = num.toString(16); // f

isNaN()方法用于判断是否为数字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" id="p1" /><span id="span1"></span><br />
        <input type="button" onclick="hitMe()" value="点我判断输入框内容是否为数字"/>
        <script type="text/javascript">

            function hitMe () {
                var num = document.getElementById("p1").value;
                document.getElementById("span1").innerHTML= !isNaN(num);
            }
        </script>
    </body>
</html>

字符串 String

 var str = "Hello World";
 var str2 = 'Hello';
 var str3 = "My name is 'jack'";
 var str4 = new String("Hello");

注意：尽量使用字面量，而不是使用new String()的方式，这样会影响效率
length 属性：返回字符串长度
charAt(index) 返回在指定位置的字符
indexOf(string) 返回某个指定字符串在字符串中首次出现的位置，如果没有找到就为-1
lastIndexOf(string) 返回最后一次出现的位置
match(reg) 参数为正则表达式，该方法可在字符串内检索指定的值，如果没匹配任何文本，那么就返回null
replace(searchValue, newValue) searchValue为要替换的字符串或者正则表达式，newValue为替换的文本
search(reg) 查找与正则表达式相匹配的值
slice(start, end) 截取字符串，前包后不包，如果为负数，则为倒数
substring(start, end) 截取字符串，前包后不包，只能为正数
substr(start, length) 截取字符串，后一个参数为长度
split(str) 将字符串分割为字符串数组，如果str=”“,那么每个字符都将被分割开
toLowerCase(str) toUpperCase(str) 把字符串转换为小写/大写
trim() 去除字符串两边的空白

布尔 Boolean

var flag = true;

数组 Array

var names = new Array();
names[0] = "刘备";

var heros = new Array("盖伦", "寒冰", "流浪");

var heros2 = ["盖伦", "寒冰", "流浪"];

length属性：返回数组长度
concat() 方法合并数组，括号里可以是一个或多个数组，也可以是一个具体的值。不去重

<script type="text/javascript">
    var heros = ["寒冰", "盖伦", "流浪"];
    var heros2 = ["流浪", "泰坦"];
    var heros3 = heros.concat(heros2);
    document.write(heros3 + "<br/>");
    // 寒冰,盖伦,流浪,流浪,泰坦

    document.write(heros3.concat("大树"));
    // 寒冰,盖伦,流浪,流浪,泰坦,大树

</script>

toString()方法，返回将数组转换为的字符串，数组中的元素用逗号隔开

document.write(heros.toString() + "<br/>");
// 结果：寒冰,盖伦,流浪

join()方法，如果不加参数，那么和toString方法一样，如果加了参数-分隔符，那么元素就是以分隔符隔开，而不是逗号了

document.write(heros.join() + "<br />")
// 结果：寒冰,盖伦,流浪

document.write(heros.join("/") + "<br />");
// 结果：寒冰/盖伦/流浪

includes()方法用来判断一个数组是否包含一个指定的值
push()方法，增，在数组最后添加一个或多个元素，返回数组长度

var num = heros.push("牛头");
document.write(heros.toString() + " 改变后长度：" + num + "<br />");

// 寒冰,盖伦,流浪,牛头 改变后长度：4

pop()方法，删除数组最后一个元素并返回删除的元素
var str = heros.pop(); document.write(heros.toString() + " 被删除的元素: " + str + "<br />");
shift()方法，删除并返回数组第一个元素
splice(index, howmany, item…)方法，删除或修改数组, index表示从哪开始删除或修改，howmany表示要删除多少条数据：如果缺省了表示，删除index后面的所有数据
slice(start, end)方法，截取数组，前包后不包
sort() 方法用于对数组的元素进行排序，默认按字母升序

var numArray = [83,34,545,23,3,5,63,22];
document.write(numArray.sort() + "<br />"); // 22,23,3,34,5,545,63,83
document.write(numArray.sort(function(a, b){return a - b}) + "<br />"); // 3,5,22,23,34,63,83,54
// 字符串默认升序排，如果要降序排，只需要反转就O了

reverse() 反转数组的元素顺序
冒泡排序, 逻辑：
- 对相邻的元素进行两两比较，顺序相反则进行交换，这样每一轮就可以将最小或最大的数浮到顶端

function bubbleSort (arr) {
    var temp;
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}


function showArr (arr) {
    document.write(bubbleSort(arr) + "<br />");
}

<input type="button"  value="点我排序" onclick="showArr(numArray);" />

对象 Object

var hero = {name:"寒冰", price:450};
var hero2 = new Object();
hero2.name="盖伦"；
hero2.price=450;
hero2.sex="男";
document.write(hero2.name);

未定义的 Undefined

var x; // 现在x的类型为undefined

空 Null 表示一个”没有值”的值

Math对象

PI属性返回圆周率
abs(x) 返回x的绝对值
ceil(x) 对x进行上舍入
floor(x) 对x进行下舍入
round(x) 对x四舍五入,他的本质是+0.5再向下舍入
random() 返回0-1之间的随机数

document.write(Math.round(11.5) + "<br />"); // 12
document.write(Math.round(-11.5) + "<br />"); // -11

// 得到0-1的随机数，包含0，不包含1
document.write(Math.random() + "<br />");
// 得到1-10之间的随机整数
document.write((Math.floor(Math.random() * 10) + 1) +"<br />");
/*
 * 得到a-b之间的随机数整数
 * 第一步: w = b - a;
 * 第二步: num = Math.random() * w
 * 第三步：num = Math.random() * w + a;
 * 第四步：num = Math.floor(Math.random() * w + a);
 * 综上： num = Math.floor(Math.random() * (b -a) + a);
 * 
 */
// 得到 55~99之间的随机数
var num = Math.floor(Math.random() * (99 -55) + 55);
document.write(num + "<br />")

Date对象

Date对象用于处理日期和时间
创建Date对象的4种方式

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

动态显示当前时间案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #showTime{
            background-color: lightgoldenrodyellow;
            width: 500px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
            color: red;
            font-size: 34px;
        }
    </style>
    <script type="text/javascript">
        function fixNum (num) {
            num = num < 10 ? "0" + num : num;
            return num;
        }
        function showTime () {
            // 得到当前时间
            var date = new Date();
            // 得到年月日，时分秒
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var min = date.getMinutes();
            var second = date.getSeconds();
            var week = date.getDay();
            // 如果小于10则加0
            month = fixNum(month);
            day = fixNum(day);
            hour = fixNum(hour);
            min = fixNum(min);
            second = fixNum(second);
            var str = year+"年"+month+"月"+day+"日 "+hour+":"+min+":"+second + "  星期" + week;
            document.getElementById("showTime").innerHTML = str;
            window.setTimeout("showTime()", 1000);
        }

    </script>

    <body onload="showTime();">
        <div id="showTime">
            这里显示时间
        </div>

    </body>
</html>

不同类型相加，会有一定的类型转换

字符串和数字相加：数字转换为字符串

数字和布尔值相加，布尔值转换为 0 或 1

字符串与布尔值相加布尔值转化为字符串

字符串与null相加 null转化为字符串”null”

数字与null相加 null转化为0

null与布尔值相加结果类型为数字

可以大概理解为字符串 > 数字 > 布尔值 = null

typeof操作符

typeof操作符用来检测变量的数据类型

typeof "Jack";                // 返回 string 
typeof 3.14;                  // 返回 number
typeof false;                 // 返回 boolean
typeof [1,2,3,4];             // 返回 object
typeof {name:'John', age:34}; // 返回 object
var stu = null;
typeof stu;                   // 返回object
var teacher;
typeof teacher;               // 返回undefined

注意：数组是一种特殊的对象类型，因此他返回object
如果要判断一个变量是否为数组，可以有2种方法

<script type="text/javascript">
    var arr = [1, 2, 3, 4, 5];
    // 1.通过构造方法来判断
    var str = arr.constructor.toString();
    if (str.indexOf("Array") > -1) {
        document.write("arr是一个数组" + "<br />")
    } else {
        document.write("arr不是一个数组" + "<br />")
    }

    // 通过instanceof来判断
    if (arr instanceof Array) {
        document.write("arr是一个数组" + "<br />")
    } else {
        document.write("arr不是一个数组" + "<br />")
    }
</script>

=== 绝对等于

绝对等于表示要求类型相等

var str = "abc";
var str2 = new String("abc");
a == b; // true
a === b; // false

类型转换

将数字、boolean、date转换为字符串

String(parm) parm可以为变量，数字和表达式
parm.toString() 方法
parm + “” 和字符串相加，自动提升为字符串

将字符串转换为数字

Number(str)
如果str值为数字，那么就得到数字
如果str为”” 或” “, 那么得到0
如果str值不为数字，那么得到NaN

HERO-WRH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript语法

JavaScript代码书写位置

JavaScript语法、语句、注释

JavaScript变量声明

JavaScript数据类型

数字 Number

字符串 String

布尔 Boolean

数组 Array

对象 Object

未定义的 Undefined

空 Null 表示一个”没有值”的值

Math对象

Date对象

不同类型相加，会有一定的类型转换

字符串和数字相加：数字转换为字符串

数字和布尔值相加，布尔值转换为 0 或 1

字符串与布尔值相加 布尔值转化为字符串

字符串与null相加 null转化为字符串”null”

数字与null相加 null转化为0

null与布尔值相加 结果类型为数字

typeof操作符

=== 绝对等于

类型转换

将数字、boolean、date转换为字符串

将字符串转换为数字

字符串与布尔值相加布尔值转化为字符串

null与布尔值相加结果类型为数字