JavaScript 初探

JavaScript插入HTML中

内嵌的Js代码

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> JS </title>

    <script type="text/javascript">

        // Js代码区域

    </script>

</head>

</html>

在HTML中，利用< Script >标签可以将js代码嵌入在HTML语句中，在< Script >标签中，会执行标签中的Js程序。

外嵌的Js代码

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> JS </title>

    <!--内嵌的JS-->

    <script type="text/javascript">

        // Js代码区域

    </script>

    <!-- 外部引入的js -->

    <script type="text/javascript" src="js/index.js">

    </script>

</head>

</html>

代码 11~12 行的外部引入js是从当前文件的绝对路径下引入的；这里引入的js文件是独立以 *.js 文件存在的js文件，可以被任意的引入。

JavaScript的输出

显示方案

window.alert() //写入警告框

document.write() //写入HTML输入

innerHTML // 写入HTML元素

console.log() // 写入浏览器控制台

innerHTML

访问HTML元素，JavaScript可以使用document.getElementById(id)

id：属性定义HTML元素

innerHTML属性定义HTML内容

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> javascript </title>

</head>

<body>

    <h1>Hello,world!</h1>

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

    <script>

        document.getElementById("id").innerHTML = 5+6;

    </script>

</body>

</html>

document.wriet()

出于测试目的化，使用 document.wriet()

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> javascript </title>

</head>

<body>

    <h1>Hello,world!</h1>

    <script>

        document.write(5+6);

    </script>

</body>

</html>

window.alert()

警告框显示数据

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> javascript </title>

</head>

<body>

    <h1>Hello,world!</h1>

    <script>

        window.alert(5+6);

    </script>

</body>

</html>

console.log()

在浏览器中的F12控制台中可以看见 console.log()的显示数据

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> javascript </title>

</head>

<body>

    <h1>Hello,world!</h1>

    <script>

        console.log(5+6);

    </script>

</body>

</html>

JavaScript 语句

构成

值、运算符、表达式、关键词、注释等

告诉浏览器在id=“demo”的HTML元素中输出“Hello，World！”

document.getElementById("demo").innerHTML = "Hello,World!"；

大多数Js程序都包含许多Js语句，这些语句会被按顺序的逐一被浏览器执行。

语句结束（；）

JavaScript的每一条语句，以分号作为结束标志。

ps：每一行，可以写多条js语句

JavaScript代码块

js语句可以使用花括号 {……} 组合在代码块中

代码块的作用就是定义同一时刻执行的语句。

function myFunction() { //JavaScript函数

    document.getElementById("demo").innerHTML = "Hello World.";

    document.getElementById("myDiv").innerHTML = "How are you ?";

}

JavaScript关键字

关键字	描述
break	终止循环或结束当前结构体
continue	跳出循环并从顶端（起点）开始
debugger	停止执行JavaScript，并调用调试函数
do … while	执行语句块，并在满足条件的时候重复执行代码块
for	标记需要被执行的语句块，只要条件为真（true）
function	声明函数
if … else	表姐需要被执行的语句块，根据某个满足的条件
return	退出函数
switch	标记需要被执行的语句块，根据不同的条件
try … catch	异常处理
var	声明变量

JavaScript 语法

JavaScript语法是一套规则

JavaScript 值

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

混合值就是字面量

变量值就是变量

JavaScript字面量

15.90

10011

写数值有无小数点均可

字符串是文本，由双引号或单引号括起来：

"Bill Gates"

'Bill Gates'

JavaScript变量

JavaScript 使用 var关键字声明变量；

= 符号等同于变量赋值

// 本例中，x被定义为变量；x被赋值7。

var x ;

x = 7 ;

JavaScript运算符

JavaScript 算数运算符 （+ - * /）来计算值

( 7 + 8 ) * 10

JavaScript 赋值运算符 （=）向变量赋值

var x , y ;

var x = 7 ;

var y = 8 ;

JavaScript表达式

表达式是值、变量和运算符组合，计算的结果是值

JavaScript关键字

JavaScript关键字 var 告知浏览器创建一个新的变量

JavaScript标识符

标识符是名称

在Js中，标识符用于命名变量、关键字、函数、标签等

在Js中，首字符必须是字母、下划线或者美元符号

JavaScript 大小写敏感
JavaScript 数据类型

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

js中，文本值被称为字符串

JavaScript可处理多种数据类型（目前只关注 数值和字符串值）

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

ps：数值放在引号内，会被认为文本字符串。

|-- 字符串之间可以用 + 符号来连接多个字符串

JavaScript 运算符

运算符	描述
+	加法
-	减法
	乘法
