前言
本章主要是学习JavaScript的基本理论知识以及简单使用,属于入门级别的难度,如果有错误,希望大神们提出来,一起学习.深入研究和扩展学习可以去官网,下面我们正式开始学习JavaScript.
1, 什么是JavaScript
- 所谓的JavaScript,其实就是一门广泛运用于PC端的脚本语言,是由Netspace公司设计的,当时正是和sun公司合作,所以起的名字和Java很像,但是,它们是两门完全不同的语言.不要混淆了.只是但是Java特别火,JavaScript借助了Java,快速被全世界记住,成为一门热门的语言.在后面的学习我们就将JavaScript简称为JS.
- JS的具体用途是什么
- 1,JS的用途很广,比如说:HTML的DOM操作(所谓的dom操作:即节点操作(所谓的节点操作:就是节点的增删改查操作)).
- 2, JS还可以增加网页的动态功能,比如:动画
- JS还能处理事件,比如:监听鼠标的点击,滑动以及键盘的输入等.
2, JavaScript的两种书写方式
- JavaScript有两种编写方式
- 1,JS的页内编程方式:即在当前网页的script标签中编写内容
<script type="text/javascript">没错,这样就是JS的页内编写方式</script>
- 2, 外部JS : 即在外部的script编写诶荣
只需要在当前网页中导入外部的JS即可
<script scr="index.js"></script>
3, 下面我们就来做几个例子
- 输出一个HelloWorld
<!DOCTYPE html>
<!--注意一点:我第一次使用的时候,弹框一直不出来,主要的原因是alert
中括号里面需要用单引号引用起来,注意不是双引号.
我的错误是:忘记添加单引号,后来使用双引号也不对.记住是单引号
-->
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的简单使用</title>
<!--JavaScript的页内样式-->
<script type="text/javascript">
alert('HelloWorld')
</script>
</head>
<body>
<button type="button" onclick="alert('Alex在学JavaScript')">百度一下,你就知道了</button>
</body>
</html>
// 运行效果: 当打开浏览器的时候就会弹出一个弹框:提示"HelloWorld",当点击确定后,再点击按钮,就会弹出一个弹框,提示"Alex在学JavaScript".
- 2, 如何打印输出
<!DOCTYPE html>
<!--注意一点:我第一次使用的时候,弹框一直不出来,主要的原因是alert
中括号里面需要用单引号引用起来,注意不是双引号.
我的错误是:忘记添加单引号,后来使用双引号也不对.记住是单引号
-->
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的简单使用</title>
<script type="text/javascript">
// alert('HelloWorld')
console.log('Alex正在努力的学习JavaScript');
console.log('学习是一种乐趣');
console.log('注意括号里也是需要单引号的');
console.log('除了单引号,最后还需要一个分号');
console.log('千万不要忘记这两点了');
</script>
</head>
<body>
<!--<button type="button" onclick="alert('Alex在学JavaScript')">百度一下,你就知道了</button>-->
</body>
</html>
// 本例重点 : console.log('需要单引号和分号');输出格式
- 3, JS中的基本数据类型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS的基本语法</title>
</head>
<body>
<script>
// 基本数据类型的定义
var age = 10; // number类型
var name1 = 'Alex'; // string类型
var money = 100; // number类型
var name2 = 'Jane'; // string类型
// 利用typeof来查看真实类型
console.log(typeof age);
console.log(typeof name1)
console.log(typeof name2)
console.log(typeof money)
// 判断真假性
var result = true; // 真为ture, 假为:false 属于boolean类型
// 设置对象为空时
var num = null; // object类型
console.log(result, num);
console.log(typeof result,typeof num)
</script>
</body>
</html>
// 本例重点 :
1, typeof 打印真实类型,
2, 如何定义一个基本数据类型,
- 4, 如何拼接字符串
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中如何拼接字符串</title>
</head>
<body>
<script type="text/javascript">
var name1 = 'Alex';
var name2 = 'William';
// 拼接字符串
var newName = name1 + name2;
console.log(newName)
console.log(typeof newName); // string
// 面试题 : 写出下面str的值
var str1 = 8 + 8 + 8 +8; // str1 = 32
var str2 = 8 + 8 + '8' + '8'; // str2 = 1688
var str3 = '8' + '8' + 8 + 8; // str3 = 8888
var str4 = '8' + 8 + 8 + '8'; // str4 = 8888
var str5 = '8' + 8 + '8' + 8; // str5 = 8888
console.log(str1, str2, str3, str4, str5);
// 总结 : 运算时从左到右开始运算的,只要是遇到字符串类型,后面的都会被转为string类型
</script>
</body>
</html>
// 本例重点 : 当基本数据和string混合运算时的本质是什么?
- 5, JS中的数组
// 数组例子1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中的数组相关知识</title>
</head>
<body>
<script type="text/javascript">
var name ='William';
// 数组的简单定义
var informations = [name, 'Alex', 25, 177, 'IT', 'iOS'];
// 如何获取数组中的元素
console.log(informations[0]); // Williame
// 如何计算数组的长度
console.log(informations.length); // 6
// 判断类型
console.log(typeof informations); // object
// 遍历数组中的每个元素,判断每个元素的类型是什么
for(var i = 0; i < informations.length; i++){
// 打印出每个元素
console.log(informations[i]);
// 打印出每个元素的类型
console.log(typeof informations[i]);
}
</script>
</body>
</html>
注意:本例重点 :
1, 数组中的元素是以什么形式存在的?
2, 对象需要用单引号引用起来, 如果没有用单引号引用的,说明在数组外边已经定义过了,剩余的就是基本数据类型.
3, 如何动态获取到数组的长度.
(关于JS中的数组与OC中的数组的区别下面会介绍)
- 运行结果 :
Snip20160318_3.png
// 数组例子2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中的数组相关知识</title>
</head>
<body>
<script type="text/javascript">
var name = 'William';
// 定义一个数组(注意这个数组,数组中还有数组)
var names = ['Alex', name, 25, 177, ['JL', 23]];
// 获取数组中的元素
// console.log(names[1]);
// console.log(names[3]);
// console.log(names[4]);
// console.log(names[4][0]);
for(var i = 0; i < names.length; i++){
console.log(names[i]);
console.log(typeof names[i]);
}
</script>
</body>
</html>
-
运行结果 :
Snip20160318_7.png
Snip20160318_16.png
-
JS中的数组与OC中的数组的区别 ?
-
1, JS中的数组:元素可以是无序的,可以存储所有类型,但是OC中的数组:是有序的,只能存储相同类型的数据
-
2, JS中的数组:数组中还可以嵌套数组, 但是OC中的数组不能再嵌套数组
-
3, 动态计算数组的长度时,使用的属性不一样,JS中使用的是length,而OC中使用的是count.
-
4, JS中的对象是用单引号,而OC中的对象是双引号还有@符号
-
6, JS中的点语法
var handsomeBoy = {
name : 'Alex',
age : 25
}
console.log(handsomeBoy.name);
console.log(handsomeBoy.name + '#' + handsomeBoy.age);
- 7, JS中函数的定义
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS中函数的定义</title>
</head>
<body>
<script type="text/javascript">
/*
函数的定义 :
function 函数名 (参数列表){ // 函数列表不需要表明参数类型
函数体
}
*/
// 例子1 : 加法运算
function sum (sum1,sum2)
{
return sum1 + sum2;
}
console.log(sum(12,12));
// 方式2
function sum (sum1, sum2){
console.log(sum1 + sum2);
}
var result = sum(10, 10);
// 方式3
function sum (sum1, sum2){
console.log(sum1 + sum2);
}
var result = sum(8,8); // 16
console.log(result); // undefined
// sum(18, 18); // 36
// 要求写一个万能的加法运算公式
function sum(numbers){
var count = 0;
for(var i = 0; i < numbers.length; i++){
count = count + numbers[i];
}
return count;
}
var arr = [13, 12, 24, 55, 'Alex', 25, 'William'];
var result = sum(arr);
console.log(result);
// JS提供了一个属性,我们可以不用传参数
function sum() {
var count = 0;
for(var i = 0; i < arguments.length; i++ ) {
count = count + arguments[i];
}
return count;
}
// var arr = [13, 24, 25, 'William', 168, 'Alex']; // 只会将数组全部打印出来
var result = sum(13,14,14,15); // 56
console.log(result);
// 匿名函数
var result = function (){
console.log("Alex William");
}
// 匿名函数的调用
result();
</script>
</body>
</html>
- 运行结果 :
Snip20160318_17.png
- 注意点 : 特别要注意匿名函数,不要忘记调用函数
网友评论