文档章节

JavaScript

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 14:01
字数 1353
阅读 3
收藏 0
点赞 0
评论 0

1.什么是javaSript?

  • 基于对象和事件驱动的脚本语言

  • 基于对象:只有封装的概念

  • 事件驱动:eg:点击,滑动手机屏幕

  • 只需要浏览器解释执行

  • js一些特点:
  1. ​ 跨平台性
  2. ​ 交互性
  3. ​ 安全性
  • JavaScript的组成部分:

                                       

2.js可以做什么?

  • 操作html标签(可以使页面动起来),服务器....

  • html当做毛坯房,css装修,js智能家居

3.javeScript和java的联系和区别

  • js是基于对象的,java是面向对象的

  • js只需要浏览器解释执行,java需要编译成class文件,再执行

  • js是弱类型语言,java是强类型语言

int i = 3;  i ="aaa"; java不可以
var i = 3;  i= "aaa"; js是可以的

4.html和js结合方式

  • 内部结合
<script>
alert("哈哈哈");
</script>
  • 外部引入
  1. 定义一个js文件,扩展名是js
  2. ,通过script标签引入
<script type="text/javascript" src="../../js/test.js" >
//js代码不会执行      ​ 属性:  src:js文件路径
</script>

注意:

​ 通过外部引入,script标签里面的js代码不会执行

5.js变量

int i = 3;  var i = 3;
String str = "aaa"; var str = "aaa";
  • js变量都是通过var来定义的

6.js数据类型

基本数据类型

  1. ​ Undefined; 声明了变量,但没有赋值; var i;
  2. ​ Null;
  3. ​ Boolean
  4. ​ Number; 数字类型;
  5. ​ String;

引用数据类型

  1. ​ js内置对象: 数组,Math,Date....
  2. ​ document.getElementById("id名");

运算符

number类型和字符串做-,*,/的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型

var i = 3;
var j = "6";
alert(j-i);//结果是3, "6" ==> 6
alert(j*i);//结果是18,
alert(j/i);//结果是2,

除法,保留小数

var i = 2;
var j = 5;
alert(j/i);//2.5

==比较数值,=== 比较数值和类型

var i = 2;
var j = "2";
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

8.js语句

  • for

    //99乘法表
        <script>
            for(var i = 1; i<=9 ; i++){
                for(var j =1; j <= i;j++){
                    document.write(j+""+i+"="+ji);
                    //空格
                    document.write("&nbsp");
                }
                //换行
                document.write("<br />");
            }
        </script>
  • if-else

  • while()

switch

<script>
    var str = "java";
​
    switch (str){
        case "java":
            alert("java");
            break;
        case "C++":
            alert("C++");
            break;
​
        case "Android":
            alert("Android");
            break;
​
    }
</script>

9.js函数(方法)

  • function 函数名(参数,参数){函数体}

注意:

​ 不管有没有返回值,函数格式是一样的 function 函数名(参数列表){函数体}

​ 如果有参数,参数不需要加var关键字(不需要加类型)

eg:	function getSum(i,j){
			return i+j;
		}	
	var sum =  getSum(5,6);
	alert(sum);

10.全局变量和局部变量

<script>
		//全局变量====> 作用范围不一样,生命周期不一样
		var i = 10;
	
		function sayHello(){
			//局部变量
			var j = 5;
			//console.log("hello..");
			i = i+10;
		}
		sayHello();
//		console.log(j);
		console.log(i);//20
</script>

定义在函数体里的是局部变量,定义在函数体外的是全局变量

作用范围不一样

11.js开发步骤(操作html)

  1. 确定事件 点击,获得焦点....
  2. 创建一个函数响应这个事件
  3. 得到要操作的对象(document.getElementById("id名")) ;
  4. 操作这个对象(改变属性值等)

12.定时任务

setInterval(code,time) 按照指定的周期(以毫秒计)来调用函数或计算表达式

  1. 参数说明: code即执行的代码;
  2. ​ 方式一: 函数名 setInterval(show,3000);
  3. ​ 方式二:函数字符串 setInterval("show()",3000);
  4. ​ time:时间,单位毫秒

setTimeout(code,time):在指定的毫秒数后调用函数或计算表达式,延时执行

  1. 参数说明: code即执行的代码;
  2. ​ 方式一: 函数名 setTimeout(show,3000);
  3. ​ 方式二:函数字符串 setTimeout("show()",3000);
  4. ​ time:时间,单位毫秒

13.BOM里面的五个对象

window: 窗体对象

方法 作用
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

navigator:浏览器对象

属性 作用
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息

screen:屏幕对象

方法 作用
width 返回显示器屏幕的宽度
height 返回显示屏幕的高度

history:历史对象

方法 作用
back() 加载 history 列表中的前一个 URL
forword() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面

location:当前路径信息

属性 作用
host 设置或返回主机名和当前 URL 的端口号
href 设置或返回完整的 URL
port 设置或返回当前 URL 的端口号

14.js常用事件

  • onclick;点击事件

  • onload;等页面或者图片加载完成

  • onfocus;获得焦点

  • onblur;失去焦点

  • onchange;元素的内容改变, 通常用在下拉菜单里面

  • onkeydown 某个键盘的键被按下

  • onkeypress 某个键盘的键被按下或按住

  • onkeyup 某个键盘的键被松开

  • onmousedown 某个鼠标按键被按下

  • onmousemove 鼠标被移动

  • onmouseout 鼠标从某元素移开

 

innerHTML:向一块区域插入html

支持html;会把之前的内容覆盖

function writeIn(){
			//获取span对象
			var  spanObj =  document.getElementById("spanId");
			//spanObj.innerHTML = "你好世界";
			//支持html,会把之前的内容覆盖
			spanObj.innerHTML = "<font color='red'>你好世界</font>";
			
		}

 

© 著作权归作者所有

共有 人打赏支持
勤劳的开发者px
粉丝 2
博文 51
码字总数 108225
作品 0
荆州
程序员

暂无相关文章

Day 17 vim简介与一般模式介绍

vim简介 vi和Vim的最大区别就是编辑一个文件时vi不会显示颜色,而Vim会显示颜色。显示颜色更便于用户编辑,凄然功能没有太大的区别 使用 yum install -y vim-enhanced 安装 vim的三种常用模式...

杉下 ⋅ 59分钟前 ⋅ 0

【每天一个JQuery特效】根据可见状态确定是否显示或隐藏元素(3)

效果图示: 主要代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>根据可见状态确定 是否显示或隐藏元素</title><script src="js/jquery-3.3.1.min.js" ty......

Rhymo-Wu ⋅ 今天 ⋅ 0

OSChina 周四乱弹 —— 初中我身体就已经垮了,不知道为什么

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @加油东溪少年 :下完这场雨 后弦 《下完这场雨》- 后弦 手机党少年们想听歌,请使劲儿戳(这里) @马丁的代码 :买了日本 日本果然赢了 翻了...

小小编辑 ⋅ 今天 ⋅ 12

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部