扫一扫下方二维码,关注本站官方公众号
获取永久解锁本站全部文章的验证码
还能不定期领现金红包

JavaScript(一)简介、语法、输出-Go语言中文社区

JavaScript(一)简介、语法、输出


前言
之前一直做Java后台开发,这个阶段准备学习JavaScript,这个系列我也会边学边更新。因为没有什么艺术天赋,最近又在学习摄影,所有每篇文章最后都会附上我拍摄的一张图片,供大家一起欣赏。ps:本系列学习需要HTML、CSS基础

简介

JavaScript是一种轻量级的脚本语言,适应现代所有的浏览器,现在广泛的用于前端开发。我自己对JavaScript的理解是,它让网页“动”起来了,在静态的HTML、CSS的基础上,插入JavaScript让网页由静至动。重点来了,JavaScript和Java不是兄弟!(Java是Sun公司推出的,JavaScript由Netscape公司推出)但是我认为在语法上还是有一些相似度,详情在下文介绍。
在HTML页面内编写JavaScript脚本时,JavaScript语句要在标签<script></script>内编写,脚本应放在<head><body>内,也可以把脚本写在外部js文件中,然后在HTML页面调用该文件。

<!DOCTYPE html>
<html>
<head>
<script >···</script>
</head>
</html>
<!DOCTYPE html>
<html>
<body>
<script >···</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script src="hello.js"></script>
</body>
</html>

语法

刚刚在简介里面说了,JavaScript和Java语法有些相似的地方。例如都有数字、字符串、对象、函数等字面量。JavaScript中变量用var来定义,用 = 来赋值。
语句之间用 ; 分隔

var a,b;
a = 1;
b = a + 1;

同样的,JavaScript也有算数运算符、赋值运算符、逻辑判断运算符

类型 示例
赋值,算术和位运算符 = + - * /
条件,比较及逻辑运算符 == != < >

JavaScript也有一些关键字,不用全部背下来,有需要的时候都能在网上搜到。注意取对象名或其他名的时候不要和关键字重复,不然会产生错误。
JavaScript的注释方法和Java一样,采用 // 进行注释

//这是注释
var a = 1;

JavaScript 有多种数据类型:数字,字符串,数组,对象等等,也可以定义函数:

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

//定义函数myFunction,参数为a,b
function myFunction(a, b) {
    return a * b;      //函数内逻辑代码                          
}

JavaScript对大小写是有要求的,MyFunction 和 myFunction 是不一样的,一般建议采用驼峰法命名(myFunction)

输出

输出这部分代码较简单还能看到效果,大家可以一边学习一边练习。JavaScript没有自带的输出函数,现在比较常用的有四种输出方法:
1.使用 window.alert() 弹出提示框
2.使用 document.write() 方法将内容写进 HTML
3.使用 innerHTML 写入到 HTML 元素
4.使用 console.log() 写入到浏览器的控制台

window.alert()
在网页上弹出提示框来输出,示例:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert("hello world!");
</script>

</body>
</html>

document.write()
注意这个方法如果在HTML已经加载后调用,会覆盖HTML页面,示例:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write("标签内容被覆盖了!");
}
</script>

</body>
</html>

innerHTML
在操作HTML元素之前,要先通过document.getElementById(id) 方法来得到这个元素,再对这个元素进行操作,示例:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
//getElementById("demo")根据id得到了p标签元素
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

console.log()
这个方法是在浏览器的控制台中输出信息,在浏览器页面按F12即可打开控制台,示例:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
console.log("hello!");
</script>

</body>
</html>

效果展示:
在这里插入图片描述
摄影分享
摄于 丽江.玉龙雪山.云杉坪
在这里插入图片描述

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_44582716/article/details/105825695
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-06-28 03:36
  • 阅读 ( 245 )

0 条评论

请先 登录 后评论

官方社群