/	除法
%	系数
**	取幂
++	自加
--	自减
=	赋值 x = y
+=	x = x + y
-=	x = x - y
*=	x = x * y
/=	x = x / y
%=	x = x % y
==	等于
===	等值等型（数据和类型都相等）
！=	不等于
！==	不等值不等型
>	大于
<	小于
>=	大于等于
<=	小于等于
？：	三元运算符
&&	逻辑与
\|\|	逻辑或
！	逻辑非
typeof	返回变量的类型
instanceof	如果对象是实例，返回true
&	与
\|	或
~	非
^	异或
<<	零填充左位移
>>	有符号右位移
>>>	零填充右位移

JavaScript数据类型

分类：

JavaScript分：数值、字符串、数组、对象等多种数据类型。

var length = 7 ;	//数值

var lastName = "Gates";		//字符串

var cars = ["Porsche","Volvo","BMW"];		//数组

var x = {firstName:"Bill",lastName:"Gates"};		//对象

动态类型

JavaScript拥有动态类型，每次变量被赋予不同类型的数据类型，变量就会被改变数据类型。

JavaScript 布尔值

布尔值只有两个值：true 或 false

var x = true ;

var y = false ;

JavaScript 数组

Js数组用方括号书写，数组项目由逗号分隔

var cars = ["Porsche","Volvo","BMW"] ;

JavaScript 对象

Js对象用花括号书写，对象属性是 name:value 键值对，由逗号分隔。

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

typeof 运算符

可以使用JavaScript的 typeof 来确定JavaScript的变量类型；

typeof运算符返回变量或表达式的类型

typeof ""		//返回 String

typeof "bill"	//返回 String

typeof 110		//返回 number

var person ;

person = undefined ; // 任何的变量设置为undefined 都可以对变量进行清空，变量类型也就变成了undefined

//ps：空值和 undefined不是一回事，空值是有类型的。

NULL

在JavaScript中，null是“nothing"。被看做不存在的事物。

但js中，NULL的数据类型是对象。

可以把NULL看做是一个js的bug

可以通过设置值是 null 清空对象。

var person = null ;  // 值是null，但是类型仍然是对象。

同样可以通过设置值是 undefined 清空对象

var person = undefined ; //值是undefined，类型是undefined

Undefined 与 Null 的区别

undefined 与 null 的值相等，但是类型是不同的。

原始数据

原始数据是一种没有额外属性和方法的单一简单数据值。
typeof 运算符可以返回以下原始类型之一：
- String（字符串）
- number（数值）
- boolan（布尔值）
- undefined

复杂数据

typeof返回以下以下复杂两个类型：
- function （函数类型）
- object
typeof 运算符把对象、数组或null返回 object

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

ps：因为JavaScript中数组即是对象，所以 typeof [数组] 返回为”object“

JavaScript 函数

定义：

JavaScript 函数是被设计为执行特定任务的代码块

JavaScript 函数会在某代码调用它的时候被执行

function myFunction (p1 , p2) {

    return p1 * P2 ;

}

函数语法：

JavaScript 函数通过 function 关键字进行定义，其后是函数名和括号。

function name(参数1，参数2，参数3) {

    JavaScript代码 ；

}

函数调用：

当事件发生的时候（用户点击）

当JavaScript代码调用时

自动（程序内调用）
函数返回：

当JavaScript到达 return 语句，函数将会停止执行。

var x = myFunction(4,5);

function myFunction(a,b){

    return a * b ;

}

运算符调用函数：

toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数返回的结果。

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> javascript </title>

</head>

<body>

    <h1>Hello,world!</h1>

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

    <script>

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

    function toCelsius (f) {

        return (5/9) * (f-32) ;

    }

    </script>

</body>

</html>

局部变量：

JavaScript函数中声明的变量，会成为函数的局部变量！

即：只会在函数{}内生效！

function myFunction(){

    var carName = "Volvo" ;

}

JavaScript 对象

定义：

JavaScript 是被命名的的容器。
```
var car = {type:"porsche" , model:"999" , color:"white"} ;
```
对象的书名定义，以 键值对 表示。
对象属性：

对象中的 键值对 被称为属性

|-- 键 == 属性名

|-- 值 == 属性值（内容）

对象方法：

对象也可以有方法，方法是对象上的执行动作

方法—以 函数定义 被存储在属性值中。

var person = {

    firstName:"Bill",

    lastName:"Gates",

    idName:999 ,

    funllName:function() {

        return this.firstName + " " + this.lestName ;

   }

};

this 关键字：

在函数定义中，this 引用该函数的属性内容

对象定义：

创建一个JavaScript对象

var person ={

    firstName : "Bill" ,

    lastName : "Gates" ,

    age : 999 ,

    eyeColor : "Blue"

};

访问对象属性：

访问方式一

objectName.propertyName

    对象名 . 对象属性名

访问方式二

objectName["propertyName"]

实例：

person.lastName; //访问对象中的lastName属性值

访问对象方法：

方法：

objectName.methodName(); // 方法对象名.方法名称()

PS： 所有对象的调用均可调用（结果赋值）给一个标识符使用。

数据类型声明new对象！

