JavaScript函数变量与字符串输出转义

最新推荐文章于 2024-07-12 11:51:24 发布

micro_hz

最新推荐文章于 2024-07-12 11:51:24 发布

阅读量4.3k

点赞数

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/micro_hz/article/details/49511469

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

分号是语句分割的方法，代码分为代码语句和代码块。
主语JavaScript的大小写敏感。例如刚才一直调试函数function不是Function，导致程序不能正常运行。
代码块是很多语句一起执行。

<html>
<head>
    <title>this is a js page</title>
</head>
<body>
<p id = "test">this is my test</p>
<div id = "test2">this is my test2</div>
<script>
    function myFunction(){
        document.getElementById("test").innerHTML = "hello world!";
        document.getElementById("test2").innerHTML = "hello div!";
    }
</script>
<button type="button" onclick="myFunction()">button</button>
</body>
</html>

可以利用反斜杠\换行。

document.write("hello \
     world!");
     //与document.write("hello world!");等价

变量存放值，输出可以换行：

<html>
<head>
    <title>this is a js page</title>
</head>
<body>
<p id = "test">this is my test</p>
<script>
    document.write("hello world!" + "<br>");
    document.write("micro" + "<br>");
    document.write("xiaoma" + "<br>");
</script>
</body>
</html>

灵活使用变量var

<html>
<head>
    <title>this is a js page</title>
</head>
<body>
<p>x = 5,y = 7</p>
<p id = "test"></p>
<script>
function sum(){
    var a = 5;
    var b = 7;
    var varP = document.getElementById("test");
    varP.innerHTML = "x + y = " + (a + b);
}
</script>
<button type = "button" onclick="sum()">clickme</button>
</body>
</html>

定义数组：
两种方法：

var cars = new Array();
    cars[0] = "Audi";
    cars[1] = "BMW";
    cars[2] = "Tesla";

var cars = new Array("Audi","BMW","Tesla");

JavaScript对象为key - value。如定义一个person对象：

var person = {name : "micro",age : 20,gender : male};

输出对象value:

person = {name : "micro",age : 20,gender : "male"};
    document.write(person["name"] + "<br>");
    //或则person.name方式去访问
    document.write(person.age + "<br>");
    document.write(person.gender + "<br>");

可以使用person = null来置空。

可以声明变量类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

按钮调用函数弹窗：

<html>
<head>
    <title>this is my js page</title>
    <script>
    function myFunction(){
        alert("hello world!");
    }
    </script>
</head>
<body>
<button onclick="myFunction()">try it</button>
</body>
</html>

函数带参数结合弹出框：

<html>
<head>
    <title>this is my js page</title>
    <script>
    function myFunction(word,name){
        alert("i want to say " + word + " to " + name);
    }
    </script>
</head>
<body>
<button onclick="myFunction('hello ','mpc')">try it</button>
</body>
</html>

有返回值的函数定义实例：

<html>
<head>
    <title>this is my js page</title>
    <script>
    function myFunction(word,name){
        alert("i want to say " + word + " to " + name);
    }
    //此处定义一个相加的函数
    function sum(num1,num2){
        return num1 + num2;
    }
    </script>
</head>
<body>
<script type="text/javascript">
    function print(){
        var a = 1;
        var b = 2;
        //此处调用函数
        var x = sum(a,b);
        //此弹出框
        alert(a +" + "+b+" ="+x);
    }
</script>
//定义两个按钮调用函数
<button onclick="myFunction('i love you ','mpc')">try it</button>
<button onclick="print()">print</button>
</body>
</html>

函数内var定义为局部变量，只在函数体内有效
函数外部定义，网页上所有脚本和函数都可以使用。
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

变量作用范围实例，全局变量可以通过window去访问

<html>
<head>
    <title>this is my js page</title>

</head>
<body>
    <p id = "test">this line is test</p>
<script type="text/javascript">
function f(){
//这里没用var关键字，是全局变量
    name = "micro";
}
//这里要先代用函数执行，否则变量不会初始化
f();
document.getElementById("test").innerHTML = "this var is " + name;//这里可以访问name，因为是全局的

document.write(window.name);//全局变量都可以还可以通过window去访问
</script>
</body>
</html>

给按钮添加事件，显示时间：

<html>
<head>
    <title>this is my js page</title>
    </head>
<body>
<button onclick="document.getElementById('test').innerHTML = Date()">now time is </button>
<p id = "test"></p>
</body>
</html>

改变自身按钮上的信息：

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

应该熟悉常见的事件名字：
onchange 元素改变
onclick 点击按钮
onmouseover 移动鼠标
onmouseout 移开鼠标
onkeydown 用户按下键盘
onload 浏览器完成加载
…..

字符串的转义：
如果存在这样的代码：
“my name is “mpc”“,这样的JavaScript是无法解析的，因此可以采用转义字符。\”来实现双引号。
常用转义
代码输出
\’ 单引号
\” 双引号
\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

micro_hz

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript函数变量与字符串输出转义

分号是语句分割的方法，代码分为代码语句和代码块。主语JavaScript的大小写敏感。例如刚才一直调试函数function不是Function，导致程序不能正常运行。代码块是很多语句一起执行。<html><head> <title>this is a js page</title></head><body><p id = "test">this is my test</p>
复制链接

扫一扫

专栏目录