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高级技巧 ...

随机推荐

Git详细学习教程
作者:gafish https://github.com/gafish/gafish.github.com Git简介 Git 是一种分布式版本控制系统,它可以不受网络连接的限制,加上其它众多优点,目 ...
练手爬虫用urllib模块获取
练手爬虫用urllib模块获取有个人看一段python2的代码有很多错误 import re import urllib def getHtml(url): page = urllib.urlope ...
怎么将CAD转PNG格式？这两种方法值得收藏
在从事相关CAD工作的小伙伴们都知道,CAD中不光需要绘制各种各样的图纸,还需要根据工作的需要来进行图纸格式的转换工作.那有的时候就需要将CAD转换成PNG格式的图片进行使用.那怎么将CAD转PNG格 ...
使用Settings sync同步VS Code配置
使用Settings sync同步VS Code配置因为要在多台电脑上使用VSCode,想要简单地管理VSCode地配置,不用每次手动去一一配置,保持多个开发环境的同步,于是使用Settings s ...
如何实现Web页面录屏？
摘要: 很有意思的操作... 原文:web页面录屏实现译者:frontdog Fundebug经授权转载,版权归原作者所有. 写在前面的话在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇 ...
Hadoop、storm和Spark Streaming简单介绍（非原创）
文章大纲一.Hadoop是什么二.storm是什么三.Spark Streaming是什么四.Spark与storm比较五.参考文章一.Hadoop是什么 1. 简介 Hadoop是一个由Ap ...
42-volume 生命周期管理
Data Volume 中存放的是重要的应用数据,如何管理 volume 对应用至关重要.前面我们主要关注的是 volume 的创建.共享和使用,本节将讨论如何备份.恢复.迁移和销毁 volume. ...
MySQL数据库（二）事务
MySQL的存储引擎InnoDB支持事务,MyISAM不支持事物数据库事务的四大特性(ACID) 原子性(atomic) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,这和前面两篇博客 ...
start_udev 是不是会写磁盘头
遇到一个案例,在这里记录一下一套Oracle 11.2.0.4 RAC环境,操作系统是RHEL 6.5,共享磁盘是通过UDEV实现RAW绑定设备名,如下 [root@rac1 opt]# ll /d ...
postman---postman常用的快捷键
作为一名IT程序猿,不懂一些工具的快捷方式,应该会被鄙视的吧.收集了一些Postman的快捷方式,大家一起动手操作~ 简单操作操作 mac系统 windows系统打开新标签 ⌘T Ctrl + T ...

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）的更多相关文章