JS简介笔记及习题

JavaScript简介

概念

  • JavaScript主要用于HTML的页面,嵌入在HTML的源码中。,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站点和 Web 应用程序之间的交互。
  • JS是弱类型语言,没有类型声明,它的变量不必具有一个明确的类型。
    JS是脚本语言,换句话说,可以用来编程的并且直接执行源代码的语言,就是脚本语言。
  • JS也是解释性的语言。何为解释性语言?是在运行的时候将程序直接翻译成机器的语言。
  • JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
  • HTML5的出现更是突出了JavaScript的重要性,例如HTML5的绘图支持、本地存储、离线应用、客户端通信等,都大量使用了JavaScript。
  • JS不操作任何的数据,直接对用户和客户的输入做出相应。

特点

  • 简单性:它是基于Java基本语句和控制流之上的简单而紧凑的设计,是学习Java的好过渡,而且,它的变量类型是采用弱类型,未采用严格的数据类型。
  • 安全性:JS不允许访问本地硬盘,不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效的防止数据的丢失。
  • 动态性:JS可以直接对用户或客户输入做出响应,无须经过Web程序。它对用户的响应采用以事件驱动的方式进行,即由某种操作动作引起相应的事件响应,如:点击鼠标、移动窗口、选择菜单等。
  • 跨平台性:JS依赖于浏览器本身,与操作环境无关。只要能运行浏览器的计算机,并安装了支持JS的浏览器就可以正确执行,从而实现了“编写一次,走遍天下”的梦想。

组成

由ECMAScript、文档对象模型(DOM)、浏览器对象模型(BOM)。

注:

  • DOM描述了处理网页内容的方法和接口。通过DOM,可以访问所有的HTML元素,连同它们所包含的文本和属性,可以对其的内容增、删、改、查。
  • BOM描述了与浏览器进行交互的方法和接口
  • ECMAScript描述该语言的语法和基本对象
图片1.png
图片2.png

开发工具

1、记事本
2、EditPlus
3、Notepad++
4、HBuilder
5、WebStrom
6、Sublime (较好)

Javascript的工作原理

图片3.png

JavaScript的基本语法
<script type=”text/javascript”>
JavaScript语句;
</script >

注:

  • <script>…</ script>可以包含在文档中的任何地方,只要保证这些代码在使用前已读取并加载了所有的文档内容即可。所以,Script应写在body中的最后一个元素,以保证所有元素均被加载。
  • <script>有一个必选的属性type,用来指明脚本的类型,常用的是type=”text/javascript”(传统的写法,浏览器支持较好)。type的属性值也可选text/javascript、application/javascript、text/vbscript、text/jscript、text/x-javascript等。

网页中引用JavaScript的方式

1.内部添加,使用<Script>标签
语法:<script type=”text/javascript” ></script>
注:Script应写在body中的最后一个元素,以保证所有元素均被加载。
2.链接外部JS文件
语法:<script type=”text/javascript” src=”xxx.js” ></script>
注:引入Script语句应写在body中的最后,以保证所有元素均被加载。
3.在HTML标签中,作为某个元素的事件属性值或者是超链接href属性值
示例:
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
注:当即有内部添加,又有链接外部的JS文件时,
内部添加的语句不能添加到链接外部的JS文件的语句中,需要重新写一个内部添加的<script>…<script>语句。

注意事项

  • JavaScript的执行顺序:按照HTML文件中的顺序依次执行
  • JavaScript严格区分大小写,大小写敏感
  • JavaScript的语句与语句之间忽略空白符和换行符
  • JavaScript通过\对代码进行这行操作
  • JavaScript使用分号(;)结束语句时,最后一个的分号(;)可以省略,金陵不要省略。
  • JavaScript可以使用大括号{}括成一个语句组,形成一个块block

