一文了解JavaScript入门学习基础篇

我学习JavaScript的学习方法和HTML不同，保守了许多，从基础开始，思路就是从头到尾的把JavaScript用最快的速度过一遍，心中有一个JavaScript的样板再去学习，主要就是学习一遍后，再通过一个个实例来巩固。此文章将持续更新直到基础篇章完结，最多一个星期内，把基础最快速过一遍。

学习历程：

JavaScript

JS教程阶段

JavaScript属于HTMl和Web的编程(意思就是固定了,大部分就是用在我们用户能看到的地方)

编程语言做后端,可以从c入手可以从java入手,从python入手,但是前端JavaScript属于必学的部分.

首先了解一下

JavaScript是web开发者必学的三种语言之一:
HTML定义网页的内容
CSS规定网页的布局
JavaScript对网页行为进行编程

到这里,实例方法学完了后,后面再讲解,先学习基础的内容部分.

教程案例实例:

<!DOCTYPE html>
<html>
<body>
   <h2>Hello&nbsp;World!</h2>
   <button class="jojo" type="button" onclick="document.getElementById('demo').innerHTML=Date()" >
      点击按钮显示时间
   </button>

   <p id="demo"></p>
   <!-- document中的获取方法取得id -->
</body>

</html>

JS简介

JavaScript能够改变HTML内容

getElementByID()是多个JavaScript HTML方法之一比如还有get

简介案例实例:

<!DOCTYPE html>
<html>

<body>
   <!-- 改变HTML内容 -->
   <p id="jojo">你好世界</p>
   <button type="button" onclick='document.getElementById("jojo").innerHTML="Hello World" '>
      点击一下就变英文
   </button>
   <br />
   <button type="button" onclick="document.getElementById('jojo').innerHTML='单引号和双引号都能使用' ">
      点这个!
   </button>
   <br />
   <!-- 改变图像的src值 -->
   <button onclick="document.getElementById('img').src='./img/兔斯基.gif'">
      兔斯基
   </button>
   <img id=img src="./img/兔斯基.gif" style="width:222px;height: 300px;">
   <button onclick="document.getElementById('img').src='./img/皮卡丘.gif'">
      皮卡丘
   </button>
   <!-- 还能改变图像的css值 -->
   <button onclick="document.getElementById('img').style='width:400px;height:400px;' ">
      把图片变大
   </button>
   <br />
   <!-- 显示隐藏HTML元素 -->
   <button onclick="document.getElementById('img').style='display:none;' ">
      隐藏图片
   </button>
   <button onclick="document.getElementById('img').style='display:block;' ">
      显示图片
   </button>
</body>
</html>

本节的内容有

1.改变HTML的内容

2.改变图像的src值

3.改变css样式的值

4.隐藏显示内容

点一定要吃透,每个代码都带进去试.

JS常用知识点

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

让代码的易读性加强

分号：每一行script代码后面最后都加一行分号 ，这样代码可以横着写
运算符号：+ - * / ：这种符号后面加一个空格是挺好的，为了看起来方便

折行：把写的代码控制在80个字符以内，然后折行，位置一般都是运算符号或逗号之后。
例子：
document。getElementById("demo").innerHTML =
"HELLO KITTY.";

JavaScript 关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

下面的表格列出了一部分将在教程中学到的关键词：

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

JavaScript语法

语法各自有一套自己的规则，它定义了JavaScript的语言结构

var x, y;// 如何声明变量
x = 7; y = 8;// 如何赋值
z = x + y;// 如何计算值

JS语句定义两种类型的值：混合值和变量值

混合值被称为字面量（literal）。变量值被称为变量。

1 2 3 4 5 “字符串” 这些的就是字面量

var a= 1 这里的a就是变量，判断的标准取决于有没有赋值号(=)和声明号(var)

javascript表示符训练标识符的的命名规则和普通的规则是一样的

1.首字母必须是字母，下划线或者美元符号

2.JavaScript对大小写敏感
变量 lastName 和 lastname 是两个不同的变量

3.大驼峰和小驼峰格式

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。

如需了解详情，请访问我们完整的 Unicode 参考手册。

JavaScript变量

JavaScript 变量是存储数据值的容器

在本例中，x,y和z是变量：

var x = 7;
var y = 8;
var z = x + y;

JavaScript标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
- 名称对大小写敏感（y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。

JavaScript 数据类型

JavaScript 变量可存放数值，比如 100，以及文本值，比如 “Bill Gates”。

在编程中，文本值被称为字符串。

JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。

字符串被包围在双引号或单引号中。数值不用引号。

