js基础一

原创 2018年04月15日 14:47:16
<html>
<head>
<meta http-equiv="refresh" content="2">
<script type="text/javascript">

var var01=1;
function funtst(){
document.write(var01);//undefined
var var01=0;
}

funtst();

                    /*相当于:

                              function funtst(){

                                    var var01;

document.write(var01);//undefined

                                        var01=0;

}

                        */

function funtst1(){

                                var var01=0;

                                document.write(var01);// 0


}
/*
主要原因:js的引擎预编译。
1.检测函数内部已声明该变量
a:如果声明在该条语句之前,若已赋值则输出该值,否则输出undefined
b:若声明在该条语句之后(这种情况叫做声明提前(hoisting)),输出undefined;
2.检测函数内部无该变量的声明,按照全局变量处理。
*/

/**
javascript基础语法
1.javascript是一种脚本语言,一种弱类型,动态类型,基于对象的编程语言,解释执行。
2.javascript用来操作html,css,能让网页动态显示。
3.Js语法:
通常写在head标签里<script>
4.变量命名规则:
(1)变量名必须以字母或下划线开头。
(2)变量可以包含数字、从 A 至 Z 的大小写字母。
(3)JavaScript 区分大小写。
5.由于js是一种弱势语言,声明所有类型变量用var
6.js数据类型
Number            专门保存数字类型
String            专门保存字符串类型
boolean           专门保存逻辑真假的类型
undefined         专门保存声明变量但没有赋初值
null              表示不指向任何地址
全局变量不需要以 var 关键字进行声明,但局部变量则必须
以此关键字来声明。
注意:为一个从未声明过的变量赋值,不会出错,会自动创建同名变量,在保存数据。
变量作用域:
局部变量会在函数运行以后被释放。
全局变量会在页面关闭后被释放。
7.运算符
(1)算术比较符
+, - ,* ,/,%,++,--
i++:先赋值,再自增参与运算。
++i:先自增,在赋值参与运算。
(2)关系运算符
==   !=    =>   =< 
(3)逻辑运算符
&&   ||  !
8.条件语句if以及if-else
If(判断条件){
判断条件为真时,执行的代码块
}else if(if条件不满足时转入这里,进行判断){
Else if里的条件为真的时候,执行的代码块
}else{
其他所有情况下,执行的代码块
}
1.switch case 语句
(1) 语法:  
switch ( 表达式 )  {
case   常量 : js语句 ;break;
case   常量: js语句 ;break;
...
default:js语句;break;
(2)执行流程:
先执行表达式的值,然后去大括号里找相对应的case,找到后,执行相对应的js语句,如果没有关键字break,会继续执行随后的case中的js语句直至switch结束,遇到关键字break直接跳出,假如找不到对应的case,则执行default后面语句 ;
2.循环 (三种循环结构:for    while    do-while)
(1)for循环:
①语法:
for ( 表达式1 ;表达式2 ;表达式3 ; ) {
循环体
}
注释:
表达式1     循环变量的初始化 ;
表达式2     循环条件 ;
表达式3     循环变量的值改变 ;
循环体:   需要重复的语句 ;
②  执行流程
1  先执行表达式1 ;
2  判断表达式2的真假,若为真,执行第3步,否则循环结束;
3  执行循环体 ;
4  执行表达式3 ;
5  从第2步再开始 ;
(2)while循环
①  语法:
while(表达式) {
 循环体
}
②  执行流程: 先判断表达式真假,若为真则执行循环体 ;
否则循环结束 。
(3)do-while循环
①  语法:
do {
循环体
} while(表达式) ;     
②  执行流程:  先执行循环体,然后判断表达式真假。
若为真,继续执行循环体,否则结束循环。
③  do-while 和 while 的区别:while 循环可能一次也不执行,do-while 至少会执行一次。
3.数组
(1)一维数组:
a.  var arry=[3,4,5]//定义一个一维数组,数组元素为3,4,5
b. 使用Array内置对象 
var arry=new Array(5)//定义一个一维数组,数组长度为5,数组现在元素值为undefined
var arry=new Array(3,4,5)//定义一个一维数组,数组元素为3,4,5
(2)二维数组
a.var arry=[[1,2,3],[4,5,6]]//定义一个二维数组,数组元素为
1 2 3
4 5 6
b.var arry = new Array(4);  //先声明一维
for(var k=0;k<arry.length;k++){    
arry[k]=new Array(3);  //声明二维,每一个一维数组里面的一个元素都是一个数组;
for(var j=0;j<arry[k].length;j++){ 
 array[k][j]=(Math.random())*10;    
}
}
常用属性:length 返回数组长度
常用方法:
join(separator)
separator:可选,指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
将数组中所有元素放入一个字符串,元素通过指定分隔符进行分隔。
reverse()
颠倒数组中的元素并返回数组
sort(sortby)
sortby:可选,规定排序顺序,必须是函数。
对数组进行排序。
push()
向数组末尾添加元素,并返回数组新的长度。
unshift()
向数组开头添加元素,并返回新的长度。序。必须是函数。
注释:此方法在IE浏览器下无法正确工作,显示为undefined。
pop()
删除数组中的最后一个元素,并与之返回。
shift()
删除数组中的第一个元素,并与之返回。
4.函数
(1)函数定义(参数列表不需要定义类型)
①function 方法名(参数列表){
方法体;
}
② var  方法名=function(参数列表){
方法体;
}
函数调用:方法名();
5.js对象
(1)String对象
①String对象创建
a.var str=”abc”;
b.var str=new String(“abc”);
②属性:length   返回字符串长度
③常用方法:
indexOf(searchvalue,fromindex)
searchvalue:必需。规定需检索的字符串值。
fromindex:可选的整数参数。规定在字符串中开始检索的位置。如省略该参数,则将从字符串的首字符开始检索。
返回指定字符串在字符串中首次出现的位置。
substring(start,stop)
start:必需,一个非负的整数,规定要提取的子串的第一个字符在主串中的位置。
stop:可选。一个非负的整数,比要提取的子串的最后一个字符在主串中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。
此方法返回的子串包括 start 处的字符,但不包括 end 处的字符。
substr(start,length)
start:必需,要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。即-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。(取负值,IE浏览器无法正常运行)。
length:可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从主串的开始位置到结尾的字串。
(3)Math对象
属性:PI  圆周率π
常用方法:
random()           返回0到1之间的随机数。
round(n)            把数字n四舍五入最接近的整数。
var number=Math.random();
//四舍五入 o,1
var numberInt=Math.round(number*8);
//js对象,浏览器对象,dom对象(三大对象)
//String字符串:indexOf,substr,subString
*/
var number=0;
for(var i=0;i<8;i++){
number=number+8;
document.write("这是第"+i+"次循环"+"<br/>");
if(i==7){
document.write("循环结束");
}
}
document.write("<br/>");
var n=4;
for(var i=0;i<2*n-1;i++){
for(var j=0;j<2*n-1;j++){
if((i<n)&&(j<(n-i-1))||(j>=(n+i))||(i>=n)&&(j<=(i-n)||(j>=(3*n-i-1-1)))){
document.write("&nbsp;&nbsp;");
}else{
document.write("*");
}
}
document.write("<br/>")
}
/*兔子问题*/
var month=5;
var f1=1,f2=1;
for(var i=2;i<month;i++){
var temp=f2;
f2=f1+f2;
f1=temp;
}
document.write(month+"月兔子总数为:"+f2+"<br/>");
var array=[[1,3,3],[2,5,6],[0,8,9]];
var array1=new Array(4,1,2,4,5);
var array2=[1,3,5,7];
for(var i=0;i<array2.length;i++){
document.write(array2[i]+"<br/>");
}
//alert(array1.unshift(0));
function myJoin(array){
var str="";
for(var i=0;i<array.length;i++){
str=str+array[i];
}
document.write(str+"<br/>");
}
myJoin(array1);
function myReverse(array){
var length=array.length;
for(var i=0;i<array.length/2;i++){
array[i]=array[i]^array[length-1-i];
array[length-1-i]=array[i]^array[length-1-i];
array[i]=array[i]^array[length-1-i];

}
document.write(array1+"<br/>");
}
myReverse(array1);
function mySort(array){
for(var i=0;i<array.length-1;i++){
for(var j=0;j<array.length-1-i;j++){
if(array[j]>array[j+1]){
array[j]=array[j]^array[j+1];
array[j+1]=array[j]^array[j+1];
array[j]=array[j]^array[j+1];
}
}
}
document.write(array);
}
mySort(array1);
//document.write(Myjoin(array1));
/*alert(array.join());
alert(array.reverse());
alert(array.sort());
alert(array.push(array1));*/
function caculate(operator){
var num1=document.myName.myNumber1.value;
var num2=document.myName.myNumber2.value;
if(operator=="/"&&num2==0){
alert("除数不能为零,请重新输入");
}else{
var result=eval(num1+operator+num2);
document.myName.myResult.value=result;
}
}
var stringMine="acdefg";
document.write(stringMine.indexOf("c"),0);
var number=Math.random();
//四舍五入 o,1
var numberInt=Math.round(number*8);
document.write("<img src='jygbn'>"+numberInt);