var x = new String () ;

var y = new Number () ;

var z = new Boolean() ;

我们要避免出现以上的声明现象哦！

<!DOCTYPE html>

<html>

<head>

    <meta charset = "utf-8">

    <title> javascript </title>

</head>

<body>

    <h1>Hello,world!</h1>

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

    <p id="demo1"></p>

    <script>

        var person = { // 对象定义

            firstName : "Bill" ,

            lastName  : "Gates" ,

            age       : 999 ,

            eyeColor  : "Blue" ,

            fullName  : function() {

                return this.firstName + " " + this.lastName ;

            }

        };

        document.getElementById("demo").innerHTML=person.lastName; //访问对象中的lastName属性值

        document.getElementById("demo1").innerHTML=person.fullName();

    </script>

</body>

</html>

JavaScript初探一（认识JavaScript）的更多相关文章

JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
JavaScript初探五
JavaScript 初探七 JavaScript 数据类型基本的值类型字符串(String) 数字(Number) 布尔值(Boolean) 对象(Object) 函数(Function ...
JavaScript初探三（学习js数组）
JavaScript初探 (三) JavaScript数组定义创建数组 var 数组名 = [元素0,元素1,元素2,--] ; var arr = ["Huawei",&qu ...
JavaScript初探二（了解数据）
JavaScript初探 (二) JavaScript 事件 HTML事件 HTML事件是可以在浏览器或用户做的某些事情 HTML事件的例子: HTML网页完成加载 HTML输入字段被修改 HTML按 ...
JavaScript初探系列目录
一系列导航结合各方面的参考资料,整理出来以下主要目录,供方便浏览查看 (一)初探系列 JavaScript初探系列(1)——基本概念 JavaScript初探系列(2)——数 ...
JavaScript初探系列之Ajax应用
一什么是Ajax Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不 ...
JavaScript初探系列之基本概念
JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript(ECMA, EuropeanComputer Manufacturers Association )的伪语言的形式来 ...
【JavaScript】javascript中伪协议(javascript:)使用探讨
javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行. 比如下面这个死链接: <a href="javasc ...
javascript实用技巧、javascript高级技巧
字号+作者:H5之家来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

随机推荐

Winform中设置BackgroundWorker在取消时关闭后台进程
场景在Winform中拖拽一个BackgroundWorker控件,配合进度条控件能开启一个后台线程并报告进度条进度. 但是在执行后台线程的任务时,如果想要取消,怎样让其停止执行. 注: 博客主页 ...
Java每日一面(Part1:计算机网络)[19/10/14]
作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 1.1 说一说TCP的四次挥手 "挥手",即终止TCP连接,断开一个TCP连接池. 需要客户端和服务端总共发出四个包,以 ...
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min ...
JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入异步加载实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...
iOS中点击按钮复制指定内容
话不多说,直接上图和代码:
IDEA中GitLab的使用
首先安装git https://git-scm.com/downloads/ 下载对应的版本下载好了,安装打开 Windows. 打开之后2步走,与git连接首先选择仓库,进行git init本地 ...
02-Node.js学习笔记-系统模块fs文件操作
2.1.什么是系统模块 Node 运行环境提供的API,因为这些API都是以模块化的方式进行开发的,所有我们又称Node运行环境提供的API为系统模块 3.1系统模块fs文件操作 //f :file ...
01-Node.js学习笔记-模块成员的导出导入
什么是Node.js Node.js是一个让javascript运行在服务端的开发平台: Node.js能做什么? 1.基于社交网络的大规模web应用: 2.命令行工具 3.交互式终端程序 4.带有图 ...
WPF 绑定属性 XAML 时间格式化
原文:WPF 绑定属性 XAML 时间格式化 XAML 时间格式化{Binding Birthday,StringFormat='yyyy-MM-dd '} public class AssetCla ...
SVO 特征对齐代码分析
SVO稀疏图像对齐之后使用特征对齐,即通过地图向当前帧投影,并使用逆向组合光流以稀疏图像对齐的结果为初始值,得到更精确的特征位置. 主要涉及文件: reprojector.cpp matcher.cp ...

JavaScript初探 一（认识JavaScript）

JavaScript 初探

JavaScript插入HTML中

内嵌的Js代码

外嵌的Js代码

JavaScript的输出

显示方案

innerHTML

document.wriet()

window.alert()

console.log()

JavaScript 语句

JavaScript关键字

JavaScript 语法

JavaScript 运算符

JavaScript数据类型

JavaScript 布尔值

JavaScript 数组

JavaScript 对象

typeof 运算符

NULL

原始数据

复杂数据

JavaScript 函数

JavaScript 对象

数据类型声明new对象！

JavaScript初探 一（认识JavaScript）的更多相关文章

随机推荐

热门专题

JavaScript初探一（认识JavaScript）

JavaScript初探一（认识JavaScript）的更多相关文章