如果把数值放在引号中，会被视作文本字符串。

实例

var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';

Value = undefined

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

变量 carName 在这条语句执行后的值是 undefined：

实例

var carName;

重复声明 JavaScript 变量

如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 “porsche”：

实例

var carName = "porsche";
var carName;

JavaScript计算

下面有三个案例

var x = 3+5+8;
var x ="Bill"+" "+"Gates";
var x = "8" + 3 + 5
var x = 3 + 5 + "8"  

输出结果：
16
Bill Gates
835
88

证明了 如果您对数字和字符串相加，结果将是字符串

JavaScript 算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
–	减法
*	乘法
/	除法
%	系数
++	递加
—	递减

注释：JS 算数这一章对算数运算符进行了完整描述。

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x – y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

加法赋值运算符（+=）向变量添加一个值。

JavaScript 算数运算符

算术运算符对数值（文字或变量）执行算术运算。

运算符	描述
+	加法
–	减法
*	乘法
**	幂（ES2016）比如2**4就是2的4次方
/	除法
%	系数
++	递增
—	递减

运算符优先级

乘法和除法比加法和减法拥有更高的优先级
相同优先级先从左边开始

JavaScript 运算符优先级值

值	运算符	描述	实例
20	( )	表达式分组	(3 + 4)

19	.	成员	person.name
19	[]	成员	person[“name”]
19	()	函数调用	myFunction()
19	new	创建	new Date()

17	++	后缀递增	i++
17	—	后缀递减	i–

16	++	前缀递增	++i
16	—	前缀递减	–i
16	!	逻辑否	!(x==y)
16	typeof	类型	typeof x

15	**	求幂 (ES7)	10 ** 2

14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模数除法	10 % 5

13	+	加	10 + 5
13	–	减	10 – 5

12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（无符号）	x >>> 2

11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	对象中的属性	“PI” in Math
11	instanceof	对象的实例	instanceof Array

10	==	相等	x == y
10	===	严格相等	x === y
10	!=	不相等	x != y
10	!==	严格不相等	x !== y

9	&	按位与	x & y
8	^	按位 XOR	x ^ y
7	\|	按位或	x \| y
6	&&	逻辑与	x && y
5	\|\|	逻辑否	x \|\| y
4	? :	条件	? “Yes” : “No”

3	=	赋值	x = y
3	+=	赋值	x += y
3	-=	赋值	x -= y
3	*=	赋值	x *= y
3	%=	赋值	x %= y
3	<<=	赋值	x <<= y
3	>>=	赋值	x >>= y
3	>>>=	赋值	x >>>= y
3	&=	赋值	x &= y
3	^=	赋值	x ^= y
3	\|=	赋值	x \|= y

2	yield	暂停函数	yield x
1	,	逗号	7 , 8

注意：淡红色指示实验性或建议性的技术（ECMASScript 2016 或 ES7）

提示：括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。

JS 运算符
JS 赋值

VUE

JavaScript 参考手册

JavaScript 实例

JavaScript 测验

JavaScript赋值

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x – y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
\|=	x \|= y	x = x \| y
**=	x **= y	x = x ** y

提示：**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。

2<<2 (相当于左移2个数就是二乘二乘二 )

var y = 123e5;
var z = 123e-5;

12300000
0.00123

JavaScript对象

JavaScript 对象

JavaScript 对象用花括号来书写。

对象属性是 name:value 对，由逗号分隔。

实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

var person = {
  firstName : "Bill",
  lastName : "Gates",
  age       : 62,
  eyeColor : "blue"
};

和golang中声名变量很像

var {
   firstName = "Bill"
   lastName  = "Gates"
   age       = 62
   eyeColor  = "blue"

}

区别就是JS自带一个对象

typeof运算符

typeof "" + "<br>" +
typeof 3 + "<br>" +
typeof 100 ;

string
number
number

typeof 0 + "<br>" +
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);

number
number
number
number
number

当没有值是 typeof也将会返回一个undefined.

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
person = undefined;
document.getElementById("demo").innerHTML = person;

这里输出的是undefined，undefin直接清空了这个对象内的所有值，
这里的person输出什么值都能清空这个对象内的所有内容

Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined             // undefined
typeof null                   // object
null === undefined           // false
null == undefined             // true

这里的undefined相当于清楚命令了，并且是唯一的undefined类

null 的值和 undefined相等，但是类型不一样。、

typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);

typeof 运算符可返回以下原始类型之一：

string
number
boolean
undefined （变量中没有的值返回的就是这个值）