</script>
<style type="text/css">
.btn{
width:50px;
height:50px;
margin:10px;
}
body{
  margin-left:30%;
 }
</style>
</head>
<body>
<form name="myName">
<input type="button" name="test" id="test" onClick="funtst()" value="test"/><br/>
数字1:<input type="text" name="myNumber1" id="" value=""/><br/>
数字2:<input type="text" name="myNumber2" id="" value=""/><br/>
<input type="button" class="btn" value="+"  onclick="caculate(this.value)" border="100px" />
<input type="button" class="btn" value="-"  onclick="caculate(this.value)" />
<input type="button" class="btn" value="*"  onclick="caculate(this.value)" />
<input type="button" class="btn" value="/"  onclick="caculate(this.value)" /><br/>
计算结果:<input type="text" name="myResult" id="" value=""/><br/>
<form>
</body>
</html>

JavaScript基础系列1---初探JavaScript

初探JavaScript 系列1:初探JavaScript 系列2:数据类型和运算符 系列3:选择结构 系列4:循环结构 些列5:函数 一、JavaScript概述 ...
  • u012468376
  • u012468376
  • 2016年11月29日 20:27
  • 744

javascript快速入门第二章基础知识(下)

我们继续学习js剩下的基础内容 Math对象: 常用的有 向上取整 Math.ceil(x) document.write(Math.ceil(3.3)+""); docume...
  • qq_19558705
  • qq_19558705
  • 2015年11月15日 15:48
  • 4061

