JavaScript知识入门
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
文章目录
前言
身为一个Android开发不会一点H5的基本知识和前端沟通的时候成本就比较高而且要测试一些JS能力的时候也比较麻烦所以学习一下JS的一些基本的语法和知识。
正文基本上都是网页代码直接让代码自己解释他的语法特性比讲概念方便一点需要掌握一种编程语言的人才看的下去。
测试方式1新建一个html类型的文件用文本文档的方式打开之后将代码贴进去然后用浏览器打开
测试方式2https://www.runoob.com/try/try.php?filename=tryjs_events将代码复制到这个网站使用可以直接测试。
1. 第一个JS函数
<html>
<head>
<title>测试网页</title>
<script>
function a() {
alert("你好a");
}
</script>
</head>
<body>
<script>
function b() {
alert("你好b")
}
</script>
<button onclick="a()">按钮1</button>
<button onclick="b()">按钮2</button>
<button onclick="alert('你好c')">按钮3</button>
</body>
</html>
JS函数既可以写在head标签内也可以写在body标签内写了就算有效可以正常的调用也可以直接写js代码来使用（按钮3。
在此之外js也可以通过引入外部文件的方式来导入效果等同于我们java的import。
PS关于JS中的单引号和双引号两者完全没有区别但是和java不同的是JS的引号使用情况很高所以为了防止重叠我们一般会双引号和单引号混合使用如果双引号用来描述onclick了内部的字符串就用单引号描述。
2. 入参和返回值
JS是弱类型语言方法的入参以及变量的声明以及返回值等都不需要声明他的数据类型它们会在被调用的时候自行做类型推断。
<html>
<head>
<title>test.html</title>
<script>
function a(param1, param2) {
alert("你好" + param1 + ", " + param2);
}
function b(param1, param2) {
var t = param1 + param2;
alert(t);
}
function c(param1, param2) {
return param1 * param2;
}
</script>
</head>
<body>
<button onclick="a('aaa', 5678)">按钮1</button>
<button onclick="b('aaa', 5678)">按钮2</button>
<button onclick="b('777', 5678)">按钮3</button>
<button onclick="b(777, 5678)">按钮4</button>
<button onclick="alert(c('aaa', 66))">按钮5</button> <!-- NaNNot a number的缩写不是个数字 -->
</body>
</html>
3. 数据类型
3.1 类型判断
typeof关键字用于检测变量和常量的类型。
<html>
<head>
<title>test.html</title>
<script>
function a(param1) {
var a = typeof param1
alert(a)
}
</script>
</head>
<body>
<!-- 基本数据类型 -->
<button onclick="a(3.4)">按钮1</button> <!-- number -->
<button onclick="a(500)">按钮2</button> <!-- number -->
<button onclick="a('aaa')">按钮3</button> <!-- string -->
<button onclick="a(false)">按钮4</button> <!-- boolean -->
<button onclick="var t; a(t)">按钮5</button> <!-- undefined未定义 -->
<br>
<!-- 引用数据类型 -->
<button onclick="a({name:'qwd', age:18})">按钮1</button> <!-- object -->
<button onclick="a([522, 'aaa', false])">按钮2</button> <!-- object,本质是array -->
<button onclick="a(new Date())">按钮3</button> <!-- object,本质是Date -->
<button onclick="var t = function(){}; a(t)">按钮4</button> <!-- function,方法算是一种数据类型 -->
<!-- 除此以外还有一些别的引用数据类型这里不写了 -->
</body>
</html>
顺便一提typeof我们也可以当成一个方法返回的数据类型为string
<html>
<head>
<title>test.html</title>
<script>
function a(param1) {
var a = typeof param1
alert(a) // number
alert(typeof a) // string
}
</script>
</head>
<body>
<button onclick="a(3.4)">按钮1</button>
</body>
</html>
3.2 类型转换
类型的自动转换在2的案例中已经体现了这些写一下主动转换类型的案例
类型转换一般都是通过NumberStringBoolean三个方法
<html>
<head>
<title>测试网页</title>
<script>
function toNum() {
alert(Number('567')) // 567
alert(Number(false)) // 0
alert(Number('aaa')) // NaN
}
function toBoolean() {
alert(Boolean('')) // false
alert(Boolean(567)) // true
alert(Boolean('aaa')) // true
alert(Boolean(null)) // false
}
function toString1() {
alert(String(567))
alert(String(false))
var a = {name:'mingzi', age:18}
alert(String(a))
}
function toString2() {
var a = {name:'mingzi', age:18}
alert(a.toString())
//alert(567.toString()) number类型不能这样转String
alert(false.toString())
}
</script>
</head>
<body>
<button onclick="toNum()">转数字</button>
<button onclick="toBoolean()">转布尔</button>
<button onclick="toString1()">转String1</button>
<button onclick="toString2()">转String2</button>
</body>
</html>
4. 对象和列表
js的所有对象和其内部的成员变量都不需要事先声明可以在需要用到的时候直接实例化来使用也因此调用的时候可能会调到不存在的变量。
<html>
<head>
<title>测试网页</title>
<script>
function q() {
var t = {
name:'helloworld',
age:24,
sayHello: function () {
return 'hello js'
}
}
alert(t['name'])
alert(t.age)
alert(t.sex) // 不存在的对象就会返回undefined
alert(t['sayHello']) // 以String的方式打印
alert(t.sayHello) // 以String的方式打印
alert(t.sayHello()) // 这样才能正常调用方法
}
function qq() {
var obj = new Object()
obj.name = 'qq'
obj.age = 18
alert(obj.name)
alert(obj.age)
}
</script>
</head>
<body>
<button onclick="q()">按钮1</button>
<button onclick="qq()">按钮2</button>
</body>
</html>
列表可以当成一种特殊的对象索引方式为下标数字
<html>
<head>
<title>测试网页</title>
<script>
function q() {
var arr = new Array()
arr[0] = 'nihao'
arr[1] = 18
// arr.2 = 19 ,Array不支持这种写法赋值
arr[3] = false
alert(arr)
alert(arr['name']) // 但是支持这种写法查值
}
</script>
</head>
<body>
<button onclick="q()">按钮1</button>
</body>
</html>
5. 控制流语句
if/elsewhiledowhilefor循环continuebreak的用法都和java一模一样不写案例了。
6. JSON
这个是最关键的环节一般来说H5在和其他端交互的时候不会直接的将数据发送给对方而是会将其封装成JSON格式的String发给对方对方再进行解析后使用。
我们可以直接把他看成是一种约定俗成的数据交换方式和数据交换格式一般来说每种编程语言都会提供JSON串转对象和对象转JSON串的方式。
<html>
<head>
<title>测试网页</title>
<script>
function toJson1() {
var a = {name:'nihao', age:18}
alert(JSON.stringify(a)) // 输出内容看似和定义一样实际上是String类型
alert(typeof JSON.stringify(a))
var str = '{"name":"Runoob", "url":"www.runoob.com"}'
var obj = JSON.parse(str)
alert(obj)
alert(obj.name)
}
</script>
</head>
<body>
<button onclick="toJson1()">转数字</button>
</body>
</html>