【JavaScript(一)】JavaScript基础

【JavaScript显示数据】

JavaScript 可以通过不同的方式来输出数据:

  • 使用window.alert()弹出警告框。
  • 使用document.write()方法将内容写到 HTML 文档中。
  • 使用innerHTML写入到 HTML 元素。
  • 使用console.log()写入到浏览器的控制台。
【JavaScript字面量】

数字(Number)字面量:

1001
123e5  //科学计数

字符串(String)字面量:

“Don for gen”

表达式字面量:

5 + 6
5 * 10

数组(Array)字面量:

[40, 100, 1, 5]

对象(Object)字面量:

{
    firstName:"John",
    lastName:"Doe", 
    age:50, 
    eyeColor:"blue"
}

函数(Function)字面量:

function myFunction(a, b) { 
    return a * b;
}
【JavaScript变量】

JavaScript 使用关键字var来定义变量, 使用等号来为变量赋值。
变量声明之后,该变量是空的(其值实际上是 undefined)。
变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。变量是一个名称。字面量是一个

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)
【JavaScript操作符】

JavaScript操作符

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

比较运算符
逻辑运算符
【JavaScript关键字】
JavaScript关键字
【JavaScript 注释】
单行注释以 // 我不会执行
多行注释以 /* 开始,以 */ 结尾。
[【JavaScript 数据类型】

在 JavaScript 中有 5 种不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

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

var length = 16;            // Number 通过数字字面量赋值
var points = x * 10;            // Number 通过表达式字面量赋值
var lastName = "Johnson";     // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];// Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};// Object 通过对象字面量赋值
【对代码行进行折行】

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("你好 
\世界!");

不过,不能像这样折行:

document.write \ 
("你好世界!");
【JavaScript对象】

JavaScript 对象是拥有属性和方法的数据。
键值对在 JavaScript 对象通常称为对象属性

对象键值对的写法类似于:

  • PHP 中的关联数组
  • Python 中的字典
  • C 语言中的哈希表
  • Java 中的哈希映射
  • Ruby 和 Perl 中的哈希表

对象定义:

varperson = {
    //定义对象属性
    firstName:"John", 
    lastName:"Doe", 
    age:50, 
    eyeColor:"blue",

    //定义对象方法
    methodName : function() { code lines }
    
};

//访问属性
//实例1
person.firstName;
//实例2
person["lastName"];

//访问对象方法
objectName.methodName()
【JavaScript函数】
//普通函数
function functionname() {
    执行代码
}
//带参数的函数
function myFunction(var1, var2) {
    代码
}
//带返回值的函数
function myFunction() {
    var x=5;
    return x;
}
【JavaScript事件】

事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

//
<button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>
//
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
//
<button onclick="displayDate()">现在的时间是?</button>
onload:     网页加载时要触发的事件
onunload:           关闭网页或刷新时要触发的事件
onclick:          单击某控件时触发
ondblclick: 双击某控件时触发
onsubmit:         在表单提交前进行验证,该事件只能在<form>元素中使用
onchange:   文本框内容改变事件
onmouseover:    把鼠标放在元素上时触发
onmouseout: 把鼠标从该元素移开时触发
onmousemove:    鼠标在某个元素上移动时持续触发
onmousedown:    按任何一个鼠标按键时触发
onmouseup:  释放任意一个鼠标按键时触发
onreset:          当表单被重置
onselect:         当元素被选中
onblur:     当元素失去焦点时触发
onfocus:          当元素获得焦点时触发
onkeydown:  键盘键被按时触发,如果一直按着某键则会不断触发
onkeypress: 按键盘键并产生一个字符时发生,当按shift或alt等按键时不会触发,如果一直按按键会不断触发
onkeyup:    释放键盘上的按键时触发
onabort:    载入对象被中断时触发
onerror:    出现错误时触发
onscroll:   在任何带滚动条的元素或窗口上滚动时触发
JavaScript 可以做什么?

事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...
【JavaScript字符串】

在 JavaScript 中,字符串写在单引号或双引号来中。
可以使用内置属性length来计算字符串的长度:

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

你可以使用索引位置来访问字符串中的每个字符:

var carname = "Volvo XC60";
var character = carname[7];

可以在字符串添加转义字符来使用特殊符号:

转义字符

也可以使用 new 关键字将字符串定义为一个对象:

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // �返回 Object

不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用

字符串属性和方法

属性:

constructor //返回创建字符串属性的函数
length    //返回字符串的长度
prototype        //允许您向对象添加属性和方法

方法:

charAt()    //返回指定索引位置的字符
charCodeAt()    //返回指定索引位置字符的 Unicode 值
concat()    //连接两个或多个字符串,返回连接后的字符串
fromCharCode()  //将 Unicode 转换为字符串
indexOf()   //返回字符串中检索指定字符第一次出现的位置
lastIndexOf()   //返回字符串中检索指定字符最后一次出现的位置
localeCompare() //用本地特定的顺序来比较两个字符串
match() //找到一个或多个正则表达式的匹配
replace()   //替换与正则表达式匹配的子串
search()    //检索与正则表达式相匹配的值
slice() //提取字符串的片断,并在新的字符串中返回被提取的部分
split() //把字符串分割为子字符串数组
substr()    //从起始索引号提取字符串中指定数目的字符
substring() //提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() //根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase() //根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()          //把字符串转换为小写
toString()         //返回字符串对象值
toUpperCase()   //把字符串转换为大写
trim()  //移除字符串首尾空白
valueOf()        //返回某个字符串对象的原始值
【typeof 操作符】

可以使用 typeof 操作符来检测变量的数据类型。

typeof"John"// 返回 string
typeof3.14// 返回 number
typeoffalse// 返回 boolean
typeof[1,2,3,4]// 返回 object
typeof{name:'John', age:34}// 返回 object
typeofundefined// undefined
typeofnull// object
null=== undefined// false
null== undefined// true
【constructor 属性】

constructor属性返回所有 JavaScript 变量的构造函数。

"John".constructor// 返回函数 String() { [native code] }(3.14).constructor// 返回函数 Number() { [native code] }
false.constructor// 返回函数 Boolean() { [native code] }[1,2,3,4].constructor// 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor// 返回函数 Object() { [native code] }
newDate().constructor // 返回函数 Date()  { [native code] }
function() {}.constructor // 返回函数 Function(){ [native code] }
【JavaScript 类型转换】

JavaScript 变量可以转换为新变量或其他数据类型:

  • 通过使用 JavaScript 函数
  • 通过 JavaScript 自身自动转换
转换为字符串

全局方法String()可以转换为字符串。该方法可用于任何类型的数字,字母,变量,表达式。
方法toString()也是有同样的效果。

将字符串转换为数字

全局方法Number()可以将字符串转换为数字。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容