JS初级基础

JavaScript基础 一、 js代码的应用 1.     使用标签将js代码应用到HTML文档中 1)    作用:将JS代码应用到HTML文档中,该标签的位置是任意,通常放在被修饰内容下面...
  • smileboyjian
  • smileboyjian
  • 2017年05月20日 11:59
  • 777

JS:js基础【一】

一.JS的一些语法特性 1.值类型自转换 1.1 Boolean类型的自动转换 var b=Boolean(obj); //当obj为0,NaN,""(空字符串),undefine...
  • szt11
  • szt11
  • 2012年01月05日 08:57
  • 124

JS基础整理+实例

JavaScript 是脚本语言 JavaScript 对大小写是敏感的。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代...
  • pakuma07
  • pakuma07
  • 2015年07月24日 21:12
  • 1469

js基础测试题学习笔记20170305

课堂笔记练习: 1. 有一个名为 arr 的数组中,存放着 [1,2,3,4,5,6,7,8,9] , 请将该数组中第一个是 3 的倍数的数字打印到 控制台中 2. 在页面中打印向上的直角三角形,  ...
  • qq_37765513
  • qq_37765513
  • 2017年03月05日 13:52
  • 793

web前端面试中常见的js基础又实用的知识回顾

js基础但又实用知识的回顾 知识点:typeof、instanceof和constructor 1. js中5种原始数据类型: Number String Boolean Undefined Nu...
  • u014326381
  • u014326381
  • 2016年08月14日 15:53
  • 977

JS入门基本教程(适合没编程基础新手)

将JavaScript 插入网页的方法 使用标签在网页中插入Javascript代码。 插入JavaScript 与在网页中插入CSS的方式相似。使用下面的代码可以在网页中插入Java...
  • hewei0241
  • hewei0241
  • 2012年11月12日 19:40
  • 28791

js基础小例子

DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> input type...
  • Vivian_shuang
  • Vivian_shuang
  • 2016年07月12日 08:20
  • 325

JS基础学习笔记整理

JavaScript是一种基于对象的脚本编程语言,是浏览器上的程序语言。当web容器输出内容到浏览器时,这个内容是包含js源代码的,此时,JavaScript可以操作浏览器上的一切内容,在浏览器上提供...
  • laoma4102
  • laoma4102
  • 2011年12月30日 13:30
  • 7523
收藏助手
不良信息举报
您举报文章:js基础一
举报原因:
原因补充:

(最多只允许输入30个字)