JS基础语法

1、JavaScript 输出

JavaScript 可以通过不同的方式来输出数据:
  使用 window.alert() 弹出警告框。
  使用 document.write() 方法将内容写到 HTML 文档中。
  使用 innerHTML 写入到 HTML 元素。
  使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html>
<html>
<body>

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

<script>
window.alert(5 + 6);
</script>

</body>
</html>
window.alert()
<!DOCTYPE html>
<html>
<body>

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

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

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>
document.getElementById()
<!DOCTYPE html>
<html>
<body>

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

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

<script>
document.write(Date());
</script>

</body>
</html>
document.write()
<!DOCTYPE html>
<html>
<body>

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

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
console.log()

2、变量

变量是用于存储信息的"容器"。JavaScript 语句和 JavaScript 变量都对大小写敏感。

在 JavaScript 中创建变量通常称为"声明"变量。我们使用 var 关键词来声明变量:var carname;

变量声明之后,该变量是空的(它没有值)。如需向变量赋值,请使用等号:carname="Volvo";

不过,您也可以在声明变量时对其赋值:var carname="Volvo";

您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行:
var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个不可以赋同一个值:var x,y,z=1;x,y 为 undefined, z 为 1。

 JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

3、数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

引用数据类型:对象(Object)、数组(Array)、函数(Function)。

数字:可以是整数或者是小数,或者是科学计数(e)。

字符串:可以使用单引号或双引号:"John Doe" 、'John Doe'

布尔:布尔(逻辑)只能有两个值:true 或 false。

Undefine null:Undefined 这个值表示变量不含有值;可以通过将变量的值设置为 null 来清空变量。

 Javascript对象链接对象链接

数组:定义一个数组:[40, 100, 1, 5, 25, 10]

对象: 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数: 定义一个函数:function myFunction(a, b) { return a * b;}

4、运算符

算术运算符:加减乘除余幂,自增自减

关系运算符:==,===(绝对等于---值和类型均相等),!=,!==(不绝对等于---值和类型有一个不相等,或两个都不相等)),>,>=,<,<=

逻辑运算符:&&,||,!

赋值运算符:=,+=,-=,*=,/=,%=,**=

条件运算符:语法--------variablename=(condition)?value1:value2

5、语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。

 JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。可以在文本字符串中使用反斜杠对代码行进行换行。

6、注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头。

多行注释以 /* 开始,以 */ 结尾。

7、对象

JavaScript 对象是拥有属性和方法的数据。在 JavaScript中,几乎所有的事物都是对象。

对象定义:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

访问对象属性(两种方式):
person.lastName;
person["lastName"];

<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
    person.firstName + " " + person.lastName;
</script>

访问对象方法:name = person.fullName();

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

8、函数

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname()
{
    // 执行代码
}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

9、事件

 

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为,也可以是用户行为。

以下是 HTML 事件的实例:
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常,当事件发生时,你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。

/*
常见的HTML事件
事件                        描述
onchange                HTML 元素改变
onclick               用户点击 HTML 元素
onmouseover        用户在一个HTML元素上移动鼠标
onmouseout         用户从一个HTML元素上移开鼠标
onkeydown               用户按下键盘按键
onload                浏览器已完成页面的加载
*/

常见的HTML事件事件描述onchange         HTML 元素改变onclick      用户点击 HTML 元素onmouseover用户在一个HTML元素上移动鼠标onmouseout用户从一个HTML元素上移开鼠标onkeydown      用户按下键盘按键onload    浏览器已完成页面的加载

原文地址:https://www.cnblogs.com/windyrainy/p/10697625.html