document.getElementById("demo").innerHTML =
typeof {name:'Bill', age:62} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};

typeof 运算符把对象、数组或 null 返回 object。

typeof 运算符不会把函数返回 object。

object
object
object
function

Javascript函数

<script>
function Cal(num1,num2) {
return num1*num2
}
document.getElementById("demo").innerHTML = Cal(3,4) ;
</script>

在go语言中这样的用法很类似

package main
import "fmt"
func main () {
   Cal(3,4)
   fmt.Println(12)
}

func Cal(num1 int,num2 int) int {
   return num1*num2
}

输出结果：12

区别就是JavaScript不用设置类型

底下2个案例：

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius(77)

返回结果：
30

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius;

返回结果：
function toCelsius(f) { return (5/9) * (f-32); }

这两者的区别要注意

前面的代码块 toCelsiux引用的是函数对象，toCelsius()引用的函数结果。

还有一个用法变量值的函数能当作变量值直接使用。

<script>

function myFunction() {
   var carName = "Volvo";
   document.getElementById("demo1").innerHTML =
   typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;

</script>

carName 在myFuncton（）方法中是局部变量

当在这个方法外的时候就会变得不能使用，因为carName没有被定义

JavaScript对象

变量是数据值的容器

var car = "jojo";

对象也是变量，对象包含很多值：

var car = {type:"porsche", model:"911", color:"white"};

对象值以名称：值的方式来书写

var car = {
type:"porsche",
model:"911",
color:"white",
age: 62
};

这就是 "名称:值"的形式

对象也能存储函数

var jojo= {
firstName: " jojo ",
lastName: " DIO ",
cal : function() {
return this.firstName + "" + this.lastName;
}
};

this这里的作用指的就是firstName所指的对象，

this 关键词

在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

换言之，this.firstName 的意思是 this 对象的 firstName 属性。

请在 JS this 关键词这一章学习更多有关 this 关键词的知识。

访问JavaScript对象的两种方式

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 12345
};

// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 12345
};

// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;

请不要把字符串、数值和布尔值声明为对象！

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

var x = new String();       // 把 x 声明为 String 对象
var y = new Number();       // 把 y 声明为 Number 对象
var z = new Boolean();       //把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

您将在本教程的稍后章节学到更多有关对象的知识。

JavaScript事件

单引号：
双引号：
JS都能够使用接受

时间案例

<h1>JavaScript 事件</h1>

<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>

<p id="demo"></p>

//直接在html中运行运行 javascript

另一种表现方式

<button onclick="displayDate()">时间是？</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

转载请注明：XAMPP中文组官网 » 一文了解JavaScript入门学习基础篇

一文了解JavaScript入门学习基础篇

一文了解JavaScript入门学习基础篇

JavaScript

JS教程阶段

JS简介

JS常用知识点

JavaScript 关键词

JavaScript语法

JavaScript 字符集

JavaScript变量

JavaScript标识符

JavaScript 数据类型

实例

Value = undefined

实例

重复声明 JavaScript 变量

实例

JavaScript计算

JavaScript 算数运算符

JavaScript 赋值运算符

JavaScript 算数运算符

运算符优先级

JavaScript 运算符优先级值

JavaScript 参考手册

JavaScript 实例

JavaScript 测验

JavaScript赋值

JavaScript 赋值运算符

JavaScript对象

JavaScript 对象

实例

typeof运算符

Undefined 与 Null 的区别

Javascript函数

JavaScript对象

this 关键词

请不要把字符串、数值和布尔值声明为对象！

JavaScript事件

与本文相关的文章

您必须登录才能发表评论！

一文了解JavaScript入门学习基础篇

JavaScript

JS教程阶段

JS简介

JS常用知识点

JavaScript 关键词

JavaScript语法

JavaScript 字符集

JavaScript变量

JavaScript标识符

JavaScript 数据类型

实例

Value = undefined

实例

重复声明 JavaScript 变量

实例

JavaScript计算

JavaScript 算数运算符

JavaScript 赋值运算符

JavaScript 算数运算符

运算符优先级

JavaScript 运算符优先级值

JavaScript 参考手册

JavaScript 实例

JavaScript 测验

JavaScript赋值

JavaScript 赋值运算符

JavaScript对象

JavaScript 对象

实例

typeof运算符

Undefined 与 Null 的区别

Javascript函数

JavaScript对象

this 关键词

请不要把字符串、数值和布尔值声明为对象！

JavaScript事件

与本文相关的文章

您必须 登录 才能发表评论！

您必须登录才能发表评论！