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

随机推荐

在线程中显示一个窗口(多个UI线程)
多数耗时操作可以异步执行,推荐async/await. 但和UI相关的部分仅能在UI线程执行,这时UI线程的耗时操作,导致界面卡死,不够友好. 我们可以创建一个单独的UI线程显示一个正在加载的窗口,可 ...
python自带编译器在写入文件时闪退，或者一步步执行到写入时提示8170。解决办法：
用python黑框运行程序写入文件时闪退,或一行行运行到写入时提示8170数字. 经试验,为文件路径错误导致. with open("1.doc", "wb") ...
python爬取网业信息案例
需求:爬取网站上的公司信息代码如下: import json import os import shutil import requests import re import time reques ...
个人项目开源之Django图书借阅系统源代码
Django写的模拟图书借阅系统源代码已开源到码云源代码
Thymeleaf常用语法：模板片断
系统中的很多页面有很多公共内容,例如菜单.页脚等,这些公共内容可以提取放在一个称为“模板片断”的公共页面里面,其它页面可以引用这个 “模板片断”内容. 一.模板片断的定义可以是html标签,也可以使 ...
[20191106]善用column格式化输出.txt
[20191106]善用column格式化输出.txt # man columnDESCRIPTION The column utility formats its input into mu ...
在没有备份的情况下重新创建丢失的数据文件 (Doc ID 1149946.1)
Recreating a missing datafile with no backups (Doc ID 1149946.1) APPLIES TO: Oracle Database - Enter ...
安装 tensorflow 1.1.0；以及安装其他相似版本tensorflow遇到的问题；tensorflow 1.13.2 cuda-10环境变量配置问题；Tensorflow 指定训练时如何指定使用的GPU；
# 安装 2.7 环境conda create -n python2. python= conda activate python2. # 安装 1.1.0 gpu版本pip # 配置环境变量expo ...
学习笔记：Django开发网上教育平台(参考了慕课网的教学视频)
第一步:进行环境的搭建(用到的IDE:pycharm ,数据库为mysql.nacicat.编辑语言python3.7.以及自己配置的虚拟环境venvpy37) Django==2.2 配置好 ...
ora-12505报错解决方法（转）
用oracle数据库新建连接时遇到ora-12505,此问题解决后又出现ora-12519错误,郁闷的半天,经过一番折腾问题解决,下面小编把我的两种解决方案分享给大家,仅供参考. 解决方案一: 今天工 ...

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