JavaScript知识入门
Posted wodongx123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript知识入门相关的知识，希望对你有一定的参考价值。
文章目录
前言
身为一个android开发，不会一点H5的基本知识和前端沟通的时候成本就比较高，而且要测试一些JS能力的时候也比较麻烦，所以学习一下JS的一些基本的语法和知识。
正文基本上都是网页代码，直接让代码自己解释他的语法特性比讲概念方便一点，需要掌握一种编程语言的人才看的下去。
测试方式1：新建一个html类型的文件，用文本文档的方式打开之后，将代码贴进去，然后用浏览器打开
测试方式2：https://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> <!-- NaN，Not 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的案例中已经体现了，这些写一下主动转换类型的案例
类型转换一般都是通过Number，String，Boolean三个方法
<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/else，while，dowhile，for循环，continue，break的用法都和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>
参考材料
菜鸟教程
https://www.runoob.com/js/js-tutorial.html
以上是关于JavaScript知识入门的主要内容，如果未能解决你的问题，请参考以下文章