Web前端页面设计基础-JavaScript基础

智能联想
创建一个无序列表,里面包含5项
UI>li5
创建一个2行2列的表格
div>table>(tr>td
2)*2
javascript 是事件驱动的一门语言(要先有个事件触发他,然后js再去做相应的事情)

JavaScript的作用

1.可以实现网页间的动态效果
2.可以实现表单验证,减轻服务器压力。
JavaScript是对象和事件结合,触发一段代码。
JavaScript是脚本语言,与java不同,java属于编译语言,脚本语言不需要像java那样编译器,而直接可以运行在电脑上的程序,就叫脚本语言。而编译语言需要编译器编译成字节,再放在电脑上运行。

JavaScript的组成

ecmascript---全球的脚本语言标准
dom-document object model 文档模型
bom-brower object model
浏览器模式


网页中如何位置只要嵌入如下代码,就可以执行JavaScript脚本
<script type="text/javascript">

</script>

javascript也可以缩写js
js中注释//
调用:var value=aaa(3,14,5,6)
console.log(value1);
script标签可以写在header中,body中,body的下面都可以。
执行时机:首先要加载到网页中,并且被触发了,才执行。


document.write()向文档流中写入某些内容(向网页中打印内容)。
document 对象是js中最常见的对象,表示网页文档(空白区域)


js引入的三种方式
1.页内引入 直接写script脚本
2.外部链接 script src
3.行内引用 JavaScript:***();
通常可以写js给我们自带的一些方法。


js核心语法

js是一门弱型的编程语言,区别于java,java可以叫强类型的编程语言,区别:变量定义时不用指定数据类型,数组存储数据时,可以多种数据类型的值存在在一个数组中。
1.变量
--定义用var开头
--变量名规范同java
(先声明变量再赋值
例:var width;width=5;
同时声明和赋值变量
例:var catName=“皮皮”;var x,y,z=10;
不声明直接赋值
例:width=10;
变量可以不声明直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用)
--js严格区分大小写,a A是两个变量。
var lowwer=shuzu[i].toLowerCase()转换成小写单词。
indexOf()判断查找某个指定的字符串在字符串中首次出现的位置。
charAt(index)返回在指定位置的字符。
定以后,变量表示尚未初始化,是undefined的,只有给他赋值后,才能使用。
2.数据类型
number 数值型
NaN 非数值型 isNaN()
boolean
Date
String
undefined
null
数组
对象类型
3.String类型的相关使用
4.typeof()--判断返回某个变量的数据类型是什么
-undefined:变量被声明后,但未被赋值
例:var i;
-string:用单引号或双引号来声明的字符串
-boolean:true或false
-number:整数或浮点数
-object:JavaScript中的对象,数组和null

核心语法-数组

创建数组
var 数组名称=new Array(size)

数组常用属性和方法

属性:length设置或返回数组中元素的数目
方法:1.join()把数组的所有元素放入一个字符串,通过一个分隔符进行分隔
2.sort()对数组排序

if条件语句循环语句

图片.png

循环中断


图片.png

核心语法-常用的输入、输出

alert(“提示信息”)
prompt(“提示信息”,“输入框的默认信息”)
例:prompt(“请输入姓名”,“张三”)
prompt(“请输入姓名”)

核心语法

代码区分大小写
变量,对象和函数的名称
分号
调用函数
函数调用一般和表单元素的事件一起使用,调用格式:
事件名=“函数名()”;

常用系统函数

parseInt(“字符串”)
将字符串转换为整型数字
如:parseInt(“86”)将字符串“86”转换为整型值86.
parseFloat(“字符串”)
将字符串转换为浮点型数字
isNaN()用于检查其参数是否是非数字

自定义函数语法

function函数名(参数1,参数2,参数3...){
//JavaScript语句;
【return返回值】
}

函数定义:函数没有返回值声明,函数里如果没有return,就是没有返回值,或者return


图片.png

函数入参,不能有var

没有入参,就没有返回值
函数的入参可以是函数
-自定义函数使用关键字function,调用函数常使用的格式:事件名=“函数名()”;
所有从页面上收集上来的数都是字符串
parseInt字符串转整数
parseFloat字符串转小数
Number(“2”)--2,Number(“2.2”)--2.2,

Number(“2a”)--NaN,
eval(num1+operator+num2)将数字和字符串转换成正

常表达式运算而不是拼接
setTimeout("showDate()",1000) 入参1 函数名,入参

2 毫秒数
setTimeout()延时一段时间再执行
setInterval()每隔一段时间执行
showDate()在页面上实时显示系统时间
js es5 变量的作用域分为两种,一种是函数级(var)

,一种是全局(不写var)
es6 let声明变量 块级作用域

总结:

-在HTML页面中引用JavaScript有三种方式
-常用的输入/输出是prompt()和alert()方法。
-常用的系统函数有parseInt(),parseFloat()和isNaN();

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

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,051评论 0 3
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,092评论 0 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,381评论 1 45
  • 第一章 前端三大语言:HTML(专门编写网页内容)、CSS(编写网页样式)、JS(专门编写网页交互行为) 能简写尽...
    fastwe阅读 919评论 0 0
  • 今晚睡不着,让我想起了我的外婆,心里有点难受,一时之间就不太舒服了。 外婆,我是你的大孙女,ZYY,今年...
    猪猪傻呆阅读 326评论 0 1