javaScirpt_01(基础入门)

1.js的历史(网景通信公司)

布兰登10天时间开发liveScirpt 后面与Sun合作---javascript

2.同时期微软和 Nombas公司开发的jscript|scriptEase语言

3.欧洲计算机协会上三者制定了一套标准ECMAScript核心语法

4.js的组成

ECMAScript--核心语法(变量,选择结构,循环结构,数组等等操作) DOM:文档对象模型---通过DOM可以获取HTML文件中的任意标签,实现增删改查 BOM:浏览器对象模型,通过BOM可以对“数据的结果”进行输入输出以及获取浏览器上 的地址并且可以设置,历史记录,屏幕的宽度和高度以及浏览器的版本和引擎

5.js如何引入html中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        /*js的嵌入式*/
         <script type="text/javascript ">
             alert("好好学习,天天向上");
        </scripy>
    </head>
    <body>
            
 /*行内式js编写*/
<button onclick="alert(123)" onmouseover="this.style.backgroundColor='rad'"> 按钮</button>
      
/*嵌入式 借助script标签 */
alert();
    </body>
</html>




6.js中的输出语句:

alert(); 普通弹窗

confirm(); 确认弹窗,返回值是boolean类型

prompt(); 弹窗输入语句,类似Scanner

document.write("内容"); 向页面输出内容

终极输出

console.log(); 日志信息输出

console.info(); 普通信息输出

var f=confirm("你确定要和我分手吗?");

var name=prompt("请输入你的名字",”张三“);默认张三

alert(name);

document.write("我爱学习");

console.log("好好学习");
console.info("天天摸鱼");

7.js中的运算符:

算数运算符:+ - * / % ++ --

赋值运算符 += = -= *= /= %=

关系运算符 > < >= <= != == ===

逻辑运算符 && || !

三元运算符 表达式? 结果1:结果2

"===" 判断内容以及判断内容的类型

var a = 1;

var b = "1";

console.log(a==b);//true

console.log(a===b);//false

8.js的循环结构:

while循环

/*计算1到100的和*/
var num=1;
var sum=1;
while(num<=100){
    document.write(num+"<br/>");
    num++;
}
/*数组的基本使用*/
var names = ["张三","里斯","wangwu"];
for(var 1=0;i<names.length;i++){
    document.write(names[i]+"<br>");
}

js函数入门:

函数:就是方法,封装代码,方便调用

语法:

function 函数名称(){

结果集;

}

注意:需要手动调用,否则无效

function add(){
    var a=1;
    var b=1;
    alert(a+b);
}
/*直接调用*/
add();
/*间接调用*/
<button onclick="add();">按钮<button>

函数的调用有以下方式:

直接调用:

直接借助标签自带的事件属性

间接借助标签自带的事件属性

间接调用:

script标签中首先得到标签对象,然后在调用属性。

js组成:ECMAScript,BOM,DOM

DOM:文档对象模型,通过DOM编程可以实现动态获取html文件的任意标签进行CURD(增删查改)

根据标签的id属性可以得到标签本身。

/*根据标签的id属性可以得到标签本身。*/
document.getElementById(id);

/*输入项中的内容最终会保存在input中的value属性*/
    <input id="ywg" type="text" value="杨文广">
<button onclick = "sb();">点击获取输入项中的内容</button>

<script type="text/javascript">

        function sb(){
            // 根据标签的id属性获取标签
            var bb = document.getElementById("ywg");
            alert(bb.value);
        }
    </script>
/*实现9*9乘法表:*/

    <script type="text/javascript">
        document.write("<table border = '0' width = '100%'>");
        for(var i = 1;i<=9;i++){
            document.write("<tr>");
            for(var j = 1;j<=i;j++){
                document.write("<td>");
                document.write(j + " * " + i + " = " + ( i * j ));
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");

    </script>