注释

  • 单行注释://注释内容
  • 多行注释:/注释内容/
  • 文档注释:/*注释内容/
    注:2、3的结果是一样的。

基本操作

1.alert();页面弹出框
注:

  • alert()的参数内容必须为字符串。
  • alert()的参数内容为中文时必须加双引号或单引号,而变量不必加。
  • alert()中换行时,使用转移字符\n。
  • 双引号中不能嵌套双引号,单引号中不能嵌套单引号,若要使窗口中的文字带有双引号,则必须使双引号的外面再次嵌套一个单引号。
  • 双引号内部不能换行。

2.document.write();向页面文档中写入内容(文本或标签)
注:

  • 可以解析标签,换行使用
  • 内容为字符串
  • 如果在文档已加载完成后执行document.write(),整个HTML页面将被覆盖

3.console.log();向控制台写入内容(主要用于检错)
注:

  • 只能写入文本,不能识别标签
  • 用于检错,检错不建议使用alert().

关键字和保留字

  • 关键字和保留字:在JS中具有特殊含义的单词
  • Javascript 的保留关键字不可以用作变量、标签或者函数名。
    • 标记的关键字是 ECMAScript5 中新添加的。
tupian.jpg

标识符

标识符:给变量、函数和对象等指定的名字
标识符的命名规则:
1.区分大小写。
2.标识符可以由字母、数字、下划线(_)和美元($)组成,但不能以数字开头。
3.不能喝关键字重复,见名之意。
4.习惯上,采用驼峰式命名,处第一个单词外,剩余单词首字母大写。

变量

变量概念
用于保存值或表达式,变量就是它的值是可以被改变的。
变量的命名规范
同标识符的命名规范一样。
变量的声明
声明变量:var 变量名;
变量赋值:变量名=值;
声明变量同时赋值:var 变量名=值;

注:a、同时声明多个变量用逗号(,)分开 eg. var a=1,b=2;
b、如果再次声明了JavaScript变量,该变量也不会丢失其原始值
eg. var x=5; var x;
c、重新赋值会抹掉原来的变量值
eg. var x=5; var x=7;
d、声明也可以跨行 eg. var userbame,
sex;

重点:

JavaScript的系统提示框

confirm():确定和取消的对话框

  • 表现:消息确认框,有两个按钮,一个确定,一个取消,消息框上会显
    示提示信息
  • 参数:(参数就是写在()里面的内容)
    参数只有一个,就是提示信息,提示信息是字符串的形式出现(意思是值必须有""或''引起来的)
  • 返回值:这个确认框会返回一个结果,结果是boolean类型,要么是true,要么是false;”确认”是true,”取消”是false.

*alert():提示框 *

  • 表现:警告框,有一个按钮,显示确定,警告框显示提示信息
  • 参数:只有一个,可以是任何类型
  • 返回值:无返回值
    注:
  • 内容若是字符串,则必须用双引号或单引号;若为变量名,则不用;若内容为数字,则不需要用双引号或单引号,直接写数字即可。
  • \n转义字符是字符串的一种,+(加号)为字符串连接符。

prompt():输入框
*表现:页面输入框,有两个按钮,一个确定,一个取消,消息框上会显 示提示信息,还会有一个输入框
*参数:有两个,均为字符串,第一参数是字符串类型,表示提示信息,第二个参数是输入框的默认值,第二个参数可以省略,若省略在ie中默认是undefined,在chrome和FF中默认是空字符串;若不省略,则第二个参数会显示在输入框中。
*返回值:返回的是输入的内容(字符串类型) 或者" "或者null
注:
*若一个变量,只定义未赋值,其值为undefined.
*返回值为字符串

总结

1、加号有两种用途:
a、”+”字符串连接符 b、运算符
2、parseFloat()
作用:将字符串类型的参数转换成浮点的数值类型。
3、document.getElementById('xx')
作用:是获取HTML中的Id号为xx的元素。
4、若将var numEl= document.getElementById('xx').value;
作用:就是获取xx元素的值,其为字符串类型。

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

推荐阅读更多精彩内容