Javascript基础学习笔记(菜鸟必看篇)


Posted in Javascript onJuly 22, 2016

什么是变量?

变量是用于存储信息的容器

变量的声明

语法:

var 变量名

变量名 = 值;

变量要先声明再赋值

变量可以重复赋值

变量的命名规则

变量必须以字母开头;

变量也能以$和_符号开头(不过我们不推荐这么做);

变量名称对大小写敏感(a和A是不同的变量)。

语句

语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾。

有个好的编码习惯,都要以 ; 结尾

数据类型

JavaScript中,一段信息就是一个值(value)。值有不同的类型,大家最熟悉的类型是数字。字符串(string)值是包围在

引号中的一个或多个单词。

数字    任何数字值。数字可以带小数点,也可以不带    68.57

字符串    引号中的字符。您可以使用单引号或双引号    "hello, world"

布尔值(Boolean)    truefalse    true

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

对象    与对象相关联的任何值    

函数    函数返回的值    

1 var a; //a为undefined
2 var a = 6; //a 为数字
3 var a = "Jason"; // a 为字符串

什么是函数?

函数是一组执行某一任务的JavaScript 语句

基本语法:

function 函数名(){
  函数代码;
}

函数名();

说明:

function定义函数关键字。

"函数名"你为函数取的名字。

"函数代码"替换为完成特定功能的代码。

"第二个函数名"函数调用的一种

1 function add2(){
2 var sun = 3 + 2;
3 alert(sun);
4 }
5 add2();//调用函数直接写函数名直接弹出函数代码
1 <input type="button" value="点击我" onclick="add2()" />
2 <!-- 单击按钮后,调用函数,onclick为点击事件 -->

输出内容(document.write)

document.write()直接在网页中输出内容。

第一种:输出内容用“”括起,直接输出“”号内的内容。

document.write("I love JavaScript!");

第二种:通过变量,输出内容 

var mystr = "hello world";
document.write(mysrt);//直接写变量名,输出变量存储的内容

第三种:输出多项内容,内容之间用+号连接。

var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接

第四种:输出HTML标签,并起作用,标签使用“”括起来。

var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
document.write("JavaScript");

警告(alert 消息对话框)

我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任

何操作,这个小窗口就是使用alert实现的。

语法:alert(字符串或变量);

 

var mynum = 30;
alert("hello!");
alert(mynum);

 结果:按顺序弹出消息框(alert弹出消息对话框包含一个确定按钮)

注意:

1. 在点击对话框"确定"按钮前,不能进行任何其它操作。

2. 消息对话框通常可以用于调试程序。

3. alert输出内容,可以是字符串或变量,与document.write 相似

确认选择(confirm 消息对话框)

除了向用户提供信息,我们还希望从用户那里获得信息。这里就用到了confirm 消息对话框。

confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:confirm(str);

参数说明:str:在消息对话框中要显示的文本 返回值:Boolean值

返回值:

当用户点击"确定"按钮时,返回true

当用户点击"取消"按钮时,返回false

注: 通过返回值可以判断用户点击了什么按钮

<script type="text/javascript">
  var mymessage=confirm("你喜欢JavaScript吗?");
  if(mymessage==true){
    document.write("很好,加油!"); 
  }else{
    document.write("JS功能强大,要学习噢!");
  }
</script>

提问(prompt 消息对话框)

有时候,不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。

语法:

prompt(str1,str2);

参数说明:

str1:要显示在消息对话框中的文本,不可修改

str2:文本框中的内容,可以修改

返回值:

1、点击确定按钮,文本框中的内容将作为函数返回值

2、点击取消按钮,将返回null

function rec(){
  var score; //score变量,用来存储用户输入的成绩值。
  score = prompt("请输入你的成绩","90");
  if(score>=90){
    document.write("你很棒!");
  }else if(score>=75){
    document.write("不错吆!");
  }else if(score>=60){
    document.write("要加油!");
  }else{
    document.write("要努力了!");
  };
} ;
<script>
    var myName = prompt("输入您的名字");
     if(myName != null && myName != ""){
      document.write("welcom to" + myName);
    }else{
      document.write("welcom to my friend");
    }
</script>

打开新窗口(window.open)

语法:

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。

窗口名称:可选参数,被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。

2.窗口名称:可选,该字符串是一个由逗号分隔的特征列表,声明了被打开窗口的名称。可以

"_top"、"_blank"、"_selft"、"_parent"等。

_blank 在新窗口显示目标网页

_selft 在当前窗口显示目标网页

_parent 框架网页中当前整个窗口位置显示目标网页

_top 框架网页中在上部窗口中显示目标网页

3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。

4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:

top

Number

窗口顶部离开屏幕顶部的像素数
left

Number

窗口左端离开屏幕左端的像素数
width

Number

窗口的宽度
height

Number

窗口的高度
menubar

yes,no

窗口有没有菜单
toolbar

yes,no

窗口有没有工具条
scrollbars

yes,no

窗口有没有滚动条
status 

 yes,no

窗口有没有状态栏

<script type="text/javascript">
   window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
 </script>

关闭窗口(window.close)

close()关闭窗口

用法:

1 window.close();//关闭本窗口
2 <窗口对象>.close();//关闭指定的窗口

例如:关闭新建的窗口。

1 <script type="text/javascript">
2   var mywin=window.open('https://3water.com'); //将新打的窗口对象,存储在变量mywin中
3   mywin.close();
4 </script>

innerHTML属性

innerHTML属性用于获取或替换HTML元素的内容。

语法:

Object.innerHTML

Object是获取的元素对象,如通过document.getElementById("ID")获取元素。

<h2 id="con">javascript</H2>
<script type="text/javascript">
var mychar=document.getElementById("con");

document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容

mychar.innerHTML="hello world"

document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>

改变HTML样式

语法:

Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素

<h2 id="con">I love JavaScript</h2>
<script type="text/javascript">
  var mychar= document.getElementById("con");
  mychar.style.color="red";
  mychar.style.background="#ccc";
  mychar.style.width="300px";
</script>

显示和隐藏(display属性)

语法:

Object.style.display = value

value值:

none 此元素不会被显示(及隐藏)

block 此元素将显示为块级元素(即显示)

mychar.style.display = "block"

控制类名(className属性)
className属性设置或返回元素的class属性。
语法:

object.className = classname

作用:
1、获取元素的class属性
2、为网页内的某个元素指定一个css样式来更改该元素的外观

p2.className = "two";

以上这篇Javascript基础学习笔记(菜鸟必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 #Javascript
高效Web开发的10个jQuery代码片段
Jul 22 #Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 #Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 #Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 #Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 #Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 #Javascript
You might like
用php来检测proxy
2006/10/09 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
Vue中props的详解
2019/05/16 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python实现简单多线程任务队列
2016/02/27 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python3中布局背景颜色代码分析
2020/12/01 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
主持人演讲稿
2014/05/13 职场文书
小学学校评估方案
2014/06/08 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
小平您好观后感
2015/06